Category: Section E

sketch

var nPoints = 100;

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

function draw() {
	background(60);
	
	//in this for loop, we draw the bakcground element of the randomized curve
    push();
	translate(width / 2, height / 2);
	for (r = 0; r < nPoints; r ++) {
		stroke(200);
		drawRandomDevil(r);
	}
	pop();
    
    //in this loop, we draw the primary forground element 
    //which is the center devil's curve
	push();
	translate(width / 2, height / 2);
	rotate(mouseX / mouseY);
    for (v = 0; v < nPoints; v ++) {
    	stroke(mouseX - 200, v, mouseY - 300);
    	drawDevilBoi(v); 
    }
	pop();  
    
    //this loop is to create the six rotating deveil's vurves
    for ( c = 0; c < 6; c ++) {
    	push();
    	translate(width / 2, height / 2);
    	rotate(radians(60 * c));
	    translate(width / 4, height / 4);
	    rotate(mouseX / mouseY);
            for (v = 0; v < nPoints; v ++) {
    	    stroke(mouseX - 100, v, mouseY - 100);
    	    drawDevilBoi(v); 
         }
	    pop();
    }
}


function drawDevilBoi (x) {
    //draw the devil's curve in this function 
    //first declare all the variables 
    var x;
    var y; 

    var c = constrain((mouseX / width), 0, 1);
    var co = constrain((mouseY / height), 0.0, 1.0);

    var a = c * ((mouseX - 200) / 3 * (100 + v) / 100);
    var b = co * ((mouseY - 200) / 3 * (100 + v) / 100);

    //set desire stroke
    noFill();
    strokeWeight(0.25); 
    //draw the curve
    beginShape();
    for (var i = 0; i < nPoints; i += 5) {
    	var t = map(i, 0, nPoints, 0, TWO_PI); 
    	x = cos(t) * sqrt ((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
    	y = sin(t) * sqrt ((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
    	vertex(x, y + 10);
    }
    endShape(CLOSE); 
}

function drawRandomDevil (x) {
	//draw another devil's curve, this time there is an element of randomness with it

	var x;
    var y; 

    var c = constrain((mouseX / width), 0, 1);
    var co = constrain((mouseY / height), 0.0, 1.0);

    var a = c * ((mouseX - 200) / 3 * (100 + r) / 100);
    var b = co * ((mouseY - 200) / 3 * (100 + r) / 100);
   
    //set the desired stroke 
    noFill();
    strokeWeight(0.075); 
    //start to draw the curve
    //this curve will be in the background and looks like noise
    beginShape();
    for (var i = 0; i < nPoints; i += 7) {
    	var t = map(i, 0, nPoints, 0, random(radians(350, 360))); 
    	x = cos(t) * sqrt ((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
    	y = sin(t) * sqrt ((pow(a, 2) * pow(sin(t), 2) - pow(b, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
    	vertex(x, y + 10);
    }
    endShape(CLOSE); 
}

This project was a bit of a mixed bag for me, as I did struggle to implement the curve into my work at first and make it appear in a way that I wanted it to. (Also choosing the curve I wanted to pursue took me a while, but I ultimately settled on The Devil’s Curve because I thought that it’s shape was very unique and could produce some nice variation). However, once I figured that out and began to play around I really enjoyed myself. I never really knew what changing the variables would make my code look like, so it was an exciting process of trial and error to create a nice form.

sketch

/* Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-07
*/

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

function draw() {
// changes color depending on mouse position
    var r = map(mouseY, 0, height, 0, 255);
    var g = map(mouseX, 0, width, 0, 100);
    var b = map(mouseY, 0, height, 0, 180);
    background(r, 200, 100);
    stroke(r, g, b);
// position of curves to the center of canvas
    translate(width / 2, height / 2);
    noFill();
    strokeWeight(2);
    drawHypotrochoid();
    strokeWeight(0.5);
    drawRanunculoid();
}

function drawHypotrochoid(){
    var x;
    var y;
    var h = constrain(width / 2, 0, mouseX / 2); // distance from center
    var a = map(mouseX, 0, width, 0, HALF_PI); // size of inner circle
    var b = map(mouseY, 0, height, 0, PI); // size of outer circle

    beginShape();
        for(var i = 0; i < width; i+=10){
            var t = i / 2;
            // equation of hypotrochoid
            x = (a - b) * cos(t) + h * cos(((a - b) / b) * t);
            y = (a - b) * sin(t) - h * sin(((a - b) / b) * t);
            vertex(x, y);
        }
    endShape();
}

function drawRanunculoid(){
    var x;
    var y;
    var h = constrain(width / 4, 0, mouseX / 4); // distance from center
    var a = map(mouseX, 0, width, 0, 12 * PI); // size of inner circle
    var b = map(mouseY, 0, height, 0, 12 * PI); // size of outer circle

    beginShape();
        for(var i = 0; i < 400; i++){
            var t = i / 2;
            // equation of ranunculoid
            x = a * (6 * cos(t) - cos(6 * t));
            y = a * (6 * sin(t) - sin(6 * t));
            vertex(x, y);
        }
    endShape();
}

When I started this project, I was intimidated by the equations because I have not done math like this in a long time. It took me a little while to figure out how to use the for loop with the equations and the variables within them. Even though I faced some difficulties coding my first curve, which was the Hypotrochoid, I decided to add another curve called the Ranunculoid because I like how they interacted with each other. This project also helped me understand the map() and constrain() functions, which I used to control the colors and sizes of the curves.

click me!

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-07-Curves
*/

// http://mathworld.wolfram.com/EightCurve.html  

// click to begin! and keep clicking to see it change! 

var nPoints = 100;
var clickCount = 0;

function setup() {
    createCanvas(400, 400);
    frameRate(10);
    strokeWeight(3);
    noFill();
}

function draw() {
    background(0, 128, 128);
    var rad; // scale of expansion (how much wider the petal becomes)
    var angle; // angle of rotation the curve is translated

    for (i = 0; i < clickCount; i++) {
    	rad = 0.1 * i; // becomes wider with every click
    	angle = 30 * i; // rotates with every click
    }

    // curve in top right corner
    push();
    translate(3 * width / 4, height / 4);
    rotate(radians(angle + 45));
    drawCurve(random(0, 255), rad); //random color, angle
    pop();

    // curve in bottom left corner
    push();
    translate(width / 4, 3 * height / 4);
    rotate(radians(angle + 45));
    drawCurve(random(0, 255), rad);
    pop();

    // curve in top left corner
    push();
    translate(width / 4, height / 4);
    rotate(radians(angle - 45));
    drawCurve(random(0, 255), rad);
    pop();

    // curve in bottom right corner
    push();
    translate(3 * width / 4, 3 * height / 4);
    rotate(radians(angle - 45));
    drawCurve(random(0, 255), rad);
    pop();

    // center curve
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle + 90))
    drawCurve(random(0, 255), rad);
    pop();

    // perpendicular center curve
    push();
    translate(width / 2, height / 2);
    rotate(radians(angle));
    drawCurve(random(0, 255), rad);
    pop();
   
}

// draw eight curve
function drawCurve(c, r) {
    var x;
    var y; 
    var a = constrain(mouseX, 0, width / 2);
    
    stroke(c);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI); // map to unit circle

        // parametric function
        x = a * sin(t); 
        y = a * sin(t) * cos(t) * r;

        vertex(x, y);
    }
    endShape(CLOSE);
}

function mousePressed() {
	clickCount++;
}

I struggled a lot with this project in particular, because I forgot a lot of the algebra related. I found it really difficult to implement any curve at all, and I originally wanted to use a more complicated curve. However, I enjoy the simplicity of this curve and how complex it can become when layered on top of each other. This reminds me of tangled strings, especially the more you click and zoom in! The greyscale flickering happened on accident, but I really liked it so I kept it, moving away from the filled hour-glass shapes I had originally.