Exercício 18 - Barco em movimento

Irei criar o movimento de um barco no mar neste exercício utilizando os conceitos de seno, aprendidos em aula. Para fazer isso, utilizarei basicamente de uma equação básica:

        y= ((sin(periodo)+1)*amplitude)+height/2;

        período+=0.1;

Onde y é a posição Y do barco.

Para criar a onda, me baseei pelo exemplo encontrado em https://processing.org/reference/sin_.html : 

   float a = 0;
   float inc = TWO_PI/20.0;
  for(int i=0; i<500; i=i+4) {
    stroke(30,90,140);
    line(i, 300, i, 170+sin(a)*10.0);  
    a = a+ inc;
  } 

Onde a é o período e inc é o incremento desse período.

Para a função do barco foi necessário dois parâmetros(x e y do barco), nesta função alem de desenhar o barco, ela também conta com outra variável(var), que faz o barco ter uma leve inclinada de acordo com o movimento da onda:

void barco(float xBarco,float yBarco){ 
  noStroke();
  var=(sin(periodo+5)*5); 
  println(var);
  fill(130,80,35);
  quad(xBarco-20,yBarco+var,xBarco+20,yBarco-var,xBarco+10,yBarco+10-var,xBarco-10,yBarco+10+var);
  fill(100,100,200);
  triangle(xBarco,yBarco-30,xBarco+15,yBarco-5-var,xBarco,yBarco-5);
  fill(200,100,100);
  triangle(xBarco,yBarco-25,xBarco-15,yBarco-5+var,xBarco,yBarco-5);
}

Enfim, chamo a função barco no draw() e faço um condicional de que se o x do barco passar da tela (x>width), ele volta para o inicio:

 barco(x,y);
  if (x-20>width){
    x=0;
    periodo=0;
  }

  //foi utilizado (x-20>width) por conta da extremidade do barco.

Segue código completo:

float x;
float periodo; //periodo do barco
float var;
void setup(){
  size(500,300);
  frameRate(30);
}

//Funcao pra criar o barco--------------------------------------------
void barco(float xBarco,float yBarco){ 
  noStroke();
  var=(sin(periodo+5)*5); 
  println(var);
  fill(130,80,35);
  quad(xBarco-20,yBarco+var,xBarco+20,yBarco-var,xBarco+10,yBarco+10-var,xBarco-10,yBarco+10+var);
  fill(100,100,200);
  triangle(xBarco,yBarco-30,xBarco+15,yBarco-5-var,xBarco,yBarco-5);
  fill(200,100,100);
  triangle(xBarco,yBarco-25,xBarco-15,yBarco-5+var,xBarco,yBarco-5);
}


void draw(){
  background(220,240,250);
//criar a onda----------------------  
   float a = 0;
   float inc = TWO_PI/20.0;
  
  for(int i=0; i<500; i=i+4) {
    stroke(30,90,140);
    line(i, 300, i, 170+sin(a)*10.0);  
    a = a+ inc;
  } 

//Movimentar o barco---------------
 float y= ((sin(periodo)+1)*10)+height/2;
  periodo+=0.1;
  x+=inc*4;
 barco(x,y);
  if (x-20>width){
    x=0;
    periodo=0;
  }
//---------------------------------
}

Programa feito com processing.js: