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.