My string art uses loops to generate wave patterns to create an ocean. In the process, I am trying to control the lines carefully by adjusting the start and end points’ values.
//Jason Jiang
//Section E
//Setting variables
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 10;
//Creating Sky
function setup() {
createCanvas(300, 400);
background(135, 206, 235, 50);
}
function draw() {
//Waves
stroke(0, 100, 184);
var x1 = -30;
var y1 = 300;
var x2 = 600;
var y2 = 500;
strokeWeight(0);
line(-30, 300, -50, 400);
line(600, 300, 400, 500);
strokeWeight(1);
dx1 = (-50-(-30))/numLines;
dy1 = (400-300)/numLines;
dx2 = (600-300)/numLines;
dy2 = -(500-300)/numLines;
for (var i = 0; i <= numLines; i += 1) {
strokeWeight(i*0.1)
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = 0;
y1 = 300;
x2 = 500;
y2 = 500;
strokeWeight(0);
line(0, 300, -50, 400);
line(400, 150, 500, 500);
strokeWeight(1);
dx1 = (-50-0)/+numLines;
dy1 = (400-300)/numLines;
dx2 = (500-400)/numLines;
dy2 = -(500-150)/numLines;
for (var i = 0; i <= numLines; i += 1) {
strokeWeight(i*0.1)
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = -100;
y1 = 300;
x2 = 400;
y2 = 300;
strokeWeight(0);
line(-100, 300, -250, 500);
line(300, 200, 400, 300);
strokeWeight(1)
dx1 = (-150+50)/+numLines;
dy1 = (500-300)/numLines;
dx2 = -(500-400)/numLines;
dy2 = -(300-200)/numLines;
for (var i = 0; i <= numLines; i += 1) {
strokeWeight((numLines-i)*0.1)
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = -100;
y1 = 300;
x2 = 400;
y2 = 320;
strokeWeight(0);
line(-100, 320, -350, 450);
line(200, 350, 150, 320);
strokeWeight(1)
dx1 = (-250-150)/+numLines;
dy1 = (450-250)/numLines;
dx2 = -(350-300)/numLines;
dy2 = -(400-350)/numLines;
for (var i = 0; i <= numLines; i += 1) {
strokeWeight((numLines-i)*0.1)
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
x1 = -150;
y1 = 200;
x2 = 350;
y2 = 350;
strokeWeight(0);
line(-150, 200, -250, 400);
line(300, 300, 350, 350);
strokeWeight(1)
dx1 = (-250+100)/+numLines;
dy1 = (300-100)/numLines;
dx2 = -(500-400)/numLines;
dy2 = -(300-200)/numLines;
for (var i = 0; i <= numLines; i += 1) {
strokeWeight((numLines-i)*0.05)
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Boat
//Lower Part
x1 = 85;
y1 = 260;
x2 = 130;
y2 = 270;
strokeWeight(0);
line(85, 260, 90, 272);
line(130, 270, 120, 280);
strokeWeight(1)
dx1 = 2*(90-85)/numLines;
dy1 = 2*(272-260)/numLines;
dx2 = 2*(120-130)/numLines;
dy2 = 2*(280-270)/numLines;
for (var i = 0; i <= 0.5*numLines; i += 1) {
strokeWeight((numLines-i)*0.15)
stroke(i);
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Upper Part
x1 = 92;
y1 = 259;
x2 = 120;
y2 = 265;
strokeWeight(0);
line(92, 261, 110, 230);
line(120, 267, 110, 230);
strokeWeight(1)
dx1 = (110-92)/numLines;
dy1 = (230-261)/numLines;
dx2 = (110-120)/numLines;
dy2 = (230-267)/numLines;
for (var i = 0; i <= numLines; i += 1) {
strokeWeight((numLines-i)*0.15)
stroke(i+100);
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Sun
x1 = 200;
y1 = 59;
//Outer Ring
for (var i = 0; i <= 10*numLines; i += 1) {
stroke(253, 184, 19, 50)
strokeWeight(1)
push()
translate(x1, y1);
rotate(radians(i*180/numLines));
line(0, 0, 0, 100);
pop()
}
//Inner Ring
for (var i = 0; i <= 10*numLines; i += 1) {
stroke(200, 92, 60)
strokeWeight(1)
push()
translate(x1, y1);
rotate(radians(i*0.5*180/numLines));
line(0, 0, 0, 50);
pop()
}
noLoop();
}