Category: Section A

project4

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Projedt-04


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

function draw () {


	var w60 = width/60; //increment variable

	background(255);

	conMouseX = constrain(mouseX, 0, 310); //constrain mouse to desired point of stopping movement
	tlRatio = map(conMouseX, 0, width, 0, width/30); //remaps mouseX point for for loop


	for (var x = 0; x < 30; x ++){
		
		//pink lines

		stroke(255, 0 , 255);
		strokeWeight(1);
		//left half pink lines
		line(x*w60, height/2, width/2, x*tlRatio)
		//right half pink lines
		line(x*w60+width/2+5, height/2, width/2, x*tlRatio)
		

		//blue lines

		strokeWeight(1)
		stroke(0, 255, 255)

		//right half blue lines
		line((x*w60)+width/2, height/2, width/2, x*tlRatio)
		//left half blue lines
		line(x*w60, height/2, width/2, x*tlRatio+5)
		//most left blue lines
		line(x*width/60, 0, 0, height/2)

		//yellow lines
		stroke(255, 255, 0)

		//left half yellow lines
		line(x*w60+5, height/2, width/2, height-x*tlRatio)
		//most left yellow lines
		line(0, x*w60+height/2, width/2, height)
		
		//lighter pink lines
		stroke(255, 100, 255)

		//left half pink lines
		line(x*w60, height/2, width/2, height-x*tlRatio)
		
}


}

I wanted to experiment with how string art and particularly moving string art would affect color composition when they interact, as they come together and fall apart, mix and divide.

sketch

//Helen Wu
//Section A
//hdw@andrew.cmu.edu
//Project 4


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

function draw() {

//curve one and two
for (var a = 0; a <= 41; a += 3) {
  strokeWeight(1);
  stroke(210);
  line(a, 0, 3*a, height-a);
  line(3*a, height-a, 5*a,300);

  line(width-a, height, width-3*a, a-height);
  line(width-3*a, a-height, -5*a, 0);
}


//three and four
for (var a = 3; a <= 500; a+=5) {
  strokeWeight(1);
  stroke(240,190,190);
  line(30,0,3*a,height-a);
  line(3*a,height-a,0,30);

  line(width-30,height,width-3*a,-a);
  line(width-3*a,-a,height,width-30);
}

//curve five and six
for (var a = 0; a <= 130; a += 3) {
  strokeWeight(1);
  stroke(245);
  fill(170,210,240);
  line (width-3*a, height-a, 5*a, 300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);
}

//curve seven + eight
for (var a = 0; a <= 130; a += 3) {
  strokeWeight(1);
  stroke(245);
  fill(170,210,240);
  line (3*a, a, width-5*a,height-300);
  curve(width-a, width, width-3*a, height-a, width-3*a, height-a, 5*a, 300);
}

//curve nine
for (var b = 3; b <=90; b += 5) {
  strokeWeight(1);
  stroke(160,210,230);
  fill(255,255,255,0);
  curve(0,0,b,b,b*4,b+5,400,400)
}

}

I struggled a bit on this week’s project. It’s hard to predict where the curves and lines will end up, so I went with a more experimental approach with my project. I do like the way the colors interact with each other, and the interesting texture created by the criss cross. However, I wish I could have the lines behave more uniformly.

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-04

function setup() {
    createCanvas(400,300);
}
function draw() {
    background(225);
    strokeWeight(0.3);
    var r = mouseX; //controls r vallue of color based on mouseX
    var g = mouseY; //controls g vallue of color based on mouseY
    for (i = 0; i < 100; i++) {
        var x1 = 0;
        var x2 = i * mouseX/40;
        //x2 incrementally increases based on mouseX
        var y1 = i * mouseY/30;
        //y1 incrementally increases based on mouseY
        var y2 = height;
    stroke(r,g,100);
    line(x1,y1,x2,y2); //lower left 
    line(width-x1,height-y1,width-x2,height-y2);//upper right
    line(width-x1,height-y1,x2,y2); //lower right
    line(x1,0,x2,height);//left "right triangle" geometry
    line(width-x1,height,width-x2,0);//right "right triangle" geometry

    }
}

For this assignment, I drew inspiration from wave. I created  five different geometry using strings and made them intersection at some point to give some characteristic of the wave. Also, I wanted to create an interactive string art. Position of mouse controls distance and color of the strings.

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-04

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

//make rows of lines stemming from the center
//change opacity of lines to give glowing effect
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(143, 204, 51, 85);
      line(150, 200, lineW, 50);
  }
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(114, 163, 41, 90);
      line(150, 200, lineW, 100);
  }
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(86, 122, 31, 95);
      line(150, 200, lineW, 150);
  }
