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;

}
 
With the upgraded sketch, I created my own function and used my own variable to call it out on my Draw Function. For example.
 
I want to create a ship, and I drew the ship as the following
 
fill(0);

  rect(xpos, height / 2, 200, 200);
  fill(255)

  rect(xpos, height / 1.65, 200, 200); //ship body
  fill(0)

  rect(xpos, height / 1.56, 200, 200); //ship body
 
While the usual way is to put this in the function draw, I could actually make this into my own function like so. 
 
function Ship() {

  fill(0);

  rect(xpos, height / 2, 200, 200);
  fill(255)

  rect(xpos, height / 1.65, 200, 200); //ship body
  fill(0)

  rect(xpos, height / 1.56, 200, 200); //ship body

}
 
In my function draw, i just have to call out 
 
Ship();
 
and my ship will be seen when I run it. 
 
#ICM