It slowly draws a butterfly if u move your mouse from left to right!
/*
* Andrew J Wang
* ajw2@andrew.cmu.edu
* Section A
*
* This Program is ButterFly and Flower Curves
*/
function setup() {
createCanvas(480,480);
}
function draw() {
background(220);
//create constrain for the rest of the codes' mouse X and Y
var conY = constrain(mouseY,0,height);
var conX = constrain(mouseX,0,width);
//create two array sets for Flower's X and Y
var pointX2 = [];
var pointY2 = [];
//remapping A and B with mouse X and Y
//A => inner circle, B => outer circle
var a = map(conY,0,width,50,150);
var b = map(conX,0,width,5,15);
var h = 20;
//using for loop to get points
for (var k=0; k<=2000; k+=1)
{
//2 PI but 2000 points
var t=k/1000*Math.PI;
//epitrochoid formulas for X and Y
var xP2= width/2+((a+b)*Math.cos(t)-h*cos(((a+b)/b)*t));
var yP2= height/2+((a+b)*Math.sin(t)-h*sin(((a+b)/b)*t));
//push values to lists
pointX2.push(xP2);
pointY2.push(yP2);
}
//connect vertexes and close them
push();
noFill();
//stroke
stroke(0);
strokeWeight(5);
beginShape();
for (var k=0; k<=2000; k+=1)
{
vertex(pointX2[k],pointY2[k]);
}
endShape(CLOSE);
pop();
//connect vertexes and close them
push();
//no stroke only fill
fill(255,200,200);
strokeWeight(0);
beginShape();
for (var k=0; k<=2000; k+=1)
{
vertex(pointX2[k],pointY2[k]);
}
endShape(CLOSE);
pop();
//same logics but this time it is the butterfly curves
var pointX = [];
var pointY = [];
for (var k=0; k<=2400; k+=1)
{
//Mouse Y dictate how big the butterfly will be
var xP= width/2-map(conY,0,width,0,100)*Math.sin(k/100*Math.PI)*((Math.exp(Math.cos(k/100*Math.PI))) - (2*Math.cos(4*(k/100*Math.PI))) - (Math.pow(Math.sin((k/100*Math.PI)/12), 5)));
var yP= height/2-map(conY,0,width,0,100)*Math.cos(k/100*Math.PI)*((Math.exp(Math.cos(k/100*Math.PI))) - (2*Math.cos(4*(k/100*Math.PI))) - (Math.pow(Math.sin((k/100*Math.PI)/12), 5)));
pointX.push(xP);
pointY.push(yP);
}
//this time I use smaller circles to represent the curves
fill (90,map(conY,0,width,0,255),100);
stroke (90,map(conY,0,width,0,255),100);
//mouse X dictates how many circles
for (var k=0; k<=conX*4; k+=1)
{
circle (pointX[k],pointY[k],3);
}
}