Ship

This assignment, we were tasked to re-code our old assignment to make them simpler and shorter. The old assignment, the codes are as the following; or you can view them here

//variables

var mouseCoord;

var change = 245;

//clouds var cloud1 = { x: 0, y: 40, diameter: 50 // clouds }; var cloud2 = { x: 10, y: 50, diameter: 60 //clouds }; var cloud3 = { x: 33, y: 30, diameter: 80 //clouds }; var cloud4 = { x: 70, y: 40, diameter: 80 //clouds }; var cloud5 = { x: 0, y: 40, diameter: 50 // clouds }; var cloud6 = { x: 10, y: 50, diameter: 60 //clouds }; var cloud7 = { x: 33, y: 30, diameter: 80 //clouds }; var cloud8 = { x: 70, y: 40, diameter: 80 //clouds };

//sea var seaA =0 var seaB = 310 var seaC= 600 var seaD= 370

var angle = 0.5; var offset = 300; var scalar = 20; var speed = 0.05;

//sun var sunA = 590 var sunB = 10 var sunC = 200

//titanic body var titanicbody = { x: 300, y: 190, body3: 220, body4: 80 }; //titatnic top var titanictop = { x1: 300, y1: 190, top1: 220, top2: 20 }; //steam engine var steam = { x1: 320, y1: 120, top1: 20, top2: 80 };

//steam engine var steam2 = { x1: 380, y1: 120, top1: 20, top2: 80 };

//steam engine var steam3 = { x1: 440, y1: 120, top1: 20, top2: 80 };

//background colours var r= 0; var g = 160; var b = 221;

var v = 0;

//follow mouse var f = 300 var easing = 0.04;

function setup () { createCanvas (600,400); noStroke() } function mouseClicked() { if (change == 0) { change = 255; } else { change = 0; } }

function draw () { mouseCoord=map(mouseX,0,width,-5,5); //background background(250, 250, 0); fill(r, g, b); rect(0, 0, 600, 400);

// Increment variable r r++; //sun fill (255,153,0); ellipse (sunA,sunB,sunC); //ellipse clouds fill(245,245,245); ellipse(cloud1.x,cloud1.y,cloud1.diameter,cloud1.diameter); cloud1.x = cloud1.x + 0.4; fill(245,245,245); ellipse(cloud2.x,cloud2.y,cloud2.diameter,cloud2.diameter); cloud2.x = cloud2.x + 0.4; fill(245,245,245); ellipse(cloud3.x,cloud3.y,cloud3.diameter,cloud3.diameter); cloud3.x = cloud3.x + 0.4; fill(245,245,245); ellipse(cloud4.x,cloud4.y,cloud4.diameter,cloud4.diameter); cloud4.x = cloud4.x + 0.4; fill(245,245,245); ellipse(cloud5.x,cloud5.y,cloud5.diameter,cloud5.diameter); cloud5.x = cloud5.x + 0.2; fill(245,245,245); ellipse(cloud6.x,cloud6.y,cloud6.diameter,cloud6.diameter); cloud6.x = cloud6.x + 0.2; fill(245,245,245); ellipse(cloud7.x,cloud7.y,cloud7.diameter,cloud7.diameter); cloud7.x = cloud7.x + 0.2; fill(245,245,245); ellipse(cloud8.x,cloud8.y,cloud8.diameter,cloud8.diameter); cloud8.x = cloud8.x + 0.2; //rect titanic body fill( 41,41,61); rect(titanicbody.x,titanicbody.y, titanicbody.body3,titanicbody.body4); //rect titanic top fill(change) rect(titanictop.x1,titanictop.y1, titanictop.top1,titanictop.top2); //rect steam fill(change) rect(steam.x1,steam.y1, steam.top1,steam.top2); //rect steam2 fill(change) rect(steam2.x1,steam2.y1, steam2.top1,steam2.top2); //rect steam3 fill(change) rect(steam3.x1,steam3.y1, steam3.top1,steam3.top2); //mouseX follow print("mouseX= "+mouseX); if(mouseX!=0) { titanicbody.x+=mouseCoord; titanictop.x1+=mouseCoord; steam.x1+=mouseCoord; steam2.x1+=mouseCoord; steam3.x1+=mouseCoord; } //sea fill (0,92,230) rect(seaA,seaB,seaC,seaD) var y1 = 290 + sin(angle) * scalar; var y2 = offset + sin(angle + 0.4) * scalar; var y3 = offset + sin(angle + 0.8) * scalar; ellipse( 10, y1, 2500, 90); ellipse(120, y2, 90, 40); ellipse(160, y3, 90, 40); angle += speed; }