Category: Section B

sketch

// atraylor
// project 04, Section B

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var num = 0.01;

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

}

function draw() {

    for (var i = 0; i < 10; i++) { //Drawing the lines from the edges
        stroke(0, 178, 135);
        lineLeft(i, y1);
        lineRight(i, y1);
    }

    for (var i = 0; i < 180; i++){ // drawing the line spiral
        c = color(25, 255, 200);
        num += 1;
        if (i > 60) {
            c = color(255, 62, 0);
        }
        if (i > 120){
            c = color(25, 255, 200);
        }
        if (i > 180){
            c = color(255, 62, 0);
        }
        stringLine(num, c, i);
    }
    noLoop(); // stoping the for loop so it doesn't keep drawing
}

function stringLine(deg, col, i) {
    push();
    translate(200, 150);
    rotate(radians(deg * 6));
    stroke(col);
    line( i * 0.5, 0, 200, 0); // changing the x position so the radius increases
    pop();
}

function lineLeft(i, y1) { // the two line things on the left side
    y1 = lerp(0, 400, i * .01); // these interpolate between the points, beginning y and end y
    y2 = lerp(300, 0, i * .01);
    line(0, i * 2 + 280, 200, i * y1);
    line(0, i * 2, 200, i * y1);
}

function lineRight(i, y1) { // the only difference is that these start at 400 rather than 0
    y1 = lerp(0, 400, i * .01);
    y2 = lerp(300, 0, i * .01);
    line(400, i * 2 + 280, 200, i * y1);
    line(400, i * 2, 200, i * y1);
}

For this project, I tried to use the lerp() function to define the beginning and end points of my lines. It was a rough task because I knew what lerp was supposed to do, but I wasn’t checking my changes after I made them. I figured it out but it took a lot of guessing and checking.

stringart

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project-04-String-Art

var x2 = 1;
var y1 = 1;
var y2 = 0;
var xInc = 300;
var yInc = 400;

function setup() {
    createCanvas(400, 300);
    background(249,214,86);
}

function draw() {
  for (var x1 = 0; x1 < width; x1 += 5) {
    var y1 = x1 * .50;
    stroke(250,150,0);
    //vertical lines
    line(x1, y1, x1-80, y2);
    //upper right curve
    line(x2*yInc, y1, x1, y2);
    //diagonal center lines
    line(x2-100, yInc-65, x1, y1);
    //center triangular form
    stroke(240,100,0);
    line(yInc+40, x2*xInc, x1, y1);
    //upper right smaller curve
    stroke(240,100,0);
    line(xInc+65, y1+40, x1+20, y2);
    //bottom left curve
    stroke(250,150,0);
    line(x1, xInc, x2, y1);
    //lower left smaller curve
    stroke(240,100,0);
    line(x1-10, xInc-60, x2+35, y1);
  }
}

I found this assignment quite difficult because I did not have a clear vision going into it. This result is primarily from trying different things and seeing what works. However, I did enjoy playing with the color scheme.

sketch

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

function draw() {
    background(95, 138, 128);

    var xpt1; //starting x coordinate
    var ypt1; //starting y coordinate   

//background blue lines
    strokeWeight(1);
    stroke(45,72,94,100);
    
    for (var xpt1 = 0; xpt1 < 30; xpt1 += 1) {
        line(0,10*xpt1,50*xpt1,300); //bottom grid background
        line(399,10*xpt1,20*xpt1,1); //top grid background
    }

//thick transparent blue lines 
    strokeWeight(7);                           
    stroke(82, 88, 135,130);

    for (var xpt1 = 0; xpt1 < 250; xpt1+=25) {      
        var ypt1 = 200;
        line(130, 50, xpt1, ypt1); //starting from top right
        line(130,250,xpt1,ypt1); //starting from bottom right

    }

//thin brown line inside the blue lines
    strokeWeight(1.5);
    stroke(140, 126, 15);
    for (var xpt1 = 0; xpt1 < 250; xpt1+=25) {      
        var ypt1 = 200;
        line(130, 50, xpt1, ypt1); //starting from top right
        line(130,250,xpt1,ypt1);

    }

//think transparent red lines
    strokeWeight(10);
    stroke(140,69,94,130);

    for (var ypt1 = 0; ypt1 < 300; ypt1+=40) {
        var xpt1 = mouseX;
        line(230,200,xpt1,ypt1+10);
    }

//turquoise lines
    strokeWeight(2);
    stroke(111,138,95,150);

    for (var ypt1 = 0; ypt1 < 300; ypt1+=20) {
        var xpt1 = mouseX;
        line(227,200,xpt1,ypt1+10)

    }

//eyebrow + eyes
    strokeWeight(10);
    stroke(0,0,0,150);
    line(40,120,80,130); //eyebrow
    ellipse(50,150,10,10); //outer eye
    stroke(255);
    ellipse(50,150,2,2);//inner eye

}

