Category: Section A

sketch
It was fun and exciting to create curves with straight lines and was challenging to figure out the correct values

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

function draw() {
	background(0)

	//establishing initial points and step sizes as variables
	var x1 = 0;
	var y1 = height;
	var x2 = 0;
	var x3 = 0;
	var y3 = 0;
	var x_step1 = width/20;
	var y_step1 = height/40;
	var x_step2 = width/15;
	var x_step3 = width/60;
	var y_step3 = height/60;


	//creates creates the blue - white curves in the center of the canvas
	for (var j = 0; j < 30; j++){
		stroke(color(240-8*j,240-8*j,255));
		line(x2,height/2,width,height/2 - j*y_step3);
		line(0,height/2 + j*y_step3,width-x2,height/2 );
		x2 += x_step2;
	}

	
	//creates green yellow gradient curve on the lower right corner
	for (var i = 0; i < 20; i++){
		stroke(color(50+10*i,150,14))
		line(x1,height,width,y1);
		x1 += x_step1;
		y1 -= y_step1;

	}

	//creates red "line" generated ellipse
	for (var k = 0; k < 30; k++){
		stroke(color(240-8*k,0,0));
		line(0,y3,x3,height/2);
		line(0,height/2-y3,x3,0);
		line(width/2,y3,width/2-x3,height/2);
		line(width/2,height/2-y3,width/2-x3,0);
		x3 += x_step3;
		y3 += y_step3;
	}
}

sketch

/*Lois Kim
Section A
Project-04
*/

var x1 = 10;
var x2 = 200;
var y1 = 30;
var y2 = 400;

function setup() {
  createCanvas(400,300);
  background("#353334");
}

function draw() {
  for (var i = 0; i < 10; i++){
  noFill();
  stroke(299, 299 - i*20, 60);
  bezier (x1, y1, x2, y2, 90 + 500, 10 * i+ 200, 15+ 500, 80 * i + 100);
  } //yellow gradient curve
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#F4F4F4");
  bezier (x1 + 50, y1 + 40, x2 * 3, y2 * 2, 90, 10, 15, 80 * i + 50);
  } //white curves
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#1E4E87");
  bezier (40, 100, 225, 300, 90, 10, 500, 80 * i + 100);
  } //green curves
  
  for (var i = 0; i < 10; i++){
  noFill();
  stroke("#61BF25");
  bezier (x1 *20, y1 + 90, x2 * 4, y2 - 50, 700 * i + 100, 10, 500, 80 * i + 100);
  } //blue curves
  
  
  
}

I wanted color to be the focus of the curves. I also wanted to play around with different compositions. I ended up with this in the end

sketch

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

function draw() {
  var x0 = 100;
  var y0 = 50;
  var x1 = 300;
  var y1 = 250;
  var xX = 100;
  var yX = 50;
  var gap = 5;
  var redness = 220;
	background (0, 0, 0);
  //the first shape which is a square
	for (var i=1; i<41; i++){
    stroke (255, redness, redness);
    line (xX, y0, x1, yX);
    line (width-xX, y1, x0, height-yX);
    stroke (255, 220-redness, 220-redness);
    line (width-xX, y0, x0, yX);
    line (xX, y1, x1, height-yX);
    xX += gap;
    yX += gap;
    redness -= gap;
  }

  //the second shape that is like a cross
  var xC = width/2;
  var yC = 0;
  var greeness = 100;
  for (var j=0; j<31; j++){
    stroke (255, greeness, 0);
    line (width/2, yC, xC, height/2);
    line (width/2, yC, width-xC, height/2);
    line (width/2, height-yC, xC, height/2);
    line (width/2, height-yC, width-xC, height/2);
    xC += gap;
    yC += gap;
    greeness += gap;
  }

  //the third shape that connects the cross
  var yM = 0;
  var xM = width/4*3;
  var blueness = 50;
  for (var x=0; x<11; x++){
    stroke (blueness, blueness, 255);
    line (width/2, yM, xM, height/2);
    line (width/2, yM, width-xM, height/2);
    line (width/2, height-yM, xM, height/2);
    line (width/2, height-yM, width-xM, height/2);
    yM += gap;
    xM += gap;
    blueness += gap*2;
  }

  //the fourth shape that rotates from the center
  var centerX = width/2;
  var centerY = height/2;
  var radius = 200;
  var angle = 0;
  var factor = dist(mouseX, mouseY, centerX, centerY);
  //map the distance to the scale of radians
  var angleC = map(factor, 0, (200^2+150^2)^(1/2), 0, PI);
  for (var y=0;y<36;y++){
    x1 = centerX + radius * Math.cos( angle );
    y1 = centerY + radius * Math.sin( angle );
    x2 = centerX - radius * Math.cos( angle );
    y2 = centerY - radius * Math.sin( angle );
    stroke (204,255,153);
    line (x1, y1, x2, y2);
    //the angle of the rotation is related to the mouse
    angle += angleC;
  }
}

