The background sound I used works perfectly fine before I added the code for Perlin Flow Field but now that both sound and Perlin Flow Field code works, the sound that comes out is lagging and distorted, is there any way to fix it?
I also uploaded my code from p5.js website to use Visual Studio Code to work on the core locally but the sounds that works well before now becomes robotic sound when all sound files and everything are stored locally on my PC, how do I fix that?
Perlin noise requires processing power, so without seeing any code my guess is that you are running out of processing power. Perhaps you can optimize you code to make it run smoother.
Sound change with change of environment suggests that you local setup may not use same files or setting as in p5.js website.
how do i optimize my code to make it run smoother?
Welcome to the world of software engineering. That is a huge question. A short answer: investigate your loops; take out extra stuff. Check if you really need to make all those perlin-function calls. Can you use data structures that suit better for the task. There can be huge differences in performance between well suited and ill suited data structure.
The Perlin Flow Field I use is cause i was aiming to imitate small random particles flowing around the screen and the perlin lets me do that, do you have anything else to suggest for that instead of using perlin? i’ve checked my code and it’s really simple already
Even simple code can have less than optimal parts.
Anyways perlin is specialized set of randomness. So you could replace it with stock random() function. You could set limits or control how changes happen.
How many calls or how often you call perlin function? If amount is limited you could make those calls in setup and store values in array and fetch them from there. Much faster than calling perlin in draw(). It might slow down setup, but that happens only once at start up.
I have two stages in my code and perlin is in the setup for the first stage so it’s only called when i’m on the first stage. I am using arrays for perlin, I added it before setup. It’s just the particles that perlin made moves quite slowly as well and my background music is disturbed by the perlin noise and now it sounds weird
This is how the perlin code looks like now, my code is too long so i just included the codes for perlin ignore the {}, i might have missed or added one or two to copy and paste it here
let flow = [];
const num = 3000;
const noiseScale = 0.01;
function setup() {
createCanvas(1536, 713);
function onScreen(v) {
return v.x >= 0 && v.x <= width && v.y >= 0 && v.y <= height;
}
function draw() {
background(58, 10, 201, 15);
for (let i = 0; i < num; i++) {
let p = flow[i];
point(p.x, p.y);
let n = noise(p.x * noiseScale, p.y * noiseScale);
let a = TAU * n;
p.x += cos(a);
p.x += sin(a);
if (!onScreen(p)) {
p.x = random(width);
p.y = random(height);
}
So you run perlin noise 3000 times in each draw cycle and you use point() function which is slow too. For 60 fps you have 16ms for each draw cycle. I ran a test with 3000 perlin and point calls and only 10% of cycles were 16ms or less. In practice 60fps is impossible to reach with them both running 3000 times.
With Java processing I would recommend to use loadPixels(), but actually I don’t know if it offers speed improvement in javascript processing too.
thank you for your help throughout this thread, it was for a university project and i submitted it in the end without the distorted background music because i just couldn’t find a way to make it not distorted but anyway thank you so much for your help!