![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/09/stop-banner.png)
For my project, I was inspired by some string art I had seen a while ago at the beach. I remember seeing how lines would give the sails of a sailboat depth, and almost make it look slightly 3-D. I thought that making the sails were challenging because the sails are all different shapes and face different directions, and it took me a while to figure out how to perfectly layer the lines.
If you move the mouse around the screen, the lighthouse light will follow it around the page. Though this assignment focuses mostly on lines, I also incorporated other shapes and features in order to give the overall project that “finished” look.
sketch
//Annie Kim
//anniekim
//SectionB
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;
var boatLines = 40;
var mx1;
var my1;
var mx2;
var my2;
var bx1;
var by1;
var bx2;
var by2;
var angle = 0;
function setup() {
createCanvas(400, 300);
background(100, 200, 255);;
stroke(255);
//left side sail lines
line(60, 185, 150, 190); //left side sail horizontal
line(150, 190, 210, 70); //left side sail vertical
dx1 = (150 - 60)/numLines;
dy1 = (190 - 185)/numLines;
dx2 = (210 - 150)/numLines;
dy2 = (70 - 190)/numLines;
//middle sail lines
line(230, 40, 155, 191); // vertical
line(155, 191, 245, 195); //horizontal
mx1 = (155-230)/numLines;
my1 = (191-40)/numLines;
mx2 = (245-155)/numLines;
my2 = (195-191)/numLines;
//right sail lines
stroke(255);
line(270, 70, 250, 195);
line(250, 195, 310, 196);
bx1 = (250-270)/numLines;
by1 = (195-70)/numLines;
bx2 = (310-250)/numLines;
by2 = (196-195)/numLines;
//water lines
stroke(74, 152, 168);
line(0, 150, 400, 150);
line(0, 300, 400, 150);
line(0, 150, 0, 300);
line(400, 150, 400, 300);
}
function draw() {
//skyline & waterline
stroke(179, 213, 244);
strokeWeight(1.2);
fill(179, 213, 244); //light blue sky
rect(0, 0, 400, 150); //top rect sky
//sun rising
push();
translate(100, 150);
rotate(radians(angle));
fill(242, 244, 190);
noStroke();
circle(50, 150, 120);
pop();
angle = angle + 1;
//waters/waterline
fill(74, 152, 168); //teal waters
rect(0, 150, 400, 150); //bottom rect - waterline
stroke(44, 122, 138); //waves webbing
for (var i = 0; i <= 50; i ++) {
line(0, 300, 0 + 8*i, 151);
}
for (var i = 0; i <= 50; i ++) {
line(400, 300, 400 - 8*i, 151);
}
for (var i = 0; i <= 30; i ++) {
line(0, 150, 0 + 13.333*i, 300);
}
for (var i = 0; i <= 30; i ++) {
line(400, 150, 400 - 13.3333*i, 300);
}
//lighthouse building
stroke(200);
fill(200); //light grey color
quad(370, 150, 375, 70, 385, 70, 390, 150); //base of lighthouse
rect(374, 50, 12, 10); // the part of the lighthouse where the light will come from
stroke(52, 54, 76); //dark navy color
fill(52, 54, 76);
quad(375, 70, 372, 60, 388, 60, 385, 70); //walk base of lighthouse
triangle(372, 50, 380, 40, 388, 50); //top of lighthouse
//hill
fill(127, 105, 91); //brown color for sand under lighthouse
stroke(127, 105, 91);
strokeWeight(1);
point(328, 151); //making lighthouse hill points
point(331, 146);
point(334, 143);
point(336, 142);
point(339, 140);
point(345, 138);
point(350, 136);
point(355, 136);
point(360, 136);
point(365, 135);
point(370, 134);
point(375, 134);
point(380, 133);
point(385, 133);
point(390, 132);
point(400, 130);
point(400, 151);
beginShape();
curveVertex(328, 151); //connecting hill points
curveVertex(328, 151);
curveVertex(331, 146);
curveVertex(334, 143);
curveVertex(336, 142);
curveVertex(339, 140);
curveVertex(345, 138);
curveVertex(350, 136);
curveVertex(355, 135);
curveVertex(360, 136);
curveVertex(365, 135);
curveVertex(370, 134);
curveVertex(375, 134);
curveVertex(380, 133);
curveVertex(385, 133);
curveVertex(390, 132);
curveVertex(400, 130);
curveVertex(400, 151);
curveVertex(400, 151);
endShape();
//lights of lighthouse
fill(248, 226, 94);
stroke(248, 226, 94);
quad(374, 51, 374, 59, mouseX, mouseY + 12, mouseX, mouseY - 8);
//birds
stroke(40);
strokeWeight(2);
point(88, 63);
point(96, 65);
point(100, 70);
point(104, 65);
point(112, 63);
point(138, 33);
point(146, 35);
point(150, 40);
point(154, 35);
point(162, 33);
strokeWeight(1);
line(88, 63, 96, 65);
line(96, 65, 100, 70);
line(100, 70, 104, 65);
line(104, 65, 112, 63);
line(138, 33, 146, 35);
line(146, 35, 150, 40);
line(150, 40, 154, 35);
line(154, 35, 162, 33);
stroke(255);
strokeWeight(1.2);
//left side sail
var x1 = 60;
var y1 = 185;
var x2 = 150;
var y2 = 190;
for (var i = 0; i <= numLines; i += 1) { //connecting webs of left sail
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//noLoop();
for (var i = 0; i <= 15; i++) { //adding vertical lines for left sail
line(60 + 6*i, 185 + 0.33333*i, 210 - 4*i, 70 + 8*i);
}
//middle sail
var m1 = 230;
var m2 = 40;
var m3 = 155;
var m4 = 191;
for (var i = 0; i <= numLines; i += 1) { //connecting webs of middle sail
line(m1, m2, m3, m4);
m1 += mx1;
m2 += my1;
m3 += mx2;
m4 += my2;
}
//noLoop();
for (var i = 0; i <= 20; i ++) { //adding vertical lines for middle sail
line(155 + 4.5*i, 191 + 0.2*i, 155 + 3.75*i, 191 - 7.505*i);
}
//right sail
var b1 = 270;
var b2 = 70;
var b3 = 250;
var b4 = 195;
for (var i = 0; i <= numLines; i += 1) { //connecting webs of right sail
line(b1, b2, b3, b4);
b1 += bx1;
b2 += by1;
b3 += bx2;
b4 += by2;
}
//noLoop();
for (var i = 0; i <= 10; i ++) { //adding vertical lines for right sail
line(250 + 6*i, 197 - 0.2*i, 250 + 2*i, 195 - 12.5*i);
}
//boat waves lines
stroke(14, 92, 108);
line(260, 243, 375, 220);
line(260, 245, 370, 240);
line(260, 250, 400, 250);
line(260, 255, 390, 260);
line(270, 260, 375, 280);
//the bottom of the sailboat
stroke(230, 150, 50);
strokeWeight(1);
//bottom of sail boat
//first horizontal line
line(60, 190, 310, 200);
//second horizontal
line(100, 260, 270, 260);
//left side of lower boat
line(60, 190, 100, 260);
//right side of lower boat
line(310, 200, 270, 260);
fill(250, 180, 100);
quad(60, 190, 310, 200, 270, 260, 100, 260);
for (var i = 0; i <= 30; i ++) {
line(60, 190, 100 + 5.66666*i, 260); //hatching from left top corner to bottom line
}
for (var i = 0; i <= 30; i++) {
line(310, 200, 270 - 5.66666*i, 260); //hatching from top right corner to bottom line
}
stroke(210, 140, 30);
for (var i = 0; i <= 15; i++) { //hatching from top left corner to right side
line(60, 190, 270 + 2.6666*i, 260 - 4*i);
}
for (var i = 0; i <= 15; i++) { //hatching from top right corner to left side
line(310, 200, 100 - 2.666*i, 260 - 4.6666*i);
}
}