for (var lineW = 50; lineW < 250; lineW += 8) {
    //use map function to make middle row of lines
    //lines move up and down if mouse moves up and down
		var lineY = map(mouseY, 0, 200, 0, 400);
		stroke(59, 92, 10);
     	line(150, 200, lineW, lineY);
  }
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(86, 122, 31);
      line(150, 200, lineW, 250);
  }
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(114, 163, 41);
      line(150, 200, lineW, 300);
  }
for (var lineW = 50; lineW < 250; lineW += 8) {
	stroke(143, 204, 51);
      line(150, 200, lineW, 350);
  }
}

My goal for this project was really just to get comfortable using the for loop function. I really wanted to create a laser-esque feeling effect by using layers of string groups and making one “scan” from the top of the canvas to the bottom.

sketch

// Heidi Chung
// Section A
// hschung@andrew.cmu.edu
// Project-04

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

function draw() {
    background(200, 90, 90);
     for (var i = -5; i < 350; i += 10) {

    var x1 = 0;
    var y1 = i * height/500;
    var x2 = i * height/300;
    var y2 = height;

      push();
      stroke(235, 130, 130); // peach lines that touch bottom of canvas
      strokeWeight(9);
      line(i*2 + 20, 500, 1.5*i, 120);
      pop();

      push();
      stroke(245, 185, 140); //thin short peach lines
      strokeWeight(3);
      line(1.5*i, 120, 1.2*i, 240);
      pop();

      push();
      stroke(111, 178, 173); //short blue lines
      strokeWeight(4);
      line(i*2 + 20, 240, 1.5*i, 120);
      pop();


      stroke(235, 130, 130);//left bottom corner pink underlay grid
      strokeWeight(3);
      line(x1, y1 +100, x2, y2);

      stroke(255); //white overlay grid
      strokeWeight(.5);
      line(x1, y1 +100, x2, y2);

      stroke(235, 130, 130); //top right pink overlay grid
      strokeWeight(.5);
      line(y2-width/2, x1, y1 +400, x2);

      stroke(235, 130, 130);//top left pink grid
      strokeWeight(1);
      line(y2, y2-width, x1, y1);

      stroke(239, 84, 84);//grid top left reddish pink
      strokeWeight(2);
      line(y2 + 100, y2-width, x1 + 100, y1);

      stroke(141, 219, 213); //light blue grid
      strokeWeight(1);
      line(y2 * i, x1, y1, x2);




    }

}

I didn’t have a clear image of what I wanted to make when I started this, except for the color palette surrounding peachy pinks. It took me a long time to conceptually understand how to use the for loop to make the lines appear in a curved grid. But I had some helpful explanations from my friends and that helped ground me a lot. I think I’ll need to keep practicing using for loops a lot.

amui1-p4

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-04

//variables for main triangle
var trgStep = 5;
//variables for eye
var eyeStep = 2;
//variables for mini triangle
var trgStepmin = 3;
//variables for left wing
var winStep = 4;

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

