Help me test and debug

jimrolland

Hi folks,

I'm trying to embed a soundy game with P5.js Here's the demo link : http://franetjim.free.fr/hertzian_game.html

I tried it with : Chrome : works fine Firefox : works fine except for the sound which goes crazy after a while IE11 : nothing works (blank screen)

Can you test it on other browsers? Do you have any idea to make it work better on others than Chrome? I tried many things on oscillators to improve Firefox working (dephasing, reducing amplitude, changing waveforms) but nothing worked.

Thanks to all!!!!! Jim

GoToLoop

http://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

jimrolland

Oh yes I must admit that's much better!!!!

<

pre lang="javascript">

var osc1;
var osc2;
var ouvported=0;
var ouvporteg=0;
var ouvportem=0;
var salle;
var op=0;
var freq1=20;
var freq2=20;
var amp2=0;
var compteur=0;
var solucebool=false;
var finbool=false;
var jeubool=false;
var fondubool=false;

function setup() {
  frameRate(30);
  createCanvas(windowWidth, windowHeight);
  background(0);
  noCursor();
  smooth();
  osc1 = new p5.Oscillator();
  osc1.setType('sine');
  osc1.freq(20);
  osc1.amp(1);
  osc1.start();
  osc2 = new p5.Oscillator();
  osc2.setType('sine');
  osc2.freq(20);
  osc2.amp(0);
  osc2.start();
}

function draw() {
  background(200, 200, freq1-150);
  masterVolume(1)
  if (jeubool==false) {
    solucebool=false;
    finbool=false;
    intro();
  }
  if (jeubool==true) {
    frequence1();
    frequence2();
    moquette();
    murs();
    portedroite();
    portegauche();
    portemilieu();
    fondu();
    bandeau();
    ombre();
    curseur();
    visualisation();
  }
}

function intro() {
  freq1 = 0;
  osc1.freq(freq1);
  freq2 = 0;
  osc2.freq(freq2);
  fill(0);
  noStroke();
  rect(0, 0, width, height);
  fill(255);
  textAlign(CENTER);
  textSize(width*0.05);
  text("HERTZIAN LABYRINTH", width*0.5, height*0.2);
  textSize(width*0.025);
  text("Use your eyes, your ears and your mouse", width*0.5, height*0.4);
  text("to escape from here", width*0.5, height*0.45);
  textSize(width*0.02);
  text("SPACE BAR to START", width*0.5, height*0.65);
  textSize(width*0.015);
  text("Designed by Jean-Michel Rolland", width*0.75, height*0.8);
  text("2014 - http://franetjim.free.fr", width*0.75, height*0.85);
  if (keyIsPressed) {
    if (key==' ') {
      jeubool=true;
      salle=3;
    }
  }
}

function frequence1() {
  if (salle==3 || salle==28 || salle==53 || salle==78) {
    freq1=150;
  }
  else if (salle==2 || salle==27 || salle==52 || salle==77) {
    freq1=164;
  }
  else if (salle==4 || salle==29 || salle==54 || salle==79) {
    freq1=178;
  }
  else if (salle==1 || salle==26 || salle==51 || salle==76) {
    freq1=192;
  }
  else if (salle==5 || salle==30 || salle==55 || salle==80) {
    freq1=206;
  }
  else if (salle==6 || salle==31 || salle==56 || salle==81) {
    freq1=220;
  }
  else if (salle==10 || salle==35 || salle==60 || salle==85) {
    freq1=234;
  }
  else if (salle==7 || salle==32 || salle==57 || salle==82) {
    freq1=248;
  }
  else if (salle==9 || salle==34 || salle==59 || salle==84) {
    freq1=262;
  }
  else if (salle==11 || salle==36 || salle==61 || salle==86) {
    freq1=276;
  }
  else if (salle==14 || salle==39 || salle==64 || salle==89) {
    freq1=290;
  }
  else if (salle==12 || salle==37 || salle==62 || salle==87) {
    freq1=304;
  }
  else if (salle==15 || salle==40 || salle==65 || salle==90) {
    freq1=318;
  }
  else if (salle==16 || salle==41 || salle==66 || salle==91) {
    freq1=332;
  }
  else if (salle==19 || salle==44 || salle==69 || salle==94) {
    freq1=346;
  }
  else if (salle==17 || salle==42 || salle==67 || salle==92) {
    freq1=360;
  }
  else if (salle==20 || salle==45 || salle==70 || salle==95) {
    freq1=374;
  }
  else if (salle==22 || salle==47 || salle==72 || salle==97) {
    freq1=388;
  }
  else if (salle==24 || salle==49 || salle==74 || salle==99) {
    freq1=402;
  }
  else if (salle==21 || salle==46 || salle==71 || salle==96) {
    freq1=416;
  }
  else if (salle==25 || salle==50 || salle==75 || salle==100) {
    freq1=430;
  }
  else if (salle==23 || salle==48 || salle==73 || salle==98) {
    freq1=444;
  }
  else if (salle==18 || salle==43 || salle==68 || salle==93) {
    freq1=458;
  }
  else if (salle==13 || salle==38 || salle==63 || salle==88) {
    freq1=472;
  }
  else if (salle==8 || salle==33 || salle==58 || salle==83) {
    freq1=486;
  }
  osc1.freq(freq1);
}

function frequence2() {
  freq2 = constrain(map(mouseY, height*0.84, height*0.33, 0, 500), 0, 500);
  osc2.freq(freq2);
  if (mouseX>width*0.84 && mouseX<width*0.93 && mouseY>height*0.33 && mouseY<height*0.83 && (salle==3 || salle==6 || salle==9 || salle==11 || salle==13 || salle==14 || salle==16 || salle==18
    || salle==19 || salle==21 || salle==22 || salle==23 || salle==24 || salle==26 || salle==31 || salle==36 || salle==41 ||salle==27 
    || salle==38 || salle==43 || salle==29 || salle==34 || salle==44 || salle==55 || salle==54 || salle==52 || salle==60
    || salle==57 || salle==65 || salle==62 || salle==70 || salle==69 || salle==67 || salle==100 || salle==95 || salle==90 || salle==85
    || salle==99 || salle==89 || salle==98 || salle==97 || salle==92 || salle==87 || salle==82)) {
    amp2 = 1;
  }
  else if (mouseX>width*0.07 && mouseX<width*0.16 && mouseY>height*0.33 && mouseY<height*0.83 && (salle==3 || salle==7 || salle==10 || salle==12 || salle==14 || salle==15 || salle==17 || salle==19 || salle==20
    || salle==22 || salle==23 || salle==24 || salle==25 || salle==31 || salle==36 || salle==41 || salle==46 || salle==47
    || salle==38 || salle==43 || salle==48 || salle==34 || salle==39 || salle==49 || salle==54 || salle==52 || salle==51
    || salle==59 || salle==56 || salle==63 || salle==61 || salle==69 || salle==68 || salle==66 || salle==95 || salle==90
    || salle==85 || salle==80 || salle==94 || salle==79 || salle==92 || salle==87 || salle==82 || salle==77)) {
    amp2 = 1;
  } 
  else if (mouseX>width*0.425 && mouseX<width*0.575 && mouseY>height*0.3 && mouseY<height*0.8 &&(salle==6 || salle==7 || salle==9 || salle==10 || salle==11 || salle==12 || salle==13 || salle==15 || salle==16 || salle==17 || salle==18 || salle==20
    || salle==27 || salle==47 || salle==28 || salle==48 || salle==29 || salle==39 || salle==44 || salle==49 || salle==60 || salle==59 || salle==57 || salle==56
    || salle==65 || salle==63 || salle==62 || salle==61 || salle==70 || salle==68 || salle==67 || salle==66 || salle==99 || salle==94 || salle==89 || salle==79
    || salle==98 || salle==78 || salle==97 || salle==77)) {
    amp2 = 1;
  }
  else {
    amp2 = 0;
  }
  osc2.amp(amp2, 0.5);
}

function moquette() {
  fill(255, 255, freq1-150);
  noStroke();
  for (var i=0; i<width; i=i+(freq1/4)) {
    for (var j=0; j<height; j=j+40) {
      ellipse(i, height*0.8+j+25, freq1/4, 20);
      ellipse(i+25, height*0.8+j, freq1/4, 20);
    }
  }
}

function murs() {
  noStroke();
  fill(209, 154, freq1-150);
  quad(0, 0, width*0.25, height*0.2, width*0.25, height*0.8, 0, height);  
  quad(width, 0, width*0.75, height*0.2, width*0.75, height*0.8, width, height);
  fill(229, 177, freq1-150);
  rect(width*0.25, height*0.2, width*0.5, height*0.6);
}

