Month: September 2016

I wanted to do a silhouette of Disney’s Ariel so I worked from a reference photo to sketch out the original plan.  However, after I was done with the silhouette, I realized she looks more like Aurora.  The overall coding was difficult but after I settled into a rhythm with her profile, it became a little easier.

Original sketch:

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-04

var y = 100;
var x = 150;
var a = 250;
var b = 225;
var c = 280;
var d = 250;
var e = 325;
var f = 320;
var g = 390;
var j = 400;

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

function draw() {
 
 //right hand corner starting at (480,100)
   
   for (var i = 480; i>380; i = i-3){
    y = y-3;
    stroke(255);
    line(480,y,i,0);
 }

 //starts line of forehead 
 line(380,150,480,150); 

//lower right hair swoop
 while (x>100){
 for (var z = 380; z<480; z = z+3){
    stroke(255);
    line(z,150,480,x);
    x = x-3;
   }
 }

 //lefthairswoop
  for (var i = 0; i<280; i = i+3){
    d = d-3;
    stroke(255);
 line(0,d,i,0);
 }

 //forehead
 for (var i = 380; i<480; i = i+3){
 	 line(i,150,i,225);
 }

//nose
while (b<=230){
for (var i = 380; i<440; i = i+3){
	 line(i,225,i,b)
	 b = b+1;
    }
}

 for (var i = 440; i<480; i = i+3){
      line(i,225,i,304);
  }
 
 while (a<280){
 for (var i = 440; i>400; i = i-3){
 	 line(i,a,i,304);
 	 a = a+2;
    }
 }

 //nose to lip
 while (c<290){
 for (var i = 400; i>390; i = i-3){
 	 line(i,c,i,305);
 	 c = c+2;
    }
 }

 //upper lip
 while (e>=320){
 for (var i = 385; i<400; i = i+3){
	 line(i,f,i,e)
	 e = e-1;
   f = f+1;
    }
 }
 
 //filler background
 for(var i = 400; i<480; i = i+3){
  line(i,305,i,330);
 }

//filler background
 //for(var i = 385; i<400; i = i+3){
  //line(i,390,i,344);
// }

 //filler background
 for(var i = 400; i<480; i = i+3){
  line(i,331,i,390);
 }

 //lower right hair swoop
 while (g>344){
 for (var i = 375; i<400; i = i+3){
    stroke(255);
    line(i,390,400,g);
    g = g-3;
   }
 }

//neck
while(j<600){
 for(var i = 355; i<480; i = i+3){
    line(i,390,i,j);
    j = j + 3;
  }
 }

 //eyelashes
 push();
 stroke(0);
 strokeWeight(5);
 line(380,190,390,185);
 line(390,185,395,180);
 pop();

 push();
 stroke(0);
 strokeWeight(5);
 line(378,190,390,175);
 line(390,175,393,170);
 pop();

 }






 

sketch

//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
//Project-04
//first quadrant intial values
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 600;

//third quadrant intial values
var x11 = 0;
var y11 = 640;
var x22 = 0;
var y22 = 0;

//second quadrant intial values
var x111 = 0;
var y111 = 0;
var x222 = 480;
var y222 = 0;

//fourth quadrant intial values
var x1111 = 0;
var y1111 = 640;
var x2222 = 480;
var y2222 = 640;

//step sizes
var deltaX = 24;
var deltaY = 30;

//set initial value for i for if statement
i=0;

function setup() {
    createCanvas(480, 640);
    background('pink');

}

function draw() {
	//20 steps
	if (i < 20){
		//first quadrant
		x1 += deltaX;
		y2 -= deltaY;
		stroke(0);
   		line(x1,y1,x2,y2);
   		//third quadrant
		x11 += deltaX;
		y22 += deltaY;   		
   		line(x11,y11,x22,y22);
   		//second quadrant
		x111 += deltaX;
		y222 += deltaY;   		
   		line(x111,y111,x222,y222);
   		//fourth quadrant
		x1111 += deltaX;
		y2222 -= deltaY;   		
   		line(x1111,y1111,x2222,y2222);   
   		//repeat until i reaches 19
   		i++;

	}
	
}


	

In this project I first tried to create a gradient background with layers of lines like a spider web. Then I modified the code so that the central group of lines are accentuated with greater stroke weights.
At last, I created two groups of lines on the top left and down right corner of the canvas to give the entire composition a sense of enclosure.

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Project-04

var ref1Size; //size of gap for reference 1
var color;
var colorControl = 30;
var weight;
var ref1Control = 3.5;
var ref2Control = 1.5;
var weightControl = 16;
var interval1 = 10;
var interval2 = 15;

