Project-07-Butterfly Curve

sketchsl07.Download
// Sarah Luongo   
// sluongo
// sluongo@andrew.cmu.edu
// Project

/* This code aims to create the curve, butterfly curve, as explained on Wolfram
MathWorld. In addition to drawing the curve I played around with the fill color
and stroke depending on the X position of the mouse. */

// Setups canvas size and speed
function setup() {
    createCanvas(480, 480);
    frameRate(10);
}

// Draws the butterfly curve
function draw() {
    var red = random(255); // Random shade of red
    var green = random(255); // Random shade of green
    var blue = random(255); // Random shade of blue

    background(0); // Black background
    translate(width/2, height/1.64); // Translate to the "center" of canvas
    rotate(PI); // Rotate 180 degrees

    if (mouseX < width/3) {                           
        fill(red, green, blue); // Random fill color      
	stroke(0); // Black
	// Draws butterfly curve 4 times
        for (var i = 0; i < 4; i++) {
            drawButterflyCurve(i);
        }  
    } else if (mouseX >= width/3 & mouseX < 2*(width/3)) {
	noFill();
	stroke(red, green, blue); // Random stroke color
	// Draws butterfly curve 4 times
        for(var i = 0; i < 4; i++) {
            drawButterflyCurve(i*2); // i*2 makes size of curve bigger
        }
    } else if (mouseIsPressed) {
	background(225, 200, 255); // Purple background
	noFill();
	stroke(0); // Black
	drawButterflyCurve(1); // To see original curve
    } else {
	noStroke();
	fill(red, green, blue); // Random fill color
	// Draws butterfly curve 4 times
        for(var i = 0; i < 4; i++) {  
            drawButterflyCurve(i/3); // i/3 makes size of curve smaller
        }
    }
}

// Butterfly Curve
// https://mathworld.wolfram.com/ButterflyCurve.html
function drawButterflyCurve(j) {
    var da = .01; // How round the "wings" are
    var a = map(mouseX, 0, width, 0, width/9); // Constrain x size of butterfly curve 
    var b = map(mouseY, 0, height, 0, width/8); // Constrain y size of butterfly curve
    // Creates the butterfly curve
    beginShape();
    for (var t = 0; t <= 24*PI; t += da) {
	// The parametric equations found on the website commented above
	var r =  exp(cos(t))-2*cos(4*t)-pow(sin(t/12), 5);
	var x = a * sin(t) * r * j;
	var y = b * cos(t) * r * j;
	vertex(x, y);
    }
    endShape();
}

When I saw this curve on Wolfram MathWorld, I was super excited because I had attempted to draw a butterfly in my last project. I think this curve is way cooler because there’s a lot more curves and more going on. So, it wasn’t just a boring (although I don’t find it so boring) Butterfly Curve, I added some if statements to duplicate the curves, change colors of the fill and stroke, but if this is too much for you you can also click the mouse in the bottom right to get the normal curve. Also, moving the mouse up and down and side to side within each if statement changes the size of the curves. If you move it left to right within a third of the width it kind of looks like the butterfly is flapping it’s wings.

Mouse within 0 and 1/3 of the width
Mouse within 1/3 and 2/3 of the width
Within 2/3 and 3/3 of the width
Within 2/3 and 3/3 of the width if mouse is pressed (best if clicked at bottom right)

Leave a Reply