function portedroite() {
  if (salle==3 || salle==6 || salle==9 || salle==11 || salle==13 || salle==14 || salle==16 || salle==18
    || salle==19 || salle==21 || salle==22 || salle==23 || salle==24 || salle==26 || salle==31 || salle==36 || salle==41 ||salle==27 
    || salle==38 || salle==43 || salle==29 || salle==34 || salle==44 || salle==55 || salle==54 || salle==52 || salle==60
    || salle==57 || salle==65 || salle==62 || salle==70 || salle==69 || salle==67 || salle==100 || salle==95 || salle==90 || salle==85
    || salle==99 || salle==89 || salle==98 || salle==97 || salle==92 || salle==87 || salle==82) {
    fill(0);
    noStroke();
    quad(width*0.84, height*0.863, width*0.84, height*0.31, width*0.93, height*0.26, width*0.93, height*0.934);
    fill(75, 54, 9);
    quad(width*0.84+ouvported, height*0.863-(ouvported/4), width*0.84+ouvported, height*0.31+(ouvported/4), width*0.93, height*0.26, width*0.93, height*0.934);
    stroke(41, 29, 3);
    strokeWeight(width*0.01);
    noFill();
    quad(width*0.84, height*0.863, width*0.84, height*0.31, width*0.93, height*0.26, width*0.93, height*0.934);

    if (mouseIsPressed && mouseX>width*0.84 && mouseX<width*0.93 && mouseY>height*0.33 && mouseY<height*0.83 && abs(freq1-freq2)<2) {
      ouvported=ouvported+2;
    }
  }
  if (ouvported>30) {
    op=(ouvported-30)*12;
    fondubool=true;
  }
  if (ouvported>50) {
    ouvported=0;
    ouvporteg=0;
    ouvportem=0;
    if (salle<26) {
      salle = salle+76;
    }
    else if (salle>25 && salle<51) {
      salle = salle-20;
    }
    else if (salle>50 && salle<76) {
      salle = salle-26;
    }
    else if (salle>75) {
      salle = salle-30;
    }
  }
}

function portegauche() {
  if (salle==3 || salle==7 || salle==10 || salle==12 || salle==14 || salle==15 || salle==17 || salle==20 || salle==22
    || salle==23 || salle==24 || salle==25 || salle==31 || salle==34 || salle==36 || salle==38 || salle==39 || salle==41 ||salle==43 
    || salle==46 || salle==47 || salle==48 || salle==49 || salle==51 || salle==52 || salle==54 || salle==56 || salle==59 || salle==61 || salle==63
    || salle==66 || salle==68 || salle==69 || salle==77 || salle==79 || salle==80 || salle==82 || salle==85 || salle==87 || salle==90 || salle==92 || salle==94
    || salle==95) {
    fill(0);
    noStroke();
    quad(width*0.16, height*0.863, width*0.16, height*0.31, width*0.07, height*0.26, width*0.07, height*0.934);
    fill(75, 54, 9);
    quad(width*0.16, height*0.863, width*0.16, height*0.31, width*0.07+ouvporteg, height*0.26+ouvporteg, width*0.07+ouvporteg, height*0.934-ouvporteg);
    stroke(41, 29, 3);
    strokeWeight(width*0.01);
    noFill();
    quad(width*0.16, height*0.863, width*0.16, height*0.31, width*0.07, height*0.26, width*0.07, height*0.934);

    if (mouseIsPressed && mouseX>width*0.07 && mouseX<width*0.16 && mouseY>height*0.33 && mouseY<height*0.83 && abs(freq1-freq2)<2) {
      ouvporteg=ouvporteg+2;
    }
  }
  if (ouvporteg>20) {
    op=(ouvporteg-10)*8;
    fondubool=true;
  }
  if (ouvporteg>50) {
    ouvported=0;
    ouvporteg=0;
    ouvportem=0;
    if (salle<26) {
      salle = salle+24;
    }
    else if (salle>25 && salle<51) {
      salle = salle+20;
    }
    else if (salle>50 && salle<76) {
      salle = salle+26;
    }
    else if (salle>75) {
      salle = salle-70;
    }
  }
}

