Category: Project-07-Curves

sketch

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    textAlign(CENTER);
    textSize(60);
}

function draw() {
    background(0);
    curves();
    smile();
}

function curves() {
    var cx = width / 2; //center of width
    var cy = height / 2; //center of height
    var t = 400; //iteration count
    var mx = map(min(mouseX, width), 0, width, 2, 5); //x position of mouse map
    var my = map(min(mouseY, height), 0, height, 2, 5); //y pos. of mouse mapped
    strokeWeight(1);
    for (i = 0; i < t; i ++) {
	var col = map(i, 0, t, 0, 255);
	//logarithmic spiral
	var x = (t - i) * cos(radians(i * mx));
	var y = (t - i) * sin(radians(i * my));
	fill(col);
	stroke(255 - col, 200);
	//make a quadrilateral with vertices at 4 spirals in the corners
	quad(x + width / 4, y + height / 4,
	     x + 3 * width / 4, y + height / 4,
	     x + 3 * width / 4, y + 3 * height / 4,
	     x + width / 4, y + 3 * height / 4);
    }
}

function smile() {
    var cx = width / 2; //center of width
    var cy = height / 2; //center of height
    var md = map(min(dist(mouseX, mouseY, cx, cy), 340), 0, 200, 15, -15);
    stroke(0);
    strokeWeight(3);
    noFill();
    //emoji like eyes, uses actual font, changes if mouse is in face
    if (mouseX > width / 4 & mouseX < 3 * width / 4 &&
       mouseY > height / 4 && mouseY < 3 * height / 4) {
	text("> <", cx, cy - 5);
    } else {
	text("| |", cx, cy - 5);
    }
    //smile, changes size with distance of mouse to center beacuse of var "md"
    arc(cx, cy + 30, 50 + (md / 3), 80 + md, 0, PI, CHORD);
}

Hee hee, this was fun.  I used a parametric form of a logarithmic spiral as the base of this program.  I then wanted to experiment with connecting points from different spirals together (in this case, I had 1 spiral in each corner).  I figured a good way to introduce mouseX and mouseY would be to have them affect the period of revolution (with mouseX affecting the x-position and mouseY affecting the y-position).  I thought the movement looked kinda like a snake, and since the center square was pretty barren, I decided to anthropomorphize the curve with a emoji-like smily face.

Initial logarithmic spiral (not really visible)

amui1-p7

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-07


//global variables
var nPoints = 100;

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

function draw() {
    background(0,0,63);
    //places bottom left corner
    drawAstroid(70,height-80);
    //places top right corner
    drawAstroid(width-60,80);
    drawRose();
}

function drawAstroid(xPos,yPos) {

    //size
    var a = 30;

    beginShape();
    noFill();


    stroke(255,242,254);
    strokeWeight(1);

    //loops ten times to make layer of astroid
    for (var num = 0; num < 10; num += 1) {
      //test loop
      //print(num);
      //loops through 100 times to make the curve
      for (var i = 0; i < nPoints; i++) {
        //constrains and maps theta to be between 0 and two pi
        var theta = map(i, 0, nPoints, 0, TWO_PI);

        //formulas provided by MathWorld
        x = xPos + a*(cos(theta)**3);
        y = yPos + a*(sin(theta)**3);


        vertex(x,y);

      }
      endShape();
      //decreases size of astroid in accordance with mouseX
      a = a - constrain(mouseX,0,width);
    }
}

function drawRose() {
    stroke(255,252,201);
    noFill();
    //size of rose inm accordance with mouseX
    var roseA = constrain(mouseX,50,200);
    //number of petals
    var roseFactor = 6;

    //loop through 10 times for extra layers
    for (var roseNum = 0 ; roseNum < 10; roseNum += 1) {
      for (var i = 0; i < nPoints; i++) {
        //constrains theta to be between 0 and two pi
        var roseTheta = map(i,0,nPoints,0,TWO_PI);

        //formulas from mathworld
        r = roseA*sin(roseFactor*roseTheta);

        roseX = width/2 + r*cos(roseTheta);
        roseY = height/2 + r*sin(roseTheta);

        ellipse(roseX,roseY,1,1);
      }
      //decreases size of rose in accordance with mouseX
      roseFactor = roseFactor - mouseX;
      //to test
      // print(roseFactor);
    }
}

This project was pretty challenging. I found mathWorld extremely useful in showcasing the x and y equations in order to make the shape. However, I found it difficult to come up with a creative idea that implemented the curve shape. What I came up with was inspired by the stars. Overall, I’m satisfied with my end product. However, in the future, I would like to explore more and maybe implement something new using the time function. Another thing that I wish I could have taken more time researching was finding a way to make the astroid curve into a rose curve over the movement of mouseX. But, that was too hard and too much of a time constraint for the time being. Overall, I’m satisfied with my end product which gives off a “sparkly” feel.