let song;

var gif_createImg1;

var gif_createImg2;

var img;

let myFont;

let myFont2;

function preload() {

  song1 = loadSound('plastiekenhuisje.mp3');

  song2 = loadSound('verwarmdbedje.mp3');

  song3 = loadSound('gewoon bedje.mp3');

  song4 = loadSound('eenhoornbed.mp3');

  song5 = loadSound('drakenbed.mp3');

  song6 = loadSound('bijenbed.mp3');

  //sample = loadSound('3 bedjes.mp3');

  gif_createImg1 = createImg("couveusebetercrop.gif");

  gif_createImg2 = createImg("warmbedjecrop.gif");

  gif_createImg3 = createImg("gewoonbedcrop.gif");

  unicornbed = loadImage('unicornbed.png');

  draakbed = loadImage('dragonbed.png');

  bijenbed = loadImage('bee.png');

  lijnkrul  = loadImage ('lijnkrullang.png');

  lijnkrullangst  = loadImage ('lijnkrullangst.png');

  hoeklijnen = loadImage ('hoeklijnenregelm2klein.png');

  langelijn = loadImage ('langelijnkorter.png'); 

  //slaap2 = loadImage ('zzklein.png'); 

  slaap = loadImage ('ssstschuin.png'); 

  myFont = loadFont('AlteHaasGroteskRegular.ttf'); 

  myFont2 = loadFont('AlteHaasGroteskBold.ttf')

}

​

function setup() {

 createCanvas(windowWidth, 2607);

 //background(240,200,54);  

  background (253, 196, 56);

//sample.play();

image(unicornbed, windowWidth/12, windowHeight/0.408, 289.35, 297.225);

image(draakbed, windowWidth/12, windowHeight/0.345, 289.35, 297.225);

image(bijenbed, windowWidth/12, windowHeight/0.295, 289.35, 297.225);

image(lijnkrul, windowWidth/12, windowHeight/5.8, 231, 42.5);

image(lijnkrullangst, windowWidth/12, windowHeight/0.441, 375.5,42.5);

image(hoeklijnen, windowWidth/4000, windowHeight/900, 50, 50);

image(langelijn, windowWidth/2.2, windowHeight/1.895, 388.5, 30);

image(langelijn, windowWidth/2.2, windowHeight/0.905, 388.5, 30);

image(langelijn, windowWidth/2.2, windowHeight/0.597, 388.5, 30);

image(langelijn, windowWidth/2.2, windowHeight/0.397, 388.5, 30);

image(langelijn, windowWidth/2.2, windowHeight/0.335, 388.5, 30);

image(langelijn, windowWidth/2.2, windowHeight/0.2895, 388.5, 30);

image(slaap, windowWidth/3.48, windowHeight/25, 105.6, 59.4);

//image(slaap2, windowWidth/3.3, windowHeight/16, 53.63, 27.75);

​

​

 button = createImg('knopterug.png');

button.size(130,68.3);

button.position(windowWidth/12, windowHeight/0.254);

button.mousePressed(changeBH);

  button = createImg('knopluidspreker.png');

button.size(130,68.3);

button.position(windowWidth/2.2, windowHeight/1.155);

button.mousePressed(changeBG); 

  button = createImg('knopluidspreker.png');

button.size(130,68.3);

button.position(windowWidth/2.2, windowHeight/0.698);

button.mousePressed(changeBI); 

  button = createImg('knopluidspreker.png');

button.size(130,68.3);

button.position(windowWidth/2.2, windowHeight/0.4987);

button.mousePressed(changeBJ); 

  button = createImg('knopluidspreker.png');

button.size(130,68.3);

button.position(windowWidth/2.2, windowHeight/0.3642);

button.mousePressed(changeBK); 

​

 button = createImg('knopluidspreker.png');

button.size(130,68.3);

button.position(windowWidth/2.2, windowHeight/0.311);

button.mousePressed(changeBL); 

   button = createImg('knopluidspreker.png');

button.size(130,68.3);

button.position(windowWidth/2.2, windowHeight/0.271);

button.mousePressed(changeBM); 

  let s = 'BEDJES';

fill(255,255,255);

textSize(50);

textFont(myFont2);

//textAlign(CENTER)

text(s, windowWidth/12, windowHeight/11.5, windowWidth/1.2, windowHeight);

  let s2 = 'De baby kan in drie verschillende bedjes liggen. Omcirkel het bedje waar jouw broertje of zusje in ligt. Als je de uitleg over de bedjes wil horen, klik op het luidsprekertje.';

fill(255,255,255);

textSize(25);

textFont(myFont);

//textAlign(CENTER)

text(s2, windowWidth/12, windowHeight/3.9, windowWidth/1.15, windowHeight);

  let lines = 'EEN PLASTIEKEN HUISJE';

fill(255,255,255);

textSize(30);

textFont(myFont2);

//fill(50);

text(lines, windowWidth/2.2, windowHeight/2.09, windowWidth/2, windowHeight);

  let lines2 = 'Dit is een bedje dat helemaal bestaat uit plastiek met kleine deurtjes. Daar kan je het lekker warm in maken en extra lucht geven, dan kunnen ze beter ademen.';

fill(255,255,255);

textSize(25);

textFont(myFont);

//fill(50);

text(lines2, windowWidth/2.2, windowHeight/1.65, windowWidth/2.1, windowHeight);

  let line = 'VERWARMD BEDJE';

fill(255,255,255);

textSize(30);

textFont(myFont2);

//fill(50);

text(line, windowWidth/2.2, windowHeight/0.95, windowWidth/3, windowHeight);

  let line2 = 'Als de baby groter is en minder zorg nodig heeft, dan leggen we hem of haar in een bedje. Het matrasje is lekker warm.';

fill(255,255,255);

textSize(25);

textFont(myFont);

//fill(50);

text(line2, windowWidth/2.2, windowHeight/0.845, windowWidth/2.1, windowHeight);

  let lin = 'GEWOON BABYBEDJE';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(lin, windowWidth/2.2, windowHeight/0.616, windowWidth/2, windowHeight);

  let lin2 = 'Als de baby nog een beetje beter is gaat die in een gewoon babybedje. Dat is niet verwarmd, maar de baby heeft dan kleertjes aan en ligt onder een dekentje.';

fill(255,255,255);

textSize(25);

textFont(myFont);

text(lin2, windowWidth/2.2, windowHeight/0.57, windowWidth/2.1, windowHeight);

   let li = 'TEKENINGEN';

fill(255,255,255);

textSize(50);

textFont(myFont2);

text(li, windowWidth/12, windowHeight/0.458, windowWidth/1.2, windowHeight);

let li2 = 'Wat stellen de tekeningen voor?';

fill(255,255,255);

textSize(25);

textFont(myFont);

text(li2, windowWidth/12, windowHeight/0.4255, windowWidth/1.2, windowHeight);

  let l = 'HET EENHOORNBED';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(l, windowWidth/2.2, windowHeight/0.405, windowWidth/3, windowHeight);

  let l2 = 'Als de baby dorst heeft, komt er water uit het oor van de eenhoorn.';

fill(255,255,255);

textSize(25);

textFont(myFont);

text(l2, windowWidth/2.2, windowHeight/0.385, windowWidth/2.1, windowHeight);

  let m = 'HET DRAAKBED';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(m, windowWidth/2.2, windowHeight/0.341, windowWidth/2.1, windowHeight);

   let m2 = 'Uit de staart van de robotdraak komt vuur zodat hij kan rijden.';

fill(255,255,255);

textSize(25);

textFont(myFont);

text(m2, windowWidth/2.2, windowHeight/0.326, windowWidth/2.1, windowHeight);

 let n = 'HET BIJENBED';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(n, windowWidth/2.2, windowHeight/0.294, windowWidth/2.1, windowHeight);

   let n2 = 'De baby heeft een stuur zodat hij zelf kan rondvliegen.';

fill(255,255,255);

textSize(25);

textFont(myFont);

text(n2, windowWidth/2.2, windowHeight/0.283, windowWidth/2.1, windowHeight);

​

  }

