Finalproject Brulbrief

Als resultaat uit dit Finalproject moesten wij de brulbrief uit Harry Potter recreëren. Hiertoe behoren: de brief zelf; de bewegingen van de brief als deze spreekt; de audio voor de brief; extra rondvliegende objecten en het vernietigen van de brief.

Als eerst hebben wij de brief zelf gemaakt. Hiervoor hebben wij simpele P5.JS vormen gebruikt. Hierbij hebben wij een beweging gebruikt die met de amplitude van het toegevoegde geluid werkt. Deze functie heet amplitude.getLevel(). Dit hebben wij getest door de kabouterdans af te spelen in onze sketch.

Wij hebben ons daarna gericht op hoe wij onze brulbrief wouden eindigen. Hiervoor hebben wij gekozen om een vlak met dezelfde kleur als de achtergrond over de brief te plaatsen en daarop weer een gif van een explosie. Dit hebben wij getimed door een framecounter te gebruiken en die in seconden af te laten tellen tot het einde van onze audio.

Na het einde hebben wij een script gemaakt voor wat de brief zal zeggen. Hierna hebben wij die ingesproken en audio in de brief zelf verwerkt en getimed met het einde van de brief. Zodra de laatste brul uit de brief komt verdwijnt deze.

Wij hebben als extra objecten verschillende plaatjes van Shawn’s hoofd ingeladen en rond laten bewegen met een applymatrix() functie. Hiermee hebben wij alle plaatjes laten roteren en bewegen om de chaos van de brulbrief te tonen.

Als laatste hebben wij de gif explosie op de brief geplaats. Hiervoor hebben wij de variable gif.createImage gebruikt om een bewegend beeld te vormen.

Wij denken dat we de code heel erg hebben vereenvoudigd door:

• Het gebruik van een matrix
• Het hergebruik van sommige variabelen
• Het gebruik van push() en pop()

Over het algemeen zijn we heel trots en blij met het resultaat. Hier kun je het resultaat bekijken.

let scream;
let amplitude;
let countDown;
let ma;
let muziekActive;
let h1;
let h2;
let gif_loadImg;
let gif_createImg;
let rotation1;
let done = 0;
let explosionDone = 0;
let cdVariable = 2;

function preload() {
  muziek = loadSound("Brulbrief.mp3");
  gif_createImg = createImg("explosie.gif");
  gif_createImg.position(-500,500)
  h1 = loadImage("sideways.png")
  h2 = loadImage("front.jpg")
}

function setup() {
  createCanvas(700, 400);
  amplitude = new p5.Amplitude();
  frameRate(60)
  level = -1;
  xL = 330;
  xR = 370;
  countDown = 41;
  ma = 0;
  muziekActive = 0;
  rotation1 = 0;
}

function draw() {
  background(220,0,70);
  let step1 = frameCount % 10;
  
  //THE LETTER
  if(countDown > cdVariable){
  fill(255,255,255)
  stroke(1)
  strokeWeight(3)
  rect(50,50,600,300)
  fill('black')
  triangle(51,51,649,51,350,250)
  fill('white')
  triangle(50,50,650,50,350,255+level)
  } else if(countDown < cdVariable+2){
    done = 1;
  }
  
  
  //THE WAX SEAL
  if(!muziek.isPlaying() && done === 0){
  if(mouseX > 280 && mouseX < 420 && mouseY > 200 && mouseY < 300){
    noStroke()
    fill(255,0,0)
    arc(330,250,90,90,HALF_PI,PI + HALF_PI)
    arc(370,250,90,90,PI + HALF_PI, HALF_PI)
  }
  else {
  fill(255,0,0)
  noStroke()
  ellipse(350,250,90)
  stroke(255,50,50)
  strokeWeight(5)
  textSize(50)
  text('SK', 315,270)
  text('TJ', 315,270)
  }
} else {
  noStroke()
  fill('red')
  xL = xL - 15
  xR = xR + 15
  arc(xL,250,90,90,HALF_PI,PI + HALF_PI)
  arc(xR,250,90,90,PI + HALF_PI, HALF_PI)

}
  level = amplitude.getLevel() * -250;
  
  

  if(frameCount % 60 == 0 && muziekActive === 1){
  countDown--;
  }
  
  if(countDown < cdVariable+1 && explosionDone === 0){
    gif_createImg.size(700, 381)
    gif_createImg.position(-5, 0);
    explosionDone = 1;
  } else if(explosionDone === 1 && countDown < cdVariable){
    gif_createImg.position(-1000, 1000)
  }
  console.log(countDown)
  
  if(countDown < 41 && countDown > cdVariable){
  angleMode(DEGREES)    
    //upperleft head  
    push()  
    translate(175, -375)  
    applyMatrix(0.3 / step1, 1, 1, -0.3 / step1, 50, 400);  
    rotate(270)  
    image(h1, 100, -50, 150, 200)  
    pop()    
    //upperright head  
    push()  
    translate(515, -345)  
    scale(-1,1)  
    applyMatrix(0.3 / step1, 1, 1, -0.3 / step1, 50, 400);  
    rotate(260)  
    image(h1, 100, -50, 150, 200) 
    pop()    
    //bottomleft head  
    push()  
    translate(200, -75)  
    applyMatrix(-0.3 / step1, 1, 1, 0.3 / step1, 50, 400);  
    rotate(260)  
    image(h1, 100, -50, 150, 200)  
    pop()    
    //bottomright head  
    push()  
    translate(500, -75) 
    scale(-1,1)  
    applyMatrix(-0.3 / step1, 1, 1, 0.3 / step1, 50, 400);  
    rotate(260)  
    image(h1, 100, -50, 150,200)  
    pop()      
    angleMode(RADIANS)  
    resetMatrix()    
    rotation1 = rotation1 + 3  
    push()  
    translate(350, 250)  
    rotate(rotation1)  
    image(h2,-75,-100,150,200)
    pop()

  }
}

 function mousePressed(){
  if(mouseX > 260 && mouseX < 440 && mouseY > 160 && mouseY < 340 && done === 0){
  if (!muziek.isPlaying()) {
    muziek.play();
    muziekActive = 1;
  }
}
}