Category: SectionC

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-04-String Art
*/

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


function draw() {
 
  background( mouseX, mouseY, 100);//backgrond chages color
  var stepx = 10;
  var stepy = 20; 

      for(var i = 0; i < 100; i = i + 1) {
         line(width - (mouseX * i / 50), 0, width, height - (mouseY * i /50)); //top right curves
         line(0, width - (mouseX * i / 50), height - (mouseY * i /50), width); //bottom left curves
      }

      for(var i = 0; i < 100; i = i + 4) {
         line(mouseX, mouseY, i, i / 50);  //top straight lines
         line(i / 50, i, mouseX, mouseY);  //bottom straight lines
      }
}

This project was more of a try and error process. My initial formula was not intriguing as I had wished. Thus I had to constantly make changes until I got this result.

sketch

/*		Austin Garcia
		Section C
		aegarcia@andrew.cmu.edu
		Project - 04
*/

function setup() {
    createCanvas(600, 600);

}

function draw() {
    background(0);

// purple background
    stroke(80, 40, 200);
    for (var x1 = 0; x1 <= height; x1 += 10) {
      for (var y1 = 0; y1 < width; y1 += 4) {
        line(x1, y1, 3 * width, 2 * height)
      }
    }
// white 'god rays'
    stroke(255, 255, 255);
    for (var x2 = 2; x2 <= height; x2 += 100) {
      for (var y2 = 0; y2 < width; y2 += 100) {
        line(x2, y2, 0, 0)
      }
    }
// green wings bot
    stroke(30, 300, 55);
    for (var x3 = 0; x3 < width / 20; x3 += 60) {
      for (var y3 = 0; y3 <= 200; y3 += 4) {
        line(x3, y3, width, height)
      }
    }

    stroke(30, 300, 55);
    for (var x4 = 0; x4 < width / 20; x4 += 60) {
      for (var y4 = 0; y4 <= 200; y4 += 4) {
        line(x4, y4, width / 1.5, height / 1.5)
      }
    }

    stroke(30, 300, 55);
    for (var x5 = 0; x5 < width / 20; x5 += 60) {
      for (var y5 = 0; y5 <= 200; y5 += 4) {
        line(x5, y5, width / 2, height / 2)
      }
    }

    stroke(30, 300, 55);
    for (var x6 = 0; x6 < width / 20; x6 += 60) {
      for (var y6 = 0; y6 <= 200; y6 += 4) {
        line(x6, y6, width / 4, height / 4)
      }
    }

// green wings top
    stroke(30, 300, 55);
    for (var x7 = 0; x7 < width / 20; x7 += 60) {
      for (var y7 = 0; y7 <= 200; y7 += 4) {
        line(y7, x7, width, height)
      }
    }

    stroke(30, 300, 55);
    for (var x8 = 0; x8 < width / 20; x8 += 60) {
      for (var y8 = 0; y8 <= 200; y8 += 4) {
        line(y8, x8, width / 1.5, height / 1.5)
      }
    }

    stroke(30, 300, 55);
    for (var x9 = 0; x9 < width / 20; x9 += 60) {
      for (var y9 = 0; y9 <= 200; y9 += 4) {
        line(y9, x9, width / 2, height / 2)
      }
    }

    stroke(30, 300, 55);
    for (var x10 = 0; x10 < width / 20; x10 += 60) {
      for (var y10 = 0; y10 <= 200; y10 += 4) {
        line(y10, x10, width / 4, height / 4)
      }
    }







}

While experimenting with creating lines, I was fascinated with the way that arcs and curves can be perceived when straight lines intersect. I decided to try and make a butterfly-wing like shape projecting from a corner of the canvas

strings

//Jasmine Lee
//Section C
//jasmine4@andrew.cmu.edu
//Project-04 (String Art)

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

function draw() {
    //black background
    background(100);
   
    //left(white) half of the vertical lines
    for (var a = 0; a < 151; a += 2) {
        stroke(255);
        line(a, mouseY, a, mouseX);
    }

    //right(black) half of the vertical lines
    for (var b = 150; b < 301; b += 2) {
        stroke(0);
        line(b, mouseY, b, mouseX);
    }

    //top(white) half of the horizontal lines
    for (var c = 0; c < 201; c += 2){
        stroke(255);
        line(mouseX, c, mouseY, c);
    }

    //bottom(black) half of the horizontal lines)
    for (var d = 200; d < 401; d += 2){
        stroke(0);
        line(mouseX, d, mouseY, d);
    }

    //creates white "plus" sign 
    fill(255);
    rectMode(CENTER);
    noStroke();
    rect(150, 200, 20, 200);
    rect(150, 200, 200, 20);

    //creates the curves in all four corners
    for (var e = 0; e < 300; e += 2) {
        stroke(0);
        //top left corner
        line(0, height - e * 1.5, e, 0);
        //bottom right corner
        line(e, height, width, height - e * 1.5);
        stroke(255);
        //top right corner
        line(width, height - e * 1.5, width - e, 0);
        //bottom left corner
        line(width - e, height, 0, height - e * 1.5);
    }

}

For my string art, I wanted to create a piece with a dystopian feeling to it. I decided to use a strong composition, with a symbol right in the middle of the canvas, and animated strings that give a disoriented effect to the viewer.

nawon-project-04

// Nawon Choi
// nawonc@andrew.cmu.edu
// Section C
// Project 04 String Art


var a = 0;
var b = 300;
var c = 400;
var amt = 50;

var r = 500;
var x;
var y;
var x1;
var y1;

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

function draw() {
    // got help getting the points along a circle: 
    // (lines 27, 32, 33)
    // https://stackoverflow.com/questions/5300938/calculating-the-position-of-points-in-a-circle
    var slice = 2 * PI / amt;
    for (let i = 0; i < amt; i++) {
        // draw lines from points along the circle,
        // to points along the edge of the canvas
        var angle = slice * i;
        x = r * cos(angle) + a;
        y = r * sin(angle) + c;
        stroke("#37393b");
        line(x, y, i * 20, a);
    }

    // green and yellow lines
    for (let i = 0; i < (amt / 2); i++) {
        stroke("green");
        line(a, a, i * 20, c);
        var angle2 = slice * i * 2;
        x1 = r * cos(angle2) + a;
        y1 = r * sin(angle2) + c;
        stroke("yellow");
        line(x1, y1, i * 25, c);
    }

    // make lines that follow the mouse
    stroke("#a3afb5");
    line(b, a, mouseX, mouseY);
}

For this project, I mainly tried to experiment with different ways lines could be drawn. I initially played around with the way lines splay outward from a circle. I amplified this by playing around with the variables, magnifying the size of the circle and having it go off the canvas, creating the gray lines in the background. I added some green and yellow lines to add some visual interest, then added the lighter gray lines to add an interactive element.