​

function changeBH() {

  window.open("https://editor.p5js.org/Rose_Thys/present/cSzowFj1d", "_self").close();

   }

​

function changeBG() {

 if (song1.isPlaying()) {

    song1.stop();

  } else {

    song1.play();

   }

   }

​

function changeBI() {

 if (song2.isPlaying()) {

    song2.stop();

  } else {

    song2.play();

   }

   }

function changeBJ() {

 if (song3.isPlaying()) {

    song3.stop();

  } else {

    song3.play();

   }

   }

​

function changeBK() {

 if (song4.isPlaying()) {

    song4.stop();

  } else {

    song4.play();

   }

   }

​

function changeBL() {

 if (song5.isPlaying()) {

    song5.stop();

  } else {

    song5.play();

   }

   }

​

function changeBM() {

 if (song6.isPlaying()) {

    song6.stop();

  } else {

    song6.play();

   }

   }

 function draw() {

  strokeWeight(10);

  stroke(0);

  line(mouseX, mouseY, pmouseX, pmouseY);

​

}

​

​

​

function draw() {

  gif_createImg1.position(70,295);

  gif_createImg1.size(262, 286.66)

  gif_createImg2.position(100,660);

  gif_createImg2.size(250.371,234.045)

  gif_createImg3.position(100,1030);

  gif_createImg3.size(243.43,208.45)

}

​

//function touchMoved() {

//strokeWeight(10);

// stroke(0);

// line(mouseX, mouseY, pmouseX, pmouseY);

//return false;

//}

​