Category: Section A

sketch

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


function draw() {
    background(226,236,236);
    
    strokeWeight(2);
    noFill();
    
    // draw the curve
    push();
    translate(width / 2, height / 2);

    // the curve inside
    for (var i = 0; i < 8; i++) {
        var r = 207-(207-152)/6*i;
        var g = 171-(171-92)/6*i;
        var b = 177-(177-103)/6*i;
        stroke(r,g,b);
        drawTetracuspidCurve();
        rotate(PI/14);
    }

    // the circle curve outside
    for (var i = 0; i < 6; i++){
        var r = 215-(215-147)/6*i;
        var g = 195-(195-126)/6*i;
        var b = 186-(186-118)/6*i;
        stroke(r,g,b);
        drawRanunculoidCurve();
        rotate(PI/3);
    } 
    pop();


}

function drawRanunculoidCurve() {
    var nPoints = 100;
    var x;
    var y; 
    var a = 100;
    var b = a / 5;   
    var ph = mouseX / 40;
    // control the shape in two opposite sides
    if (mouseY <height/2){
        var h = constrain(mouseY / 8, 0, b);
    } else {
        var h = constrain((height - mouseY) / 8, 0, b);
    }
    
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        // map the points onto angles
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);    
}

function drawTetracuspidCurve(){
    var nPoints = 200;
    var x;
    var y;
    var a = 120;
    var ph = mouseX / 40;

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        x = a / 4 * (3*cos(t) -  cos(ph + 3 * t));
        y = a / 4 * (3*sin(t) +  sin(ph + 3 * t));
        vertex(x, y);
    }
    endShape(CLOSE);    
}

Above are the process of my work. So, I combined two different kinds of curves in my project: Ranuncuidloid and Tetracuspid curves. The first shape is inspired from the form of flowers, and the other is inspired from the shape of a star. These two curves are all rotatable according to the x-coordinates of the mouse. Also, the flower shapes is generated from the y-coordinates of the mouse. The flower shape is more visible if the y-coordinates of your mouse is more towards the center, is like the flower is blooming. This project helps me understand more about the use of translate() and rotate(), which are my weakness. Also, I learned about many control elements in the curve equation, which is also meaningful.

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.