Project 04 – String Art

I chose to create a responsive string art project, since I still haven’t had my fill of mouseX and mouseY data use. I also used a mousePressed function to spice things up as well, ultimately changing the location of the pivot points of the string as well as the color.

sketchDownload
//PROJECT 04 STRING ART
//Julia Steinweh-Adler
//jsteinwe


var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 1;
var mode = 0;

function setup() {
    createCanvas(400, 400);
    background(0);
    
  
    //line initial variables
    dx1 = (width/1) / numLines;
    dy1 = (width/2) / numLines;
    dx2 = (width/3) / numLines;
    dy2 = (width/4) / numLines;
}

function draw() {
    
    var x1 = mouseX;
    var y1 = mouseY;
    var ptOne = 400; // yarn pivot point, y value
    var ptTwo = 180; // yarn pivot point, x value
    
    stroke(0);
    strokeWeight(2);
   
     // Red and Blue Yarn
       if(mode == 0) {
          for (var i = 0; i < numLines; i += 1) {
       
             stroke(mouseX, 0, mouseY); // red blue color
             line(x1, y1, ptOne, ptTwo); //line 1
        
             stroke(mouseY, 0, mouseX); // red blue color
             line(y1, x1, ptTwo, ptOne); //line 2, inverted from line 1
        
             line(x1, y1, y1, x1); // line 3: connecting 1 and 2
          
            
            // incremental addition to coordinates
             x1 += dx1;
             y1 += dy1;
             ptOne += dx2;
             ptTwo += dy2;  
            
          }  
     
       
       } else {
          // Blue and Green Yarn
         
         
         // changing yarn pivot point
         let ptOne = 0 // yarn pivot point, x value
         let  ptTwo = 200 // yarn pivot point, y value
         
          for (i = 0; i < numLines; i += 1) {
         
          //change yarn color
             stroke(0, mouseX, mouseY); // green blue color
             line(y1, x1, ptTwo, ptOne); //line 1
  
      
             stroke(mouseY, 0, mouseX); //green blue color
             line(x1, y1, ptOne, ptTwo); //line 2, inverted line 1
        
             line(y1, x1, x1, y1) //line 3; connector line
       
            
              // incremental addition to coordinates 
             x1 += dx1;
             y1 += dy1;
             ptOne += dx2;
             ptTwo += dy2;  
             }  
       }
  }
  function mousePressed() {
    if (mode == 0) {
      mode = 1;
    } else {
      mode = 0;
    }
  }

The color, repetitive nature, string-like-ness, and “stretchy” behavior of this interaction remind me of the rainbow loom. Therefore, I have titled this piece “Rainbow Loom”.

Colorful Rainbow Loom Bracelet Rubber Bands Stock Photo, Picture And  Royalty Free Image. Image 32648073.

Leave a Reply