Category: Section B

sketch

//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project 4

function setup() {
    createCanvas(400, 300);

}


function draw() {
    
    background(0);

    //First upper eyelip
    stroke(87, 250, 255)
    for (var i = 0; i < 100; i +=1)
        line(width/20 + i*10, 0, 0, height + i*(-10))
    //Second upper eyelip
    stroke(153, 50, 204)
    for (var i = 0; i < 100; i +=1)
        line(width/5 + i*10, 0, 0, height + i*(-10))
    //First lower eyelip
    stroke(0, 0, 205)
    for (var i = 0; i < 100; i +=1)
        line(width/20 + i*10, height, width, height + i*(-10))
    //Second lower eyelip    
    stroke(255, 128, 128)
    for (var i = 0; i < 100; i +=1)
        line(width/5 + i*10, height, width, height + i*(-10))

    //Pupil
    fill(75, 0, 130)
    ellipse(200, 150, 150, 150)
    
    fill(0, 0, 128)
    ellipse(200, 150, 100, 100)




}

In this project, I explore the coding method that I learned to draw complex shape. This “eye” was consisted of for eyelips that are drew with straight lines. But the way they overlapped create a delusion that there is a curve at the very end of them. And I use the bold colors to add aesthetic value to it.

jacky’s sketch 1

function setup() {
    createCanvas(400, 300);
}

function draw() {
    background(0)
    for (var i = 0; i < 21; i++) {
        stroke(255, 0, 0);
        line(width/5+i*10, 0, 0, height/2+i*(-5)); //line set 1

        stroke(255)
        line(0, height/2+i*10, width/3+i*(-5), 0); //line set 2

        stroke(0, 255, 0);
        line(0, height/3+i*10, width/2+i*(10), height);  //line set 3

        stroke(0, 0, 255);
        line(width, height/7+i*10, width*3/4+i*(-10), height); //line set 4

        stroke(150, 80, 0);
        line(width, height/7+i*10, width/4+i*(10), 0); //line set 5

    

        // stroke(100, 0, 100);
        // line(width/5+i*10, 0, 0, height/2+i*(-5));
        
    }
}

In this project, I created five sets of lines rotating along the sides to create five curves. The background is black so that it makes the colors more obvious.

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-04



function setup() {
    createCanvas(480, 300);
    strokeWeight(0.3);
}

function draw() {
    background(0);
    
    //blue back lines (no curve)
    for (var i = 0; i < 400; i += 6) {
    	stroke(155,236,255);
      	line(i, 0, 1.5*i, i); //top right corner start
      	//line(x1,y1,x2,y2);
      	line(2*i, 300, width, i); //bottom left corner start 
    }

    //secondary layer for color in light blue

    for (var i = 0; i < width; i += 3) {
      	stroke(179,223,222);
      	strokeWeight(0.3);
      	line(i*2, 0, width, i); //top right curve with lines
      	line(i*2, 0, height * 2, i); //next curve next to curved line 1
      	line(i*2, 0, height * 1, i); //next curve next to curved line 2
      	line(i*2, 0, height * 0.75, i + 20); //next curve next to curved line 3
      	line(i*2, 0, height * 0.6, i + 20); //next curve next to curved line 3
      	line(i*2, 0, height * 0.5, i + 100); //next curve next to curved line 3
    }

    //third layer for color

    for (var i = 0; i < width; i += 3) {
      	stroke(220,183,225);
      	strokeWeight(0.3);
      	line((i*2)+100, height, 300, i); //top right curve with lines
      	
      	line((i*2)-100, height, height * 1, i); //next curve next to curved line 2
      	
      	line((i*2)-100, 0, height * 0.6, i + 20); //next curve next to curved line 3
      	line(i*2, 0, height * 0.5, i + 100); //next curve next to curved line 3
    }

    

}

For this project, I wanted to try understanding how to take a line and manipulative it into a twisting curve. To invert the curve and create the twist like form, I used the height variable in the x2 coordinate section and multiplied it by a decimal to decrease the dynamic scale of the curve. I hope to be able to use this technique for something more symmetrical next time.

tanviharkare_sketch

/*Tanvi Harkare
Section B
tharkare@andrew.cmu.edu
Project-04-String Art */

var R; //variables for random color for line
var G;
var B; 

var x1 = 0; //starting points for location of lines
var x2 = 0;
var y1 = 0; 
var y2 = 100;

var x3 = 25; //starting position for second set of lines
var x4 = 25;
var y3 = 25;
var y4 = 150;

var x5 = 50; //starting position for third set of lines
var x6 = 50;
var y5 = 50;
var y6 = 200;

var x7 = 75; //starting position for fourth set of lines
var x8 = 75;
var y7 = 75;
var y8 = 250;

var x1stepSize = 15; //increment values for each point
var x2stepSize = 5;
var y1stepSize = 0;
var y2stepSize = 10;

var x3stepSize = 20; //increment values for second set of lines
var x4stepSize = 10;
var y3stepSize = 0;
var y4stepSize = 10;

var x5stepSize = 25; //increment value for third set of lines
var x6stepSize = 15;
var y5stepSize = 0;
var y6stepSize = 10;

var x7stepSize = 20; //increment value for fourth set of lines
var x8stepSize = 10;
var y7stepSize = 0;
var y8stepSize = 10;

function setup() {  
    createCanvas(400, 300);
    background(0);
}

function draw() {
    //curve starting from 0, 0
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x1, y1, x2, y2);
        x1 += x1stepSize;
        x2 += x2stepSize;
        y2 -= y2stepSize;
        y2stepSize -= curveChange;       
    }

    //curve starting from 25, 25
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x3, y3, x4, y4);
        x3 += x3stepSize;
        x4 += x4stepSize;
        y4 -= y4stepSize;
        y4stepSize -= curveChange;       
    }

    //curve starting from 50, 50
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x5, y5, x6, y6);
        x5 += x5stepSize;
        x6 += x6stepSize;
        y6 -= y6stepSize;
        y6stepSize -= curveChange;       
    }

    //curve starting from 75, 75
    for(var i = 0; i < 50; i++){
        curveChange = random(.35, 1);
        changeColor(); 
        stroke(R, G, B);
        line(x7, y7, x8, y8);
        x7 += x7stepSize;
        x8 += x8stepSize;
        y8 -= y8stepSize;
        y8stepSize -= curveChange;       
    } 
}

function changeColor(){
    /* assigns different color values for every
    line that is drawn in the draw() function */ 
    R = random(0, 255);
    G = random(0, 255);
    B = random(0, 255);
}

I had a lot of fun with this project, especially in creating different ways to show the curves made through the string art. In my sketch, the color of each line is different and changes each time you run the code; I did this by creating my own function. Additionally, the curvature of the string art changes slightly to create a different effect ever time.