function draw() {
    background(0);

    //maintriangle
    stroke(255);
    strokeWeight(2);
    //leftside
    for (var midX = 150; midX <= 166; midX += trgStep) {
      line(60,230,midX,50);
    }
    //rightside
    for (var midX = 150; midX <= 166; midX += trgStep) {
      line(midX,50,270,230);
    }
    //base
    strokeWeight(1);
    var baseXa = 60;
    var baseYa = 235;
    var baseXb = 270;
    var baseYb = 235;
    for (var i = 0; i < 3; i++) {
      line(baseXa,baseYa,baseXb,baseYb);
      baseXa += 3;
      baseYa -= 3;
      baseXb -= 3;
      baseYb -= 3;
    }

    //eye
    //outereye

    stroke(255,255,0);
    strokeWeight(1);

    //vertical lines

    //part left up
    var eyeXa = 120;
    var eyeYa = 190;
    var eyeXb = 120;
    var eyeYb = 155;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa += 3;
      eyeYa -= 2;
      eyeXb += 5;
    }
    //part right up
    var eyeXa = 200;
    var eyeYa = 190;
    var eyeXb = 200;
    var eyeYb = 155;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa -= 3;
      eyeYa -= 2;
      eyeXb -= 5;
    }
    //part left down
    var eyeXa = 120;
    var eyeYa = 190;
    var eyeXb = 120;
    var eyeYb = 220;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa += 3;
      eyeYa += 2;
      eyeXb += 5;
    }
    //part right down
    var eyeXa = 200;
    var eyeYa = 190;
    var eyeXb = 200;
    var eyeYb = 220;
    for (var i = 0; i < 16; i++){
      line(eyeXa,eyeYa,eyeXb,eyeYb);
      eyeXa -= 3;
      eyeYa += 2;
      eyeXb -= 5;
    }

    //eyeball
    var eyeXa = 155
    var eyeYa = 190
    var eyeXb = 160
    var eyeYb = 185
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }
    var eyeXa = 160
    var eyeYa = 190
    var eyeXb = 155
    var eyeYb = 185
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }
    var eyeXa = 160
    var eyeYa = 190
    var eyeXb = 155
    var eyeYb = 195
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }
    var eyeXa = 155
    var eyeYa = 190
    var eyeXb = 160
    var eyeYb = 195
    stroke(255);
    for (var i = 0; i < 5; i++) {
      line(eyeXa,eyeYa,eyeXb,eyeYb)
      eyeXa += eyeStep
      eyeXb += eyeStep
    }

    //inner box

    //horizontal leg
    stroke(255);
    strokeWeight(1);
    miniXa = 120;
    miniYa = 148;
    miniXb = 200;
    miniYb = 148;
    for (var i = 0; i < 3; i++){
      line(miniXa,miniYa,miniXb,miniYb);
      miniXa -= 1;
      miniYa += 2;
      miniXb += 1;
      miniYb += 2;
    }
    //left vertical leg
    miniXa = 115;
    miniYa = 150;
    miniXb = 115;
    miniYb = 220;
    for (var i = 0; i < 3; i++){
      line(miniXa,miniYa,miniXb,miniYb);
      miniXa -= 2;
      miniYa += 5;
      miniXb -= 2;
      miniYb -= 1;
    }
    //right vertical leg
    miniXa = 205;
    miniYa = 150;
    miniXb = 205;
    miniYb = 220;
    for (var i = 0; i < 3; i++){
      line(miniXa,miniYa,miniXb,miniYb);
      miniXa += 2;
      miniYa += 5;
      miniXb += 2;
      miniYb -= 1;
    }

    //rainbow design
    //left side lines
    for (var leftWinX = -20; leftWinX <= 15; leftWinX += winStep){
      line(leftWinX,165,150,108);
    }
    //horizontal
    horizWinX = 180;
    horizWinY = 80
    for (var i = 0; i < 11; i++){
      line(150,108,horizWinX,horizWinY);
      horizWinX += 3;
      horizWinY += 5;
    }
    //actual rainbow
    //red rainbow lines
    stroke(255,0,0);
    rainXa = 180;
    rainYa = 80;
    rainXb = 400;
    rainYb = 75;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //orange
    stroke(255,140,0);
    rainXa = 183;
    rainYa = 85;
    rainXb = 400;
    rainYb = 90;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //yellow
    stroke(255,255,0);
    rainXa = 186;
    rainYa = 90;
    rainXb = 400;
    rainYb = 106;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //darkgreen
    stroke(0,128,0);
    rainXa = 189;
    rainYa = 95;
    rainXb = 400;
    rainYb = 122;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //lightgreen
    stroke(124,252,0);
    rainXa = 192;
    rainYa = 100;
    rainXb = 400;
    rainYb = 138;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //darkblue
    stroke(0,0,255);
    rainXa = 195;
    rainYa = 105;
    rainXb = 400;
    rainYb = 154;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //lightblue
    stroke(0,191,255);
    rainXa = 198;
    rainYa = 110;
    rainXb = 400;
    rainYb = 170;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //darkpurple
    stroke(128,0,128);
    rainXa = 201;
    rainYa = 115;
    rainXb = 400;
    rainYb = 186;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //lightpurple
    stroke(186,85,211);
    rainXa = 204;
    rainYa = 120;
    rainXb = 400;
    rainYb = 202;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
    //pink
    stroke(255,192,203);
    rainXa = 207;
    rainYa = 125;
    rainXb = 400;
    rainYb = 218;
    for (var i = 0; i <8; i++){
      line(rainXa,rainYa,rainXb,rainYb);
      rainYb += 2;
    }
}

Conceptually, this project was pretty difficult to me.  I was inspired by Pink Floyd’s “Dark Side of the Moon”. It was difficult for me to figure out the points and the way in which the curve would change from loop to loop. I started off by sketching an idea, just like the 7th grade planning sheet. I manually calculated the first few lines in a for loop, and then I figured out a pattern. In the future, I would try to improve the middle section of the triangle to represent an eye better.

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-04
*/

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

function draw() {
    background(240);

    //set mouseX and mouseY as controles of color change
    var mouseR = mouseX;
    var mouseG = mouseY;
    var mouseB = 150;

    //set up for loop and increments
    for (var i = 0; i < 30; i+=1) {

    //set line characteristics
        stroke(mouseR-50, mouseG-50, mouseB); //define stroke RGB in relation to mouseR, mouseG, mouseB
        strokeWeight(1); //define weight to 1
        noFill(); //set fill to colorless

    //draw lines from left to right
        line(0 , i*10, mouseX+i*10, height);
        line(width/3+10*i, i*10, mouseX+i*10, height);
        line(width/3+4*i , height, width, height-(mouseX+15*i));
        line(width/2+10*i, 0, width, mouseX+i*10);
    }
}

I wanted to generate different curves from different sides of the canvas, and have colors randomize by a factor through the movement of the mouse. The result was an abstract line piece.