I was able to further practice the function “for loop” to create the abstract lines in the background. I then used the template to make the body and the moving tail of the fish. I thought the project turned out to be interesting, but not as aesthetically pleasing as I wanted it to be.

Dave String

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project-04
//String Art
var slider; //slider variable
var n; // output variable for sequence
var spix; //x coordinate variable for spiral sequence 
var spiy; //y coordinate variable for spiral sequence
var nn; //simple sequence variable to connect with spiral
var Svalue;  //variable for slider value
function setup() {
    createCanvas(400, 300); // set canvas size to 400,300
    slider = createSlider(0,170,0); // slider that value goes from 0,170 and start value with 0
}
function draw() {
    Svalue = slider.value(); //return slider value to Svalue
    background(0); //set background color to black
    //sequence();
    
    stroke(255,255,255,70);//set color to be white and Alpha value of 100
    strokeWeight(1) // stroke weight to be 1 pix. 
    sequence(); //execute simple sequence function. 
    Bloom(); // execute Bloom function
}



function sequence(){ //simple arithmatic sequence
    for (var i =0; i <=Svalue; i+=5){ // increment of i in 5s if smaller than slider
        n = 2*i+1; //out put equation

        line(0,height/2+n,n*3,height); // sequence and inverse connected on left bottom corner 
        line(width,height/2+n,width-n*3,height); //Same on right bottom corner
        line(0,height/2-n,n*3,0); //same on left top corner
        line(width,height/2-n,width-n*3,0); //same on right top corner. 
    }
}
function Bloom(){
    for (var j = 0; j <=Svalue/100; j+= 0.1){// slider value divided by 100 to fit trigonomatric values. 
        //based on r(t) = exp(t) in polar equation
        spix = exp(j)*cos(j); //x coordinate based on cos with exponaential value
        spiy = exp(j)*sin(j); //y coordeinate based on sine with exponential value
        //top and bottom of flower
        line(width/2+spix*20,height/2+spiy*20,width/2-spix*20,height/2+spiy); //connecting lines to each points generated
        line(width/2-spix*20,height/2-spiy*20,width/2+spix*20,height/2-spiy);
        line(width/2-spix*20,height/2+spiy*20,width/2+spix*20,height/2-spiy);
        line(width/2+spix*20,height/2-spiy*20,width/2-spix*20,height/2+spiy);
        //left and right of flower
        line(width/2+spiy*20,height/2+spix*20,width/2-spiy*20,height/2+spix);
        line(width/2-spiy*20,height/2-spix*20,width/2+spiy*20,height/2-spix);
        line(width/2-spiy*20,height/2+spix*20,width/2+spiy*20,height/2-spix);
        line(width/2+spiy*20,height/2-spix*20,width/2-spiy*20,height/2+spix);
        for (var w = 0; w <=Svalue;w+=60){ //connecting the polar equation with linear sequence
            nn = 2*w+1; //same sequence as above
            line(width/2+spiy*20,height/2+spix*20,width,height/2+nn); // connecting sequence with points on same quadrant
            line(width/2-spiy*20,height/2+spix*20,0,height/2+nn);   //left borrom corner
            line(width/2+spiy*20,height/2-spix*20,0,height/2-nn);   // left top corner
            line(width/2-spiy*20,height/2-spix*20,width,height/2-nn); // right top corner
        }
    }
}

For this project, I wanted to look into other equations rather than simple arithmetic equations. I tried to incorporate the polar equation (spiral,r(t) = exp(t))to generate interesting shape and line movements. I added the slider so user can interact with the shape and see the process of generating.