Category: Section A

After constructing a loop template for myself, the rest of the process was simple figuring out how each end of the line moves: Left, right, up or down.

When it came to the curves inside the middle box, I had to change the structure a little, but it was still relatively the same.

It was interesting trying to find a balance between the number of loop iterations and the distance the lines move each iteration, it creates different densities.

sketch

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

function draw() {
    background(200);

    //Top Left
    x1 = 0;
    y1 = height/2;
    //These two set up the location of the first coordinate
    //of the line

    x2 = 0;
    y2 = 0;
    //These two set up the second coordinate
    //And by setting the coordinates as variables, I can
    //manipulate them in the loop to move the line

    fill(0);

    for (loop = 0 ; loop < 12 ; loop += 1) {
        //This loop moves a simple variable loop
        //along a series of steps, and then the actual
        //changing line-effecting variables change
        //within the loop

        line(x1, y1, x2, y2);
        //The actual line, composed of variables

        x1 += 0;
        y1 -= height/20;
        //Controls the movement of the first coordinate

        x2 += width/20;
        y2 -= 0;
        //Controls the movement of the second

        //These coordinate movement controls vary depending
        //on the corner the curve is created in, because each
        //coordinate needs to move a different direction
    }
    noLoop();
    //Cuts off the loop

    //This formula is used over and over again
    //for all four outside curves and the two inside curves


    //Top Right
    x1 = width;
    y1 = height/2;
    x2 = width;
    y2 = 0;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 -= height/20;
        x2 -= width/20;
        y2 -= 0;
    }
    noLoop();


    //Bottom Left
    x1 = 0;
    y1 = height/2;
    x2 = 0;
    y2 = height;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/20;
        x2 += width/20;
        y2 -= 0;
    }
    noLoop();


    //Bottom Right
    x1 = width;
    y1 = height/2;
    x2 = width;
    y2 = height;

    for (loop = 0 ; loop < 12 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/20;
        x2 -= width/20;
        y2 -= 0;
    }
    noLoop();
    
    rectMode(CENTER);
    rect(width/2, height/2, height/2, height/2);
    stroke(200);

    //Middle Box top left
    x1 = width/2 - height/4;
    y1 = 3*height/4;
    x2 = width/2 - height/4;
    y2 = height/4;

    for (loop = 0 ; loop < 21 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 -= height/40;
        x2 += height/40;
        y2 -= 0;
    }
    noLoop();


    //Middle Box bottom right
    x1 = width/2 + height/4;
    y1 = height/4;
    x2 = width/2 + height/4;
    y2 = 3*height/4;

    for (loop = 0 ; loop < 21 ; loop += 1) {
        line(x1, y1, x2, y2);
        x1 += 0;
        y1 += height/40;
        x2 -= height/40;
        y2 -= 0;
    }
    noLoop();
    
    noStroke();
    fill(255,235,0);
    ellipse(width/2, height/2, height/7, height/7);
    //I tried to make a creepy-ish eye here
}

sketch

//Michael Miller
//mmiller5
//Section A
function setup() {
    createCanvas(400, 300);
}

