Month: October 2017

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.