Category: Project-04-String-Art

For this project, I played around with curves. I wanted to give a disco/chaotic vibe. When move your mouse around the canvas, the lines move making it seem more busy. I enjoyed this project because there were so many ways I could make my strings move. In the future, I want to add more curves to make it seem like a camera lens opening and closing with the string curve. This assignment helped me better understand how loops work and how I can manipulate curves with mouseX and mouseY.

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-04

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

function draw() {
    //background is random
    red = random(255);
    green = random(255);
    blue = random(255);
    background(red, green, blue, 40);

    //lines that just go up and down
    //as the mouse goes right the lines appear
    for (var i = 0; i <= mouseX; i += 50) {
        stroke(255);
      	strokeWeight(1);
      	line(i, 0, i, height + i);
    }
	  //top left corner and bottom right
    //it curves down
	  for (var a = 0; a < mouseX; a += 20) {
	      stroke(255);
		    strokeWeight(1);
		    line(a, 0, width, a);
	  }
    //top right and left bottom
	  for (var b = 0; b < mouseY; b += 5) {
		    stroke(255);
		    strokeWeight(1);
		    line(width + b, b, width - b, height);
    }
	  //left top and bottom right
	  for (var c = 0; c < mouseX; c += 20) {
		    stroke(255);
		    strokeWeight(1);
		    line(width - c, height, 0, height - c);
    }
	  //left bottom and top right
	  for (var d = 0; d < mouseY; d += 5) {
		    stroke(255);
		    strokeWeight(1);
		    line(0, height - d, d, 0);
    }
}

sketch

It was challenging to figure out how to efficiently create the lines on canvas. I tried to incorporate an interactive aspect towards my project, and it was fun to explore with. I now have a better understanding of how digital line art is created and the thought process behind it.

/* Charmaine Qiu
   charmaiq@andrew.cmu.edu
   Section E
   Project 04 String Art*/
var spacing = 10;
var gcolor = 34;
var bcolor  = 140;
function setup() {
    createCanvas(400, 300);
}

function draw() {
  //set background color and initial stroke color of center piece
    background(0, 13, 255);
    stroke(255, gcolor, bcolor);
  //the center piece that follows the mouse
    for(var i = 0; i < 30; i++){
  //changes color when moving between left and right side of canvas
      if(mouseX > width / 3){
        stroke(150, gcolor, bcolor);
      }
      if(mouseX > 2*width / 3){
        stroke(50, gcolor, bcolor);
      }
  //the center piece drawn with a spacing variable that sets distance between two lines
      line(mouseX, i * spacing, width, height / 2);
      line(0, height / 2, mouseX, i * spacing);
    }
  //line art that surrounds the opposite corners of canvas
    for(var i = 0; i < width; i += 10){
  //yellow lines
      stroke(218, 245, 66);
      line(i, 0, width, i / 2);
      line(0, i, i /2, width);
  //orange lines
      stroke(255, 162, 0);
      line(width, height - i, width - i, 0);
      line(0, i / 2, i, height);
    }


}

sketch

/*Youie Cho
  Section E
  minyounc@andrew.cmu.edu
  Project-04-String Art*/

  var a = 7
  var b = 1

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

  function draw() {
      background(255, 179, 0);
      //pink sequence
      for (var i = 1; i < 1000; i++) {
          stroke(255, 69, 128);
          line(mouseX, i * a* mouseY / 100, i * a, height / 4);
      }
      //black sequence and rotation
      for (var i = 1; i <= 1000; i++) {
          stroke(0);
          rotate(90);
          line(mouseX, i * mouseY / 50, i * b, height / 2);
      }
      //yellow sequence and rotation
      for (var i = 1; i <= 1000; i++) {
          stroke(255, 215, 69);
          rotate(180);
          line(mouseX, i * mouseY / 25, i * a, height / 1.333333);
      }
      //purple sequence and rotation
      for (var i = 1; i <= 1000; i++) {
          stroke(174, 82, 255);
          rotate(270);
          line(mouseX, i * mouseY / 10, i * b, height);
      }
  }

I tried to play around with changing ratios to generate different sequences on different parts of the canvas, and rotated them to create complexity. I tried complex lines because interesting shapes and patterns can be generated through the movement of the mouse. It was challenging to understand the mechanism of loop, but I enjoyed how dynamic it could be.

mgersing-sketch

// Margot Gersing - Project 04 String Art - Section E - mgersing@andrew.cmu.edu

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

function draw(){
	background(0);

	// tight lines less wide
	for (i = 0; i < 200; i += 5) {	
		stroke(i, 208, 247); //blue and purple
		line(100, 450 + i, i, 10 - i); //'curve 1'
		line(100, 450 + i, mouseX * 10, 10 - i); //'curve 1' with interaction
	}
	// tight lines
	for (i = 0; i < 600; i += 5) {	
		stroke(i, 235, 225, i); //green to peach
		line(0, i - 100, i, 400); //'curve 2'
		line(0, i - 100, mouseX, mouseY); //'curve 2' with interaction
	}

	// wider lines
	for (i = 0; i < 600; i += 15) {
		stroke(230, 202, i); //purple to ochre
		line(0, 100 - i, 400, 200 + i); //'curve 3'
		line(0, mouseY / 5, 400, 200 + i); //'curve 3' with interaction

		// curve 4
		stroke(252, 186, i, i); //yellow to magenta
		line(400, 200 - i, i - 400, i); //'curve 4'
		line(400, mouseY - i, i - 400, i); //'curve 4' with interaction	
	}
}

I enjoyed making this project. I decided that I wanted to incorporate my ‘i’ variable into more than just the creation of the lines. I experimented with replacing rgb values with ‘i’ and it created really interesting color shifts. I also decided to make a copy of each of the curves I made and make one of them interactive with mouseX and mouseY.