function draw() {
    var centerDist =
	min(dist(mouseX, mouseY, width / 2, height / 2), 100);
    var inverseCenterDist =
	min(100 / dist(mouseX, mouseY, width / 2, height / 2), 100);
    /* gradient circle background, use loop to make many progressivley smaller
       circles that are slightly different color */
    for(var count = 0; count < 255; count++) {
	noStroke();
	var countPerc = (1 - count / 255) //percentage of the way through loop
	fill(255 - count);
	ellipse(width / 2, height / 2,
		1.4 * width * countPerc, 1.4 * height * countPerc);
    }
    
    /*Outside curves, as the mouse approaches the center, less iterations occur
      because iteration count is tied to mouse distance from the center*/
    stroke(0);
    strokeWeight(1);
    //top left curve
    curves(0, 0, 0, height / 2, 0, 0,
	   0, -height / 2 / centerDist, width / 2 / centerDist, 0,
	   centerDist, 0);
    //bottom left
    curves(0, 0, 0, height / 2, 0, height,
	   0, height / 2 / centerDist, width / 2 / centerDist, 0,
	   centerDist, 0);
    //top right
    curves(width, height, 0, height / 2, 0, height,
	   0, height / 2 / centerDist, width / 2 / centerDist, 0,
	   centerDist, 180);
    //bottom right
    curves(width, height, 0, height / 2, 0, 0,
	   0, -height / 2 / centerDist, width / 2 / centerDist, 0,
	   centerDist, 180);
    
    //Inside curves, as mouse approaches center, more iterations occur
    stroke(255);
    //bottom right middle curve
    curves(width / 2, height / 2, 0, height / 2, 0, 0,
	   0, -height / 2 / inverseCenterDist, width / 2 / inverseCenterDist, 0,
	   inverseCenterDist, 0);
    //top right middle
    curves(width / 2, -height / 2, 0, height / 2, 0, height,
	   0, height / 2 / inverseCenterDist, width / 2 / inverseCenterDist, 0,
	   inverseCenterDist, 0);
    //bottom left
    curves(width / 2, 3 * height / 2, 0, height / 2, 0, height,
	   0, height / 2 / inverseCenterDist, width / 2 / inverseCenterDist, 0,
	   inverseCenterDist, 180);
    //top left
    curves(width / 2, height / 2, 0, height / 2, 0, 0,
	   0, -height / 2 / inverseCenterDist, width / 2 / inverseCenterDist, 0,
	   inverseCenterDist, 180);
}
/*Generic curve function, x and y are the coordinates of translation, x1 and y1
are coordinates of one line endpoint, x2 and y2 are for the other endpoint, the
x and y steps are how much the coordinates shift after each iteration, limit is
how many iterations will be done, angle is the rotation of the curve*/
function curves(x, y, x1, y1, x2, y2,
		x1Step, y1Step, x2Step, y2Step,
		limit, angle) {
    for (var count = 0; count < limit; count++) {
	push();
	translate(x, y);
	rotate(radians(angle));
	line (x1 + x1Step * count, y1 + y1Step * count,
	      x2 + x2Step * count, y2 + y2Step * count);
	pop();
    }
}
	

I think this turned out pretty well.  Creating a general function for curves made the project much easier and cut down on the coding significantly.  I also wanted to make a gradient in the background, and I was able to use for loops to make that happen which I thought was pretty neat.  I also wanted it to be dynamic, so I had the inner and outer curves have different iteration counts depending on where the mouse was on the screen.

sketch

//scarlet Tong
//sntong@andrew.cmu.edu
//Section A
//Project-04-String-Art


//variables for y compment of guiding lines
var aLineX1 = 200;
var aLineX2 = 400;
var aLineY = 0;
// variable for x component of guiding lines
var bLineX = 100;
var bLineY1 = 0;
var bLineY2 = 350;

//color variables
var R = 255;
var G = 200;
var B =200;

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

}

function draw() {
  //create invisible guiding lines that determines where the points are generated
  //each guiding line creatres 20 points
  for (var i = 0; i <= 1; i+= .05) {
    //guiding line 1
    var x1 = lerp(bLineY1,bLineX,i);
    var y1 = lerp(bLineY1,bLineY2,i);
    //guiding line 2
    var x2 = lerp(aLineX1,aLineX2,i);
    var y2 = lerp(aLineX1,aLineY,i+.01);
    //guiding line 3
    var x3 = lerp(bLineY2,bLineY1,i);
    var y3 = lerp(aLineX2,bLineY2,i);
    //first web has the color pink
    stroke(R,G,B);
    strokeWeight(.85);
    line(x1,y1,x2,y2);
    //second web is colored white
    stroke(B,R,G);
    strokeWeight(.5);
    line(x2,y2,x3,y3);
    }

    //add changing colors with respect for mouse location for fun 
    if (mouseX < width) {
      R = mouseX;
      G = mouseY;
      B = R-G;
    }
}

I explored using the lerp() function to help me generate “guiding” lines that will govern the shape of resulting “web”. Using for loop, I was able to generate 2 webs with 3 guiding lines for this composition. The color of the lines relate to the location of the mouse on the canvas (so the drawing appears and disappears as you interact with it with the mouse), and I struggled working out the location of the guiding lines and using variables to sort out the sequences of points when working on this project