Category: Section C

http://mathworld.wolfram.com/SphericalSpiral.html

sketch

//Isadora Krsek
//Ikrsek@andrew.cmu.edu
//Section C
//Project 07: Curves

var x; 
var y; 
var z; 

function setup() {
    createCanvas(400, 400);
    noStroke();
}
 
function draw() {
    background(0);
    //adjusting placement & size of curves
    translate(width/2, height/2);
    scale(150)
    limit = (map(mouseX, 0, width, 2, 8)); //caps the # of loops
    limit2 = (map(mouseY,0,height,20, 80)) //caps the # of loops
    push();
    scale(3,3)
    rotate(radians(90));
    push();
    rotate(mouseY,0,height,0,360)
    drawLoxoB();
    pop();
    drawLoxo();
    pop();
}


function drawLoxo() {
  //a controls how many strokes there are in terms of representing the loxodrome
    for (var a=.4; a<limit; a+=.2) {  
    //color change mapped to a
      var rValue = (map(a, 0.4, 4, 0, 360))
      fill(rValue);
      beginShape(QUADS);   
      for (var t = -20; t <limit2; t+=.1) {
        x = ((cos(t))/(sqrt(1+pow(a,2)*pow(t,2))));
        y = ((sin(t))/(sqrt(1+pow(a,2)*pow(t,2))));
        vertex(x, y);
      }
      endShape();
    } 
}

function drawLoxoB() {
  for (var a=.4; a<limit; a+=.2) { 
    var rValue = (map(a, 4, 0.4, 0, 360)) 
    fill(rValue);
    beginShape(QUAD_STRIP);   
    for (var t = -20; t <limit2; t+=.1) {
      x = ((cos(t))/(sqrt(1+pow(a,2)*pow(t,2))));
      y = ((sin(t))/(sqrt(1+pow(a,2)*pow(t,2))));
      vertex(x, y);
    }
    endShape();
  } 
}

I was looking at a few different curves but was most inspired by the loxodrome which I decided to try to replicate 2-dimensionally.

I wanted to create something a little haunting, but still somewhat visually exciting in the spirit of October, and as a result this is what I came up with. It brings to mind for me, the headlight of a train as it’s running towards you inside of a tunnel.

 

 

sijings-07

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//Assignment-06-compositionwithCurve

var t=0;
var r=60;
var curveP1;
var curveP2;
var color1=141;
var color2=141;

function setup() {
  createCanvas(480, 480);
}
 
function draw() {
  var t=map(mouseY, 0, height/4, height/2, height/4);//constrain it between hieght/2 and height/3
  background(156,170,164);
  noStroke();  
  var limit;//curve for determining how many times we want to rotate
  if (mouseX<width/2){
    limit=map(mouseX,0,width/2,0,16);
  }else{
    limit=map(mouseX, width/2, width,16,0);
  }
  for (var num=0;num<limit;num++){//set limit as our limit for iteration
    //leafs
    angleMode();
    fill(200,195,167);
    arc(50, 50, 140, 140, 180, 270,CHORD);//all used chord becuase we need to create
    arc(50, 80, 140, 140, 200, 270,CHORD);//a effect of leaves
    arc(width-50, height-50, 140, 140, 180, 270,CHORD);
    arc(width-50, height-80, 140, 140, 200, 270,CHORD);
    fill(104,103,78);
    arc(50, 70, 160, 140, 30, 0,CHORD);
    arc(60, -90, 260, 240, 190,40, CHORD);
    arc(width-50, height-30, 160, 140, 30, 0,CHORD);
    arc(width-50, height-90, 260, 240, 190,40, CHORD);
    fill(203,169,111,70);
    arc(30, -40, 260, 240, 190,40, CHORD);
    arc(20, 70, 140, 140, 180, 270,CHORD);
    arc(55, 115, 140, 140, 200, 270,CHORD);
    arc(width-150, height-90, 260, 240, 190,40, CHORD);
    arc(width-20, height-70, 140, 140, 180, 270,CHORD);
    arc(width-55, height-115, 140, 140, 200, 270,CHORD);
    fill(212,202,144);
    arc(50, 120, 240, 240, 200, 270,CHORD);
    arc(width-115, height-120, 240, 240, 200, 270,CHORD);
    fill(104,103,78,100);
    arc(-20, 90, 160, 140, 30, 0,CHORD);
    arc(20, -90, 260, 240, 190,40, CHORD);
    arc(width-80, height-90, 160, 140, 30, 0,CHORD);
    arc(width-80, height-90, 260, 240, 190,40, CHORD);

  //inner loop for drawing the actual curve
    for (var i=0;i<670;i++){
      r=mouseX/5;//set the radius to continue change
      if (num%4==0){//set different conditions for determing which direction we want
        var x=r*cos(t)*(1+cos(t));
        var y=r*sin(t)*(1+cos(t));
      }
      if (num%4==1){
        var x=r*cos(t)*(1-cos(t));
        var y=r*sin(t)*(1-cos(t));
      }
      if (num%4==2){
        var x=r*sin(t)*(1+cos(t));
        var y=r*cos(t)*(1+cos(t));
      }
      if (num%4==3){
        var x=r*sin(t)*(1-cos(t));
        var y=r*cos(t)*(1-cos(t)); 
      }
      t+=0.97;
      curveP1=width/2+num*2+x-12;//circles position x
      curveP2=height/2+num+y;//circles position y
      if (mouseX<width/2){
        var color1=map(mouseX, 0, width/2, 200, 74);//set conditions for changing color
        var color2=map(mouseX, 0, width/2, 121, 36);
      }else{
        var color1=map(mouseX, width/2, width, 80,200);
        var color2=map(mouseX, width/2, width, 35,121);
      }

      rotate(PI/5.0);//for rotating shape
      fill(255,color1,color2,255-mouseX/3);
      var size=map(mouseX,width/2,width,2,10);//also constrain size
      ellipse(curveP1,curveP2,size,size);
    } 

  }
  

}

For this project, I wanted to express the idea a flower is blooming and then dying based on our mouse movement from left of the canvas to the right. So we can see there are changes of the number of petals (increase when mouseX approaching to the center of the canvas) and decreases when mouseX leaving the center of the canvas and going to the edge. With this movement, there are also changes in color, opacity, size, and the position of each dots. The audience can play this interactive work by rotating the flower and seeing how they can transform a flower from born to death. There are also some leaves being created for decoration. Here are some screenshots of the different states of the flower.

Curve

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Project 7: Curves
// Section C

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

function mousePressed () {
    background (0);
}


function draw () {

    stroke (255);
    strokeWeight (2.5);

    // defining variables for drawing line-heavy shapes;
    // linking x variables with the mouseX parameter;

    var x1 = mouseX;
    var y1 = 40;
    var x2 = mouseX;
    var y2 = 440;
    var xMid = width / 2;
    var yMid = height / 2;

    // drawing the spikey, Masonic symbol thing;

    stroke (mouseX / 2 + 20, mouseX / 2, mouseY / 3);
    line (x1, yMid, x2, yMid);
    line (xMid, yMid / 4 - 30, xMid, yMid - 40);
    line (xMid, yMid - 40, xMid - 180, yMid + 180);
    line (xMid, yMid - 40, xMid + 180, yMid + 180);
    line (xMid, yMid - 210, xMid + 180, yMid + 180);
    line (xMid, yMid - 210, xMid - 180, yMid + 180);
    line (x1, yMid, xMid, yMid - 150);
    line (x2, yMid, xMid, yMid - 150);
    line (x1, yMid, xMid, yMid - 80);
    line (-x2 + 480, yMid, xMid, yMid - 80);

    // drawing the inverse (upside-down version);

    stroke (mouseY / 2, 0, mouseX / 3);
    line (x1, yMid, x2, yMid);
    line (xMid, yMid / 4 - 30, xMid, yMid + 40);
    line (xMid, yMid + 40, xMid + 180, yMid - 180);
    line (xMid, yMid + 40, xMid - 180, yMid - 180);
    line (xMid, yMid + 210, xMid - 180, yMid - 180);
    line (xMid, yMid + 210, xMid + 180, yMid - 180);
    line (-x1 + 480, yMid, xMid, yMid + 150);
    line (-x2 + 480, yMid, xMid, yMid + 150);
    line (-x1 + 480, yMid, xMid, yMid + 80);
    line (x2, yMid, xMid, yMid + 80);
    fill (255);

    ellipse (width/2, height/2, 30, 30);

    // drawing the circles which comprise the central diamond shape;

    push();

    translate (width/2, height/2);
    rotate (radians (mouseX));

    fill (255, 25);
    ellipse (-240, -240, 600, 600);
    ellipse (-240, height - 240, 600, -600);
    ellipse (width - 240, -240, 600, 600);
    ellipse (width - 240, height - 240, 600, 600);

    pop ();

    // drawing circles on the fringes, to increase dimensionality;

    push ();

    translate (width/2, height/2);
    rotate (radians (mouseY));

    fill (0, 25);
    ellipse (-240, -240, 300, 300);
    ellipse (-240, height - 240, 300, -300);
    ellipse (width - 240, -240, 300, 300);
    ellipse (width - 240, height - 240, 300, 300);

    pop ();

    // drawing smaller fringe circles to increase trippiness;

    push ();

    translate (width/2, height/2);
    rotate (radians (mouseX));

    fill (0, 25);
    ellipse (-240, -240, 150, 150);
    ellipse (-240, height - 240, 150, -150);
    ellipse (width - 240, -240, 150, 150);
    ellipse (width - 240, height - 240, 150, 150);

    pop ();

    // small white circles! Why not!

    push ();

    translate (width/2, height/2);
    rotate (radians (mouseX));

    fill (255);
    ellipse (-240, -240, 80, 80);
    ellipse (-240, height - 240, 80, -80);
    ellipse (width - 240, -240, 80, 80);
    ellipse (width - 240, height - 240, 80, 80);

    pop ();

}

I was interested in the petal-ish curve shapes, since I didn’t quite understand how to translate a lot of the more complicated algebraic maths into code.