// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing
//var x1; // wave left coordinate;
//var x2 = 30; // wave right coordinate
var angleL = -160;
var angleR = -20;
var span = 40;
var wx; // waveX;
var wy; // waveY;
var r = 245;
var g = 245;
var b = 230;
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
background(24, 42, 81);
}
// a wallpaper of small fishes swimming down the ocean
function draw() {
for(var wy = 0; wy < 30; wy ++) { // wave y coordinate increment
for (var wx = 0; wx <= 10; wx++) { // wave x coordinate increment
if (wy % 2 == 0) {
noFill();
strokeWeight(1.8);
stroke(r, g, b);
arc(15 + wx * span, 25 + wy * 30, 40, 40, angleL, angleR); // first wave
strokeWeight(1.5);
stroke(r, g, b - 30);
arc(18 + wx * span, 30 + wy * 30, 40, 30, angleL + 15, angleR - 10);
strokeWeight(1);
stroke(r, g, b - 60);
arc(4 + wx * span, 35 + wy * 30, 40, 30, angleL + 5, angleR - 20);
strokeWeight(0.8);
stroke(r, g, b - 90);
arc(20 + wx * span, 42 + wy * 30, 40, 30, angleL - 5, angleR - 0);
}
if (wy % 2 == 1) {
noFill();
strokeWeight(1.8);
arc(30 + wx * span, 25 + wy * 30, 40, 40, angleL, angleR); // first wave
strokeWeight(1.5);
arc(33 + wx * span, 30 + wy * 30, 40, 30, angleL + 15, angleR - 10);
strokeWeight(1);
arc(19 + wx * span, 35 + wy * 30, 40, 30, angleL + 5, angleR - 20);
strokeWeight(0.8);
arc(35 + wx * span, 40 + wy * 30, 40, 30, angleL - 5, angleR);
}
}
}
noLoop();
}
For this project, I started out searching through the wallpaper links provided by the instructions, and i became intrigued by one of the Japanese wave-like prints (which is often used for clothing and paper prints). Inspired by that, I sketched some images down, hoping to create a similar pattern with a bit more dimensionality. For the end result, the most challenging parts were the wave movements created by crossing arc functions, as well as the gradient color choices which took me a while to figure out.