Calypso

De calypso was best wel even zoeken met hoe je de draaiingen moest doen. Uiteindelijk is het heel erg goed gelukt.

Wij vinden de Calypso ook erg goed gelukt en zouden ons hiervoor een 9 geven, dit omdat we en geluid hebben en de snelheid te besturen valt door middel van knoppen.

De sketch met code!

var angle = 0
var anglebok = 0
let song
var speed1 = 0
var speed2 = 0

function setup() {
  createCanvas(400, 600);
  angleMode(DEGREES)
  start = loadSound('start.mp3')
  song = loadSound('sound.mp3')
  grond = loadImage('grond.jpg')
  hout = loadImage('hout.jpg')
}

function draw() {
  background(220);
textAlign(CENTER)
  
    image(grond,0,0,100,100)
    image(grond,100,0,100,100)
    image(grond,200,0,100,100)
    image(grond,300,0,100,100)
    image(grond,0,100,100,100)
    image(grond,100,100,100,100)
    image(grond,200,100,100,100)
    image(grond,300,100,100,100)
    image(grond,0,200,100,100)
    image(grond,100,200,100,100)
    image(grond,200,200,100,100)
    image(grond,300,200,100,100)
    image(grond,0,300,100,100)
    image(grond,100,300,100,100)
    image(grond,200,300,100,100)
    image(grond,300,300,100,100)
    image(hout,0,400)
  
  //start
  ellipse(100,500,40)
  fill(0)
  rect(60,445,80,25)
  fill('red')
  textSize(26)
  text('start',100,465)
  
  //stop
  fill('red')
  ellipse(300,500,40)
  fill(0)
  rect(260,445,80,25)
  fill('red')
  textSize(26)
  text('stop',300,465)
  
  //sneller
  fill('red')
  ellipse(200,500,40)
  fill(0)
  rect(160,445,80,25)
  fill('red')
  textSize(26)
  text('+',200,465)
  
  //slomer
  fill('red')
  ellipse(200,550,40)
  fill(0)
  rect(160,575,80,25)
  fill('red')
  textSize(26)
  text('-',200,595)
  
  translate(200, 200)
  rotate(angle)
  fill('red')
  rect(40,-8,65,16)
  rect(-40,-8,-65,16)
  rect(-8,40,16,65)
  rect(-8,-40,16,-65)
    
  //middelste
   push();
  rotate(anglebok)
  //basis zwart
  stroke('red')
  fill('black')
  ellipse(0,0,100,100)
  //basis wit
  fill('white');

  arc(0,0,100,100,90,270);
  //witte kant
    noStroke();
  fill('white');
  ellipse(0,25,50,50);
  fill('black');
  noStroke();
  ellipse(0,25,15,15);
  //zwarte kant
    //zwarte kant logo
  fill('black');
  noStroke();
  ellipse(0,-25,50,50);
  fill('white');
  noStroke();
  ellipse(0,-25,15,15);
  pop();
  
  //1
    push();
  translate(0, -130)
  rotate(angle)
  fill(255)
    rect(-60,-6,120,12)
    rect(-6,-60,12,120)
  fill(0)
  ellipse(-50,0,20,40)
  fill(0)
  ellipse(50,0,20,40)
  fill(255,0,0)
  ellipse(0,-50,40,20)
  fill(255,0,0)
  ellipse(0,50,40,20)
  fill('black')
  ellipse(0,0,50,50)
  fill('red')
  ellipse(0,0,10,50)
  pop();
  
  //2
     push();
  translate(0, 130)
    fill(255)
  rotate(angle)
    rect(-60,-6,120,12)
    rect(-6,-60,12,120)
  fill(0)
  ellipse(-50,0,20,40)
  fill(0)
  ellipse(50,0,20,40)
  fill(255,0,0)
  ellipse(0,-50,40,20)
  fill(255,0,0)
  ellipse(0,50,40,20)
  fill('black')
  ellipse(0,0,50,50)
  fill('red')
  ellipse(0,0,10,50)
  pop();
  
  //3
      push();
  translate(-130, 0)
  rotate(angle)
  fill(255)
    rect(-60,-6,120,12)
    rect(-6,-60,12,120)
  fill(0)
  ellipse(-50,0,20,40)
  fill(0)
  ellipse(50,0,20,40)
  fill(255,0,0)
  ellipse(0,-50,40,20)
  fill(255,0,0)
  ellipse(0,50,40,20)
  fill('black')
  ellipse(0,0,50,50)
  fill('red')
  ellipse(0,0,10,50)
  pop();
  
//4
  push();
  translate(130,0)
  rotate(angle)
    fill(255)
    rect(-60,-6,120,12)
    rect(-6,-60,12,120)
  fill(0)
  ellipse(-50,0,20,40)
  fill(0)
  ellipse(50,0,20,40)
  fill(255,0,0)
  ellipse(0,-50,40,20)
  fill(255,0,0)
  ellipse(0,50,40,20)
  fill('black')
  ellipse(0,0,50,50)
  fill('red')
  ellipse(0,0,10,50)
  pop();
  
angle =angle + speed1;
anglebok = anglebok - speed2;
  
}

function mousePressed() { 
  
  //button start
    if (mouseX >= 80 && mouseX <= 120 && mouseY >= 480 && mouseY <= 520) {
      speed1 = 2
      speed2 = 3
      song.play();
      
  }
  
    //button stop
    if (mouseX >= 280 && mouseX <= 320 && mouseY >= 480 && mouseY <= 520) {
      speed1 = 0
      speed2 = 0
      song.stop()
  }
  
      //button sneller
    if (mouseX >= 180 && mouseX <= 220 && mouseY >= 480 && mouseY <= 520) {
      speed1 = speed1 + 1
      speed2 = speed2 + 1.25
  }
  
        //button slomer
    if (mouseX >= 180 && mouseX <= 220 && mouseY >= 530 && mouseY <= 570) {
      speed1 = speed1 - 1
      speed2 = speed2 - 1.25
  }
}