let myFont2;

var img;

var gif_createImg1;

let input, button, greeting;

function preload() {

  song1 = loadSound('geluidv1deur.mp3');

  myFont = loadFont('AlteHaasGroteskRegular.ttf');

  myFont2 = loadFont('AlteHaasGroteskBold.ttf');

  lijnkrullanger  = loadImage ('lijnkrullanger.png');

  hoeklijnen = loadImage ('hoeklijnenregelm2klein.png');

  potlood = loadImage ('potlood.png');

  //gif_createImg1 = createImg("couveusebetercrop.gif");

  couveuse = loadImage ('couveuse.png');

}

  function setup() {

 createCanvas(windowWidth, windowHeight);

 //background(240,200,54);  

  //background (255, 204, 0);nu is het: fdc438

    background (253, 196, 56);

  image(lijnkrullanger, windowWidth/12, windowWidth/10, windowWidth/4.1,windowWidth/31.5);

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

  //image(potlood,windowWidth/4.55+windowWidth/12, windowWidth/16, windowWidth/36.3,windowWidth/31.13);

    image(couveuse, windowWidth/2-windowWidth/7.6,windowHeight/2, windowWidth/3.9, windowWidth/3.5);

​

  //fill(204, 101, 192, 127);

  //rect(windowWidth/12, windowHeight/12, windowWidth/1.2, windowHeight/2);

    let s = 'Plastieken huisje';

fill(255,255,255);

textSize(windowWidth/25.5);

textFont(myFont2);

//textAlign(CENTER)

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

    let s2 = 'Goed zo, jouw broertje of zusje ligt in een warm plastieken huisje! Maak het bedje gezelliger en mooier! ';

fill(255,255,255);

textSize(windowWidth/40);

textFont(myFont);

//textAlign(CENTER)

text(s2, windowWidth/12, windowWidth/6.7, windowWidth/1.2, windowHeight);

​

​

​

//var button;

//var col = color(25, 23, 200, 50);

//button = createImg('knopplay.png');

//button.size(windowWidth/5.4,windowWidth/10);

//button.position(windowWidth/2-windowWidth/11,windowWidth/3.5);

​

//button.mousePressed(changeBG);

​

​

button = createImg('knopterug.png');

button.size(windowWidth/7.9,windowWidth/15);

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

button.mousePressed(changeBH);

button = createImg('knopluidspreker.png');

button.size(windowWidth/7.9,windowWidth/15);

button.position(windowWidth/12,windowHeight/1.2 - windowWidth/12);

button.mousePressed(changeBI); 

input = createInput();

input.position(windowWidth/24+windowWidth/7.9+windowWidth/3,windowHeight/18+windowWidth/30);

input.size(windowWidth/5,windowWidth/45);

button = createImg('naambaby.png');

button.size(windowWidth/4.689,windowWidth/39.9);

button.position(windowWidth/24+windowWidth/7.9+windowWidth/3,windowHeight/18);

​

  button = createImg('ok.png');

  button.position(windowWidth/1.32,windowHeight/18+windowWidth/30);

  button.size (windowWidth/15.8,windowWidth/30);

  button.mousePressed(greet);

}

​

//function changeBG() {

  //window.open("https://editor.p5js.org/Rose_Thys/present/8ldoI1vNe");

 //}

​

function changeBH() {

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

   }

function changeBI() {

 if (song1.isPlaying()) {

    song1.stop();

  } else {

    song1.play();

   }

   }

​

​

function greet() {

  //col = color(253, 196, 56);

  col = color(123, 123, 123, 0.5)

  const name = input.value();

  input.value('');

​

s = name ;

fill(255,255,255);

textSize(windowWidth/25.5);

textFont(myFont2);

//textAlign(CENTER)

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

​

noStroke();

button = createButton(s);

button.size(windowWidth/3.9, windowWidth/3.5);

button.position(windowWidth/2-windowWidth/7.6+windowWidth/15,windowHeight/2+windowWidth/5.1);

button.style('font-size', '30px');

button.style('background-color', col);

button.style ("font","myFont2");

button.style("color","#7e217e");

//button.style ("border","#fff" );

​

​

  //col = color(123, 123, 123, 0.5)

}

​

​

​

​

​

​

​