Category: Project-07-Curves

(click on shapes to activate)

This project I was inspired by some of the shapes shown as examples on the project description. I thought the round shapes were really cute and I could imagine them as a pattern. I made it so that each shape you could manipulate individually by clicking on them. This way there could be more options for what you could create based on the mouse.

>mgersing07

//Margot Gersing - Project 7 - mgersing@andrew.cmu.edu- section E

var oneX = 50; //for mouse press
var oneY = 50;
var act1 = false; //peach shape 'activation'

var twoX = 200; //for mouse press
var twoY = 350;
var act2 = false; //rusty orange shape 'activation'

var threeX = 400; //for mouse press
var threeY = 100;
var act3 = false; //pink shape 'activation'

var fourX = 500; //for mouse press
var fourY = 500;
var act4 = false; //gray shape 'activation'

var nPoints = 100;

function setup() {
    createCanvas(600,600);
    frameRate(10);

}

function draw(){
	background(230, 226, 222);
	noStroke();
	one();
	four();
	two();
	three();

	//filler shapes (static)
	fill(233, 154, 123);
	ellipse(50, 600, 400, 150);
	fill(233, 115, 88);
	ellipse(600, 125, 100, 150);
	fill(95, 44, 39);
	ellipse(150, 150, 25, 25);
	ellipse(175, 175, 20, 20);
	ellipse(135, 180, 25, 25);
	ellipse(185, 135, 25, 25);
	ellipse(155, 115, 20, 20);
	ellipse(500, 500, 20, 20);
	ellipse(490, 535, 25, 25);
	ellipse(600, 275, 25, 25);
	ellipse(575, 250, 25, 25);
	ellipse(560, 285, 20, 20);
	ellipse(60, 480, 25, 25);	

}

function one(){
	//peach shape
	var w1 = 200;
    var h1 = 200;

    //click to activate otherwise static
	if(act1){
		w1 = mouseX * .75;
		h1 = mouseY * .75;
	} else{
		w1 = 200;
		h1 = 200;
	}

	fill(240, 213, 189);
	ellipse(50, 50, w1, h1);
}

function two(){
	//epitrochoid
	var x;
    var y; 
    var a = 80.0;
    var b = a / 2.0;
    var h2 = constrain(100 / 8.0, 0, b);
    var ph2 = 100 / 50.0;

    //click to activate otherwise static
    if(act2){
		h2 = constrain(mouseX / 8.0, 0, b);;
		ph2 = mouseX / 50.0;
	} else{
		h2 = constrain(100 / 8.0, 0, b);
		h1 = 100 / 50.0;
	}
    fill(205, 100, 77);
    beginShape(); //drawing shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h2 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph2 + t * (a + b) / b);
        vertex(x + 200, y + 350);
    }
    endShape(CLOSE);
}

function three(){
	//cranioid
	var x;
    var y;
    var r;
    var a = 40.0;
    var b = 10.0;
    var c = 100.0;
    var p = constrain((width/2), 0.0, 1.0);
    var q = constrain((height/2), 0.0, 1.0);

    //click to activate otherwise static
    if(act3){
    	var p = constrain((mouseX / width), 0.0, 1.0);
        var q = constrain((mouseY / height), 0.0, 1.0);
    } else{
    	var p = constrain((width/2), 0.0, 1.0);
        var q = constrain((height/2), 0.0, 1.0);
    } 
    fill(227, 187, 202);
    beginShape(); //drawing shape 
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r =
            a * sin(t) +
            b * sqrt(1.0 - p * sq(cos(t))) +
            c * sqrt(1.0 - q * sq(cos(t)));
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x + 400, y + 100);
    }
    endShape(CLOSE);
}

function four(){
	//gray shape
	var w4 = 200;
    var h4 = 300;

    //click to activate otherwise static
	if(act4){
		w4 = mouseX;
		h4 = mouseY;
	} else{
		w4 = 200;
		h4 = 300;
	}

	fill(37, 45, 46);
	ellipse(475, 475, w4, h4);
}


function mousePressed(){

	//if clicked within in defined distance then activation state is... 
	   //changed from true to false so the mouseX and mouseY will now take over
	var d = dist(oneX, oneY, mouseX, mouseY);
	if(d < 200){
		act1 = !act1;
	}

	var d2 = dist(twoX, twoY, mouseX, mouseY);
	if(d2 < 100){
		act2 = !act2;
	}

	var d3 = dist(threeX, threeY, mouseX, mouseY);
	if(d3 < 100){
		act3 = !act3;
	}

	var d4 = dist(fourX, fourY, mouseX, mouseY);
	if(d4 < 100){
		act4 = !act4;
	}

}