Project 07

curvy curves
var x;
var y;
var spread; // how far each bean is from one another	
var a; // scales the size of individual beans




function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0, 30, 50);	
	translate(width/2, height/2);
	push();
	for(var i = 0; i <= 24; i ++){
		beanWO();
		rotate(radians(15));
	} 
	pop();
    // arrangement of 24 beanWO functions 

	push();
    for(var j = 0; j <= 12; j++){ 
    	beanF();
    	rotate(radians(30));
    }
    pop();
    // arrangement of 12 beanF functions

    push();
    for(var k = 0; k <= 36; k++){
        beanScrib(); 
        rotate(radians(mouseX));	
    }
    pop();
    // arrangement of 36 scribble-like shapes that rotate based on the X position of the mouse

    push();
    for(var m = 0; m <= 3; m ++){
    	beanVar();
    	rotate(radians(120));
    }
    pop();
    // draws function beanVar in the middle of the canvas
} 



function beanWO(){ 
// draws beans with white outlines that move toward and away from the origin based on mouseX
    push();
    a = 100
    spread = mouseX/5;
	stroke(255);
	noFill();
	beginShape();
	for(var theta = 0; theta <= TWO_PI; theta += radians(1)){
        x = a * cos(theta) * (pow(sin(theta), 3) + pow(cos(theta), 3)) + spread; // 
        y = a * sin(theta) * (pow(sin(theta), 3) + pow(cos(theta), 3)) + spread; // y parameter of bean curve
        vertex(x, y)
	}
	endShape();
	pop();
}

function beanF(){ 
// draws translucent beans whose colors change with mouseY
	push();
	a = 200;
	spread = -mouseX/5; 
	var r = map(mouseY, 0, 480, 0, 255);
	noStroke();
	fill(r, 255, 231, 40);
	beginShape();
	for(var theta = 0; theta <= TWO_PI; theta += radians(1)){
        x = a * cos(theta) * (pow(sin(theta), 3) + pow(cos(theta), 3)) + spread; // x paremeter of bean curve
        y = a * sin(theta) * (pow(sin(theta), 3) + pow(cos(theta), 3)) + spread; // y parameter of bean curve
        vertex(x, y)
	}
	endShape();
	pop();	
}

function beanScrib(){ 
// draws a variation of the bean function that looks like a scribble
	push();
	a = mouseY;
	spread = mouseY/12
	noFill();
	stroke(214, 197, 255, 40);
	strokeWeight(3);
	beginShape();
	for(var theta = 0; theta <= radians(180); theta += radians(1)){
        x = a * cos(theta * .5) * (pow(sin(theta * .6), 3) + pow(cos(theta), 3)) + spread; 
        y = a * sin(theta * .5) * (pow(sin(theta * .6), 3) + pow(cos(theta), 3)) + spread; 
        vertex(x, y)
	}
	endShape();
	pop();	
}

function beanVar(){ 
// draws a variation of the bean function that changes with mouseY
	push();
	a = 50
	var b = map(mouseY, 0, height, 0, 5) // modifies an angle in the function with mouseY
	noFill();
	stroke(146, 255, 205);
	strokeWeight(5);
	beginShape();
	for(var theta = 0; theta <= radians(180); theta += radians(1)){
        x = a * cos(theta) * (pow(sin(theta * b), 3) + pow(cos(theta), 3));  
        y = a * sin(theta) * (pow(sin(theta * b), 3) + pow(cos(theta), 3)); 
        vertex(x, y)
	}
	endShape();
	pop();

}

For this project, I chose to explore the properties of the “Bean Curve,” essentially a curve shaped like a bean. After figuring out how to use the parametric equations, I experimented with implementing a series of beans that were arranged in a concentric shape and moved further apart with mouseX. From there, I tried plugging in different variables into this function to see what kinds of compositions I could create with different parameters.

Leave a Reply