mmiller5-Project-07

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)

Leave a Reply