My project was inspired by the idea of centralization. All the curves point to the center or rotate through the center. Also, I look for the string art online and get some inspiration of the form.

heeseoc-stringart

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-04

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

function draw() {

	background(0);

	for (var i = 0; i < 500; i++) {

		stroke(150+mouseX, 255-mouseY, 100); //color change depending on cursor location// 
		strokeWeight(.5); 
	
		line(i*15, height, mouseX, height-i*15); //when mouse is at horizontal center, bottom left//
		line(mouseX, i*15, width-i*15, 0); //top right
		line(i*15+width, height, mouseX, i*15); //bottom right
		line(i*15, 0, mouseX, i*15); //bottom right
}
}

I’ve been experimenting with the curves that connect the adjacent sides of the canvas. While moving them around, I found out that it creates an interesting dimensional quality when the flat sides stick together along the cursor, so I flipped the curves so that the four curves follow the mouse. I gave a slightly different value for one of the curves, because the form as a whole looked boring when it was completely symmetrical.

I don’t know if this is the way to do it, but I set the gradient background by basically using a ‘for’ loop of strings and changing the colors. Als0, when the drawing resets, I noticed a blink, but I have not been able to figure out how to get rid of that.

thlai-project-04

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 04 - String Art

var t;

function setup() {
    t =1;
	createCanvas(640, 480);
    strokeWeight(1/4);
    noFill();
    angleMode(DEGREES);
}


// when triangle rotates all the way, reset
function reset(t){
    if (t/100 > 2.4) {
        setup();
    }
}


function draw() {
    t++;

    // set gradient background
    for (var i=0; i < 1000; i++) {
        stroke(20+i/2, 80+i/4, 90+i/4);
        line(0, 0+i, width, 0+i,);
    }
    
    // make 99 "strings"
    var num = 55;
    for (var i = 0; i < num; i++){
        // gradient stroke color
        stroke(i*5, i*7, i*11);

        var x1 = 0;
        var y1 = i*height/num;
        var x2 = i*width/num;
        var y2 = height;

        // draw strings
        line(x1, y1, x2, y2); // bottom left
        line(x2, 0, x1, height-y1); // top left
        line(width, height-y1, x2, y2); // bottom
        line(x2, 0, width, y1); // top right
    }

    push();

        var x1 = 0;
        var y1 = -138;
        var x2 = -120;
        var y2 = 70;
        var x3 = 120;
        var y3 = 70;

        var fade = 100;
        fade = 255 - t;
        stroke(255, 255, 255, fade); // triangle fades
        translate(width/2, height/2);
        triangle(x1, y1, x2, y2, x3, y3);

    for (var i = 0; i < 50; i++){ // center triangle
        rotate((t/100));
        triangle(x1, y1, x2, y2, x3, y3);
    }
    pop();

    print(t/100);
    reset(t);

}