var gif_createImg1;

var gif_createImg2;

var img;

let myFont;

let myFont2;

function preload() {

  song = loadSound('rainlord.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');

  hoeklijnen = loadImage ('hoeklijnenregelm2klein.png');

  langelijn = loadImage ('langelijnkorter.png'); 

  slaap = loadImage ('zzklein.png'); 

  myFont = loadFont('AlteHaasGroteskRegular.ttf'); 

  myFont2 = loadFont('AlteHaasGroteskBold.ttf')

}

​

function setup() {

 createCanvas(windowWidth, 3000);

 //background(240,200,54);  

  background (255, 204, 0);

  image(unicornbed, windowWidth/12, windowHeight/0.49, 321.5, 330.25);

image(draakbed, windowWidth/12, windowHeight/0.405, 321.5, 330.25);

image(bijenbed, windowWidth/10, windowHeight/0.33, 321.5, 330.25);

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

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

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

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

 button = createImg('knopterug.png');

button.size(130,68.3);

button.style("font-family","Helvetica");

button.style("Size","50");

button.style("color","#000");

button.position(50, 2350);

button.mousePressed(changeBH);

  button = createImg('luidspreker.png');

button.size(50,50);

button.position(447, 485);

button.mousePressed(changeBG); 

  button = createImg('luidspreker.png');

button.size(50,50);

button.position(447, 780);

button.mousePressed(changeBI); 

  button = createImg('luidspreker.png');

button.size(50,50);

button.position(447,1090);

button.mousePressed(changeBJ); 

  button = createImg('luidspreker.png');

button.size(50,50);

button.position(447, 1480);

button.mousePressed(changeBK); 

​

 button = createImg('luidspreker.png');

button.size(50,50);

button.position(447, 1770);

button.mousePressed(changeBL); 

   button = createImg('luidspreker.png');

button.size(50,50);

button.position(447, 2070);

button.mousePressed(changeBM); 

  let s = 'BEDJES';

fill(255,255,255);

textSize(50);

textFont(myFont2);

//textAlign(CENTER)

text(s, windowWidth/12, windowHeight/12.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/4, 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.28, 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.88, windowWidth/2.1, windowHeight);

  let line = 'VERWARMD BEDJE';

fill(255,255,255);

textSize(30);

textFont(myFont2);

//fill(50);

text(line, windowWidth/2.2, windowHeight/1.1, 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.99, windowWidth/2.1, windowHeight);

  let lin = 'GEWOON BABYBEDJE';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(lin, windowWidth/2.2, windowHeight/0.73, 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.675, windowWidth/2.1, windowHeight);

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

fill(255,255,255);

textSize(25);

textFont(myFont);

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

  let l = 'HET EENHOORNBED';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(l, windowWidth/2.2, windowHeight/0.475, 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.455, windowWidth/2.1, windowHeight);

  let m = 'HET DRAAKBED';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(m, windowWidth/2.2, windowHeight/0.39, 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.376, windowWidth/2.1, windowHeight);

 let n = 'HET BIJENBED';

fill(255,255,255);

textSize(30);

textFont(myFont2);

text(n, windowWidth/2.2, windowHeight/0.33, 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.32, windowWidth/2.1, windowHeight);

​

  }

​

function changeBH() {

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

   }

​

function changeBG() {

 if (song.isPlaying()) {

    song.stop();

  } else {

    song.play();

   }

   }

​

function changeBI() {

 if (song.isPlaying()) {

    song.stop();

  } else {

    song.play();

   }

   }

function changeBJ() {

 if (song.isPlaying()) {

    song.stop();

  } else {

    song.play();

   }

   }

​

function changeBK() {

 if (song.isPlaying()) {

    song.stop();

  } else {

    song.play();

   }

   }

​

function changeBL() {

 if (song.isPlaying()) {

    song.stop();

  } else {

    song.play();

   }

   }

​

function changeBM() {

 if (song.isPlaying()) {

    song.stop();

  } else {

    song.play();

   }

   }

 function draw() {

  strokeWeight(10);

  stroke(0);

  line(mouseX, mouseY, pmouseX, pmouseY);

}

​

​

​

function draw() {

  gif_createImg1.position(70,300);

  gif_createImg1.size(262, 286.66)

  gif_createImg2.position(100,570);

  gif_createImg2.size(250.371,234.045)

  gif_createImg3.position(100,830);

  gif_createImg3.size(243.43,208.45)

}

​

//function touchMoved() {

  //strokeWeight(10);

  //stroke(0);

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

  //return false;

//}

​

​

​

​