function portemilieu() {
  if (salle==6 || salle==7 || salle==9 || salle==10 || salle==11 || salle==12 || salle==13 || salle==15
    || salle==16 || salle==17 || salle==18 || salle==20 || salle==27 || salle==28 || salle==29 || salle==39 || salle==44 
    || salle==47 || salle==48 || salle==49 || salle==56 || salle==57 || salle==59 || salle==60 || salle==61 || salle==62
    || salle==63 || salle==65 || salle==66 || salle==67 || salle==68 || salle==70 || salle==77 || salle==78 || salle==79 || salle==89
    || salle==94 || salle==97 || salle==98 || salle==99) {
    fill(0);
    quad(width*0.425, height*0.79, width*0.425, height*0.36, width*0.575, height*0.36, width*0.575, height*0.79);
    fill(75, 54, 9);
    noStroke();
    quad(width*0.425+ouvportem, height*0.79-(ouvportem/2), width*0.425+ouvportem, height*0.36+(ouvportem/2), width*0.575, height*0.36, width*0.575, height*0.79);
    stroke(41, 29, 3);
    strokeWeight(width*0.01);
    noFill();
    quad(width*0.425, height*0.79, width*0.425, height*0.36, width*0.575, height*0.36, width*0.575, height*0.79);

    if (mouseIsPressed && mouseX>width*0.4 && mouseX<width*0.6 && mouseY>height*0.3 && mouseY<height*0.8 && abs(freq1-freq2)<2) {
      ouvportem=ouvportem+2;
    }
  }
  if (ouvportem>30) {
    op=(ouvportem-30)*12;
    fondubool=true;
  }
  if (ouvportem>50) {
    ouvported=0;
    ouvporteg=0;
    ouvportem=0;
    if (salle<26) {
      salle = salle+5;
    }
    else if (salle>25 && salle<51) {
      salle = salle-1;
    }
    else if (salle>50 && salle<76) {
      salle = salle-5;
    }
    else if (salle>75) {
      salle = salle+1;
    }
  }
  if (salle==58) {
    fill(255, 0, 0);
    ellipse(width*0.5, height*0.5, width*0.1, width*0.1);
  }
  if ((salle==28 || salle==78) && solucebool==true) {
    fill(255, 0, 0);
    ellipse(width*0.5, height*0.5, width*0.1, width*0.1);
    if (mouseIsPressed && mouseX>width*0.45 && mouseX<width*0.55 && mouseY>height*0.95) {
      finbool = true;
    }
    if (finbool==true) {
      conclu();
    }
  }
}

function fondu() {
  if (fondubool==true) {
    fill(0, 0, 0, op);
    noStroke();
    rect(0, 0, width, height);
  }
  fondubool=false;
}

function bandeau() {
  fill(0);
  noStroke();
  rect(width*0.2, height*0.95, width*0.6, height*0.05);
  fill(255);
  textSize(width*0.01);
  textAlign(CENTER);
  text("START AGAIN", width*0.75, height*0.98);
  text("ABOUT", width*0.25, height*0.98);
  if (mouseIsPressed && mouseX>width*0.7 && mouseX<width*0.8 && mouseY>height*0.9) {
    jeubool = false;
    solucebool = false;
    finbool = false;
  }
  if (mouseIsPressed && mouseX>width*0.2 && mouseX<width*0.3 && mouseY>height*0.9) {
    jeubool = false;
    solucebool = false;
    finbool = false;
    link("http://franetjim.free.fr/hertzian_labyrinth.html");
  }
  if (salle==58 && mouseIsPressed && mouseX>width*0.45 && mouseX<width*0.55 && mouseY>height*0.45 && mouseY<height*0.55) {
    solucebool=true;
    salle = 13;
  }
  if (solucebool==true) {
    fill(255, 0, 0);
    ellipse(width*0.5, height*0.975, width*0.02, width*0.02);
  }
}

function ombre() {
  var a = float(width);
  stroke(0, 0, 0, 20);
  strokeWeight(10);
  noFill();
  ellipse(width*0.5, height*0.6, freq1*(a/800), freq2*(a/800)*amp2);
}

function curseur() {
  stroke(255);
  strokeWeight(width*0.01);
  if ((mouseX>width*0.7 && mouseX<width*0.8) || (mouseX>width*0.2 && mouseX<width*0.3) && mouseY>height*0.9) {
    fill(255, 0, 0);
    ellipse(mouseX, mouseY, width*0.02, width*0.02);
  }
  else if (solucebool==true && mouseX>width*0.45 && mouseX<width*0.55 && mouseY>height*0.95) {
    fill(255, 0, 0);
    ellipse(mouseX, mouseY, width*0.02, width*0.02);
  }
  else {
    fill(100);
    ellipse(mouseX, mouseY, width*0.02, width*0.02);
  }
}

function visualisation() {
  var a = float(width);
  strokeWeight(2);
  noFill();
  for (var i=0; i<10; i++) {
    stroke(255-abs((freq1-freq2)*50/(amp2+0.01))+i*20);
    ellipse(width*0.5, height*0.5, freq1*(a/1000)+i, freq2*(a/1000)*amp2+i);
  }
}

function conclu() {
  fill(0);
  noStroke();
  rect(0, 0, width, height);
  fill(255);
  textSize(width*0.1);
  textAlign(CENTER);
  text("YOU ARE FREE!", width*0.5, height*0.5);
  freq1 = lerp(150, 500, 0.5);
  osc1.freq(freq1);
  freq2 = lerp(500, 150, 0.5);
  osc2.freq(freq2);
}

function link(url, winName, options) {
  winName && open(url, winName, options) || (location = url);
}