Jump to content

Code Block works on editor but not Live Site

Recommended Posts

Hi, I've created an interactive code using p5js, and its sound function. 
It works on the editor, but somehow doesn't work the same in the live site. 

 

This is the code:

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>

 <script>

 

let mic;

let micLevel;

let bg;

var outerDiam = 0;

 

function setup() {

  var cnv =   createCanvas(windowWidth, windowHeight);

  var x = (windowWidth - width) / 2;

  var y = (windowHeight - height) / 2;

  cnv.position(x, y);

 

background(255);

  

  mic = new p5.AudioIn();

  mic.start();

 

bg = createGraphics(width, height);

  bg.background(230,20);

  bg.noStroke();

  for (let i = 0; i < 300000; i++) {

    let x = random(width);

    let y = random(height);

    let s = noise(x*0.01, y*0.01)*2;

    bg.fill(250, 20);

    bg.rect(x, y, s, s);

  } 

}

 

function windowResized() {

  centerCanvas();

}

 

function draw() {

randomSeed(0);

 

  micLevel = mic.getLevel()

stroke(200, round(micLevel * 1000), round(micLevel*255));

  strokeWeight(micLevel * 500);

 

    noStroke();

blendMode(BLEND)

 

for (var i = 0; i < 100; i++){

var diam = outerDiam - 30 * i;    

    if (diam > 0){

      

      var fade = map(diam, 0, width, 0, 255);

stroke(fade);

      noFill();

      ellipse(i*100, micLevel*20 + random(40)+height/2, diam);

    }

  }

  outerDiam = outerDiam + 2;

image(bg,0,0);

}

</script>

</body>

I have also included the HTML in advanced section:
<html>

  <head>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.js"></script>

    <script src="sketch.js"></script>

  </head>

  <body>

  </body>

</html>

Screenshot 2023-01-08 at 11.42.57 PM.png

Screenshot 2023-01-08 at 11.43.08 PM.png

Link to comment
  • Replies 1
  • Views 148
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.