Ship

October 9, 2017

 

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

 

 

Tags:

Share on Facebook
Share on Twitter
Please reload

Featured Posts

HelloComputer (Final) - BreakUp Aid

October 25, 2018

1/7
Please reload

Recent Posts

February 1, 2019

December 11, 2018

November 6, 2018

October 23, 2018

Please reload

Categories
Follow Me
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square