Category: Section B

sketch

// atraylor@andrew.cmu.edu
//Project 07
// Section B


var a = 0;



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

function draw() {
    background(171, 163, 247);
    scribble();
}

function scribble(i, a, rad2, x, y) { // make the curve
    a = map(mouseX, 0, width, 10, 110); // number of lines in curve by mouse position
    var rad2 = 40; // staring radius

    beginShape();
    fill(203, 90, 243, 10);
    stroke(151, 227, 245);
    translate(width/2, height/2); //center
    for(var i = 0; i < a; i++) {
        var theta = map(i, 0, a/80, 0, TWO_PI); // apply values of i to radians in circle
        var x = rad2 * cos(theta); // x position of vertex
        var y = rad2 * sin(theta); // y position of vertex
        vertex(x, y);
        rad2 *= 1.02; // this makes it a spiral rather than a circle.
    endShape();
    }
}

For this project I used a parametric version of the logarithmic spiral to draw my curves. I played with it so the function would draw various shapes rather than simply growing a spiral when segments were added. There are several areas where you can see the near perfect spiral, and others where it’s simply a mess of lines. Its interesting to see the shapes that are spirals but have clear sides so they form stars, triangles, or pentagons. I added a fill to the curve with an alpha channel to emphasize the growth and change of the shape.

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 07
var npoints =100; //points for generating curve
function setup() {
    createCanvas(480,480); //canvas size of 480 by 480
    angleMode(DEGREES); //set radian to degree

}

function draw() {
    background(0);//set background to black
    stroke(255); //curve colro tobe white 
    var mx = constrain(mouseX,30,width-30); // return mousex value within constrain
    var my = constrain(mouseY,30,height-30); //return mousey value within constrain
    noFill(); //no fill on geometry
    heart(mx,my); // execute heart function wiggly heart
    heart2(mx,my); //execute heart2 function line following mouse
    nails(mx,my);
}
function heart(rn1,rn2){ //for getting parameter for x,y mouse 
    strokeWeight(0.5); //set stroke size to 0.5
    push() 
    beginShape();
    translate(width/2,height/2) // make it center at middle 
    for (var i =0; i <npoints;i++) { // for loop for creating geometry
    var t = map (i,0,npoints,0,360); // map t value to degree
    var x = 16*sin(t)*sin(t)*sin(t); // x function from the mathworld wolf cam
    var y = 13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t); //y function from mathworld wolf cam 
    vertex(x*rn1/40+(rn1/50*random(-0.5,0.5)),-y*rn2/40+(rn2/50*random(-0.5,0.5))); //create heart shape with wiggle 
    //as mouse move wiggle gets small or big
    }
    endShape(CLOSE); //end the geomtry
    pop();
}
function heart2(rn1,rn2){
    strokeWeight(0.5);//set stroke size to 0.5
    push();
    
    for (var i =0; i <npoints;i++) { // for generating geometry
    var t = map (i,0,npoints,0,360); // t value to degree
    var c = color (150,0,0); // color to red 
    stroke(c); // set stroke color to red
    var x = 16*sin(t)*sin(t)*sin(t); // heart x
    var y = 13*cos(t)-5*cos(2*t)-2*cos(3*t)-cos(4*t);//heart y 
    line(rn1,rn2,x*rn1/60+width/2,-y*rn2/60+height/2); //create line from heart to mouse position
}
    pop();
}
function nails(rn1,rn2){
    stroke(255,81,51,500-(rn1+rn2)/2) //color alpha change based on the mosue
    strokeWeight(0.4);  //stroke weight 

    push(); 
    beginShape();
    translate(width/2,height/2);
    for (var i =0; i <npoints; i++){
    var t = map (i,0,npoints,0,360); //mapping to dgrees 
    var r = map((rn2+rn1),0,(height+width),0,100); // mapping radius to max 100 based on mouse
    var x = r*cos(t); // circle x
    var y = r*sin(t); //circle y 
    vertex(x*rn1/200,y*rn2/200);//outer line for the vertex
    vertex(x*rn1/150,y*rn2/150);//inner circle for connecting 
  }
    endShape(CLOSE); //close the geometry 
    pop();
}

While I was searching for which curve to play with, I found heart shaped curve. I wanted to express emotion that I was having when the idea came up. I wanted the heart to give unstable look with directional element. At the same time, I look for other curve that could be used to show nail. I wanted to illustrate nails in the heart when heart is small but as it grow, nail starts to disappear. I have used r cos(theta) and r sin(theta) to generate the circular curve that will be used to represent the nail. To show the instability of the heart I used the wiggling motion, and I have used line to move along with the mouse coordinate to show dynamic direction that heart can point to.

sketch

var mouse_x;

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

function draw() {
    background(50);
    var x;
    var y;

    // limit the mouseX only works in canvas
    if(mouseX<width & mouseX >0){
        mouse_x = mouseX;
    } else if (mouseX<=0){
        mouse_x = 0;
    } else{
        mouse_x = width;
    }

    // http://mathworld.wolfram.com/Deltoid.html 
    // mapping the b from 0 to 480 into from 0 to 30,
    // and since b is the radius of the small circle, make it relate to
    //mouse X can change the scale of the curves. 
    var b = map(mouse_x, 0, width, 0, 30);

    for (var i = 1; i <= 20; i++) {
        push();
        //put the whole thing in the center of the canvas and make it shake
        translate(width/2+random(-5,5), height/2+random(-5,5));
        //change mouseX also affect the rotation of the shapes 
        var rotateAng = map(mouse_x, 0, width, 0, TWO_PI)
        //make the rotation more obvious
        rotate(rotateAng + i*3);
        //make the stroke weight become less according to the number of shape
        strokeWeight(8/i);
        noFill();
        //make the stroke color of circles randomlmy change
        stroke(random(20,100),random(10,130),random(50,100)
            ,400/i);
        ellipse(0,0,6*i*b,6*i*b);
        //call the function to draw curves
        DrawCurves(i * b);
        pop();
    }
}

function DrawCurves(R) {
    //map the color change into a range as the mouseX is changing
    var red = map(mouse_x, 0, width, 10, 20);
    var green = map(mouse_x, 0, width, 10, 15);
    var blue = map(mouse_x, 0, width, 10, 20);

    fill(red*random(4, 7), green*random(11,12),blue*random(6,15));
    //draw curves according to the parametric equations
    for (var i = 0; i < 360; i++) {
        var t = radians(i);
        x = 2 * R * cos(t) + R * cos(2 * t);
        y = 2 * R * sin(t) - R * sin(2 * t);
        beginShape(POINTS);
        vertex(x, y);
        endShape();
    }
}

First, I went through the curves and picked out Deltoid (http://mathworld.wolfram.com/Deltoid.html) one to play around.

After I successfully drew our the curve in a static way, I thought about how to make it look more interesting. I tried to draw multiple curves in different scales but found that if they are in the same direction, it looked boring. So I tried to make them rotate and point to different directions. Next step, I used mouseX to control the rotation. And I thought if the scale of the curves can also be changed, it would be interesting! After this was done, I figured out I could also play around with the stroke weight to make curves look different and also colours!

I am glad that I finally got an interesting interactive result 🙂