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.
//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);
}
}
}