applepaperplane Posted January 8 Share Posted January 8 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> Link to comment
tuanphan Posted January 14 Share Posted January 14 Hi, Where did you get this code? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment