Category: Project-04-String-Art

I was inspired by the interesting curves and shapes that are depicted in paintings of waves. I began by drawing a single wave and then trying different lengths and positions to create the desired effect. I also added movement in the bottom-most waves that makes it seem like it is moving from left to right. I really enjoy using the “for loops” in our design, it makes coding much faster and simpler than writing out every parameter for each line.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-04-String-Art

var Y_AXIS = 1;
var c1, c2;

function setup() {
    createCanvas(300, 400);
    background(220);
    c1 = color(255, 183, 60);
    c2 = color(45, 100, 245);
}

function draw() {
    background(220);

    setGradient(0, 0, 300, 400, c1, c2, Y_AXIS);

    for(var i=0; i <200; i++) {
        littlewaves(i);
}
    for(var p=0; p <200; p++) {
        rightwave(p);
}
    //Sun
    noStroke();
    fill(255, 250, 217);
    ellipse(153, 204, 50, 50);

}

function littlewaves(x) {
    //little waves on bottom
    for(var z=0; z<10; z++) {
    push();
    translate(x+(z*20)+(mouseX/2),30); //moves waves 
    rotate(radians(x*2));
    stroke(53, 74, 107);
    line(150,200,10 + x, 400);
    pop(); 
}
}

function rightwave(y) {
    //middle curve
    push();
    translate(y+210, 60);
    rotate(radians(y));
    stroke(97, 132, 158);
    line(150,200,10 + y, 200);
    pop();

    //large wave, dark colored
    push();
    translate(y+122, 170);
    rotate(radians(y*2));
    stroke(82, 115, 149);
    line(150,230,10 + y, 20);
    pop();

    //large wave, light colored
    push();
    translate(y+50, 150);
    rotate(radians(y));
    stroke(70, 170, 200);
    line(150,230,10 + y, 20);
    pop();
}

function setGradient(x, y, w, h, c1, c2, axis) {

    //Sets Gradient in Background
    noFill();
    if (axis == Y_AXIS) {
    for (var i = y; i < y+h; i++) {
    var inter = map(i, y, y+h, 0, 1);
    var c = lerpColor(c1, c2, inter);
        stroke(c);
        line(x, i, x+w, i);
    }
  }
}

sketch

function setup() {
  createCanvas(400, 300);
  background(0);
  angleMode(DEGREES);
  for(var x = 100; x < 300; x += 10) { //vary x
    stroke(256);
    line(width, x, x, 0); //draw a line, curve it using varied x
  }
  push(); //reflect the curve
  scale(-1, 1);
  translate(-400, 0);
  for(var y = 100; y < 300; y += 10) {
    stroke(256);
    line(width, y, y, 0); 
  }
  pop();
  push(); //reflect both curves
  scale(1, -1);
  translate(0, -300);
  for(var n = 100; n < 300; n += 10) {
    stroke(256);
    line(width, n, n, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z = 100; z < 300; z += 10) {
    stroke(256);
    line(width, z, z, 0); 
  }
  pop();
  pop();
  push(); //disapear into the distance
  scale(.5, .5);
  translate(200, 150);
  for(var x1 = 100; x1 < 300; x1 += 10) {
    stroke(256);
    line(width, x1, x1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y1 = 100; y1 < 300; y1 += 10) {
    stroke(256);
    line(width, y1, y1, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n1 = 100; n1 < 300; n1 += 10) {
    stroke(256);
    line(width, n1, n1, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z1 = 100; z1 < 300; z1 += 10) {
    stroke(256);
    line(width, z1, z1, 0); 
  }
  pop();
  pop();
  pop();
  push(); //go even further back
  scale(.25, .25);
  translate(600, 450);
  for(var x2 = 100; x2 < 300; x2 += 10) {
    stroke(256);
    line(width, x2, x2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y2 = 100; y2 < 300; y2 += 10) {
    stroke(256);
    line(width, y2, y2, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n2 = 100; n2 < 300; n2 += 10) {
    stroke(256);
    line(width, n2, n2, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z2 = 100; z2 < 300; z2 += 10) {
    stroke(256);
    line(width, z2, z2, 0); 
  }
  pop();
  pop();
  push();
  scale(.5, .5);
  translate(200, 150);
  for(var x3 = 100; x3 < 300; x3 += 10) {
    stroke(256);
    line(width, x3, x3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var y3 = 100; y3 < 300; y3 += 10) {
    stroke(256);
    line(width, y3, y3, 0); 
  }
  pop();
  push();
  scale(1, -1);
  translate(0, -300);
  for(var n3 = 100; n3 < 300; n3 += 10) {
    stroke(256);
    line(width, n3, n3, 0); 
  }
  push();
  scale(-1, 1);
  translate(-400, 0);
  for(var z3 = 100; z3 < 300; z3 += 10) {
    stroke(256);
    line(width, z3, z3, 0); 
  }
  pop();
  pop();
  pop();
  pop();
}

This project started with a lot of frustration with only being able to create arrays of line. And then once I was able to create a curve creating another curve, and controlling it was close to impossible within the same for loop. To solve this problem I copied the same curve and used translations to draw more.