function setup() {
    createCanvas(640, 480);
    c1 = color(200, 219, 216);
    c2 = color(99,112,145);
}
// create the function that generates the gradient
function gradient(x,y,wid,hei,c1,c2){
    noFill();
    for (var i = x; i<x+wid; i++){
        var inter = map(i,x,x+wid,0,1);
        var col = lerpColor(c1,c2,inter);
        stroke(col);
        line(i,y,i,y+hei);
    }
}
function draw() {
    noLoop();
    weight = 0.2;
    color = 220;
    ref1Size = width/80;
    //create background gradient
    gradient(0,0,width,height,c1,c2);
    //create background grid patterns and accentuate the shape in the middle
    //use nested loop to generate multiple curves
    for (var i = 1; i<7; i++){
        for (var a = 0; a<18; a++){
            if (i%4 == 4){
                color += colorControl*1.5;
                weight -= 0.01*weightControl;
                ref1Size += 0.5;
            } else if (i%4 == 3){
                color += colorControl*0.5;
                weight -= 0.03*weightControl;
                ref1Size += 2;
            } else if (i%4 == 2){
                color += colorControl*0.3;
                weight = 0.015*weightControl;
                ref1Size += 0.5;
            } else if (i%4 == 1){
                color += colorControl*0.5;
                weight += 0.002*weightControl;
                ref1Size -= 0.5;
            } else {
                color += colorControl;
                weight += 0.008*weightControl;
                ref1Size += 0.5;
            }
            strokeWeight(weight);
            stroke(color,color,color);
            line(0,(i+1)*ref1Size*ref1Control*0.75,width,height-(a+1)*ref1Size*ref2Control);
        }
    }
    //draw partial web on the top left corner
    for (var i = 0; i<40;i++){
        stroke(color+i*5);
        strokeWeight(0.4);
        line(0,height/2-interval1*i,i*interval1,0);
    }
    //draw partial web on the down right corner
    for (var i = 0; i<70;i++){
        stroke(color+i);
        strokeWeight(0.3);
        line(i*interval2,height,width,height-interval2*i*2);
    }
}

mreyes-project-04

//Mercedes Reys

//Section C 

//mreyes@andrew.cmu.edu

//Project-04

//colors
var r = 255;
var g = 0;
var b = 255;

var strokeW = 0 // starting stroke width

var canvasDev = 3 // canvas will be divides into 3rds 

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

function draw() {
	background(177,242,231)
    //var spaceing = 10
    //var growth = 30
    fill(0)
    for (var i = 0; i < 50; i ++) { //add 50 lines
    
     //variables based on canvas width 
     
     var x1 = width/2;
     var x2 = i*(x1/10);
     var y1 = x1-x2;
     var y2 = width-(x2);
     
     //color gradient
     r -= 7;
     g += 10;
     b -= 5; 
     strokeW += .01; // stroke width increases sligtly 
     stroke(r,g,b)
     line(x2,x1,x1,x1-(x2)); // original left lines
     line(x1,x1-(x2),y2,x1); // original right lines
     
     push();

     translate(0,height/canvasDev)//bottom 3rd lines

     line(x2,x1,x1,x1-(x2)); 
     line(x1,x1-(x2),y2,x1); 
     
     translate(width,height);//move the canvas over 
     angleMode(DEGREES);
     rotate(180);//flip canvase
     line(x2,x1,x1,x1-(x2)); 
     line(x1,x1-(x2),y2,x1); 
     pop();
     
     translate(width,height/2);//move the flipped canvas up 
     angleMode(DEGREES);
     rotate(180);
     line(x2,x1,x1,x1-(x2)); 
     line(x1,x1-(x2),y2,x1); 
     pop();
    
    noLoop() // stagnant image so gradient will work

    }

  


    
}

I initially tried to go with a design with more of a star in the center of the page but, found interesting things happening when experimenting with the translate and rotate function. Now it is something more abstract, but also more 3 dimensional.

sketch

/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-04-String-Art
*This program draws art with lines
*/

function setup() {
    createCanvas(640, 480);
    background(225);
}

function draw() {
	var nop = 20; //nop = Number of Points 
	var spaceX = width/nop;
	var spaceY = height/nop;
	background('#2C9F88');

	for (i = 0; i < nop/2; i++) {
 	  //larger,central form
 		stroke('#2C8791'); //dark blue
 		strokeWeight(2);
 		//quadrants III & I
          line(i*spaceX, height/2, width/2, height/2+((i+1)*spaceY)); 
          line(width/2, height/2-((i+1)*spaceY), (width)-(i*spaceX), height/2);
        //quadrants II & IV 
          stroke('#91CDD4'); //light blue
          line(width/2, height/2+((i+1)*spaceY), (width)-(i*spaceX), height/2);
          line(i*spaceX, height/2, width/2, height/2-((i+1)*spaceY));
  }

  for (k = 0; k < 7; k++) {
    //smaller forms
          stroke('#91460C');
    	//quadrant IV
        line(width-(7*spaceX)+(spaceX*k),height,width-spaceX*k,height-(spaceY*k));
        line(width,height-(7*spaceY)+(spaceY*k),width-spaceX*k,height-(spaceY*k));
        //quadrant III
        line(0,height-(7*spaceY)+(spaceY*k),spaceX*k,height-spaceY*k);
        line(spaceX*7-(spaceX*k),height,spaceX*k,height-spaceY*k);
        //quadrant II
        line(spaceX*7-(spaceX*k),0,spaceX*k,spaceY*k);
        line(0,(7*spaceY)-(spaceY*k),spaceX*k,spaceY*k);
        //quadrant I
        line(width-(7*spaceX)+(spaceX*k),0,width-(spaceX*k),spaceY*k);
		line(width,(spaceY*7)-(spaceY*k),width-(spaceX*k),spaceY*k);

  }

}

 

My goal in this assignment was to recreate a fourth grader’s string art from the blog post linked to in the assignment (it’s shown below). I spent roughly half my time on this assignment trying to figure out how to create “curves”. Once I did, however, I was able to finish the assignment very quickly.