How can convert my Processing code to JavaScript so it runs in a webpage?

So i have this new assignement and i need to make this animation but now i need too put this in a webpage, i already tried pass this to javascript and put in the webpage but it doesn´t work. Can someone please help me with this??

<
import processing.sound.*;
int x=2;
int m=8;
float myArray = new float[256];
float c = new float[256];
FFT fft;
AudioIn in;
int bands = 256;
float spectrum = new float[bands];

void setup() {
size(1542, 400);
background(255);
rectMode(CENTER);
fill(0);
noStroke();
// Create an Input stream which is routed into the Amplitude analyzer
fft = new FFT(this, bands);
in = new AudioIn(this);

// start the Audio Input
in.start();

// patch the AudioIn
fft.input(in);
}
void draw() {
background(255);
fft.analyze(spectrum);
for (int i=0; i<18; i++) {
myArray[i]=map(spectrum[i], 0, 1, 0, 10000);
c[i]=constrain(myArray[i], 0, 4m);
}
for (int i=18; i<36; i++) {
myArray[i]=map(spectrum[i], 0, 1, 0, 100000);
c[i]=constrain(myArray[i], 0, 4
m);
}
for (int i=36; i<53; i++) {
myArray[i]=map(spectrum[i], 0, 1, 0, 50000);
c[i]=constrain(myArray[i], 0, 4m);
}
for (int i=53; i<71; i++) {
myArray[i]=map(spectrum[i], 0, 1, 0, 100000);
c[i]=constrain(myArray[i], 0, 4
m);
}
for (int i=71; i<89; i++) {
myArray[i]=map(spectrum[i], 0, 1, 0, 100000);
c[i]=constrain(myArray[i], 0, 4m);
}//c
rect(m, height/2, m, 14
m + c[0]);
rect(m2, height/2, m, 18m + c[1]);
rect(m3, height/2, m, 20m + c[2]);
rect(m4, height/2, m, 22m + c[3]);
rect(m5, height/2-7.5m, m, 7m + c[4]);
rect(m
5, height/2+7.5m, m, 7m + c[4]);
rect(m6, height/2-9m, m, 6m + c[5]);
rect(m
6, height/2+9m, m, 6m + c[5]);
rect(m7, height/2-9.5m, m, 5m + c[6]);
rect(m
7, height/2+9.5m, m, 5m + c[6]);
rect(m8, height/2-10m, m, 4m + c[7]);
rect(m
8, height/2+10m, m, 4m + c[7]);
rect(m9, height/2-10m, m, 4m + c[8]);
rect(m
9, height/2+10m, m, 4m + c[8]);
rect(m10, height/2-10m, m, 4m + c[9]);
rect(m
10, height/2+10m, m, 4m + c[9]);
rect(m11, height/2-10m, m, 4m + c[10]);
rect(m
11, height/2+10m, m, 4m + c[10]);
rect(m12, height/2-9.5m, m, 5m + c[11]);
rect(m
12, height/2+9.5m, m, 5m + c[11]);
rect(m13, height/2-9m, m, 6m + c[12]);
rect(m
13, height/2+9m, m, 6m + c[12]);
rect(m14, height/2-7.5m, m, 7m + c[13]);
rect(m
14, height/2+7.5m, m, 7m + c[13]);
rect(m15, height/2-7m, m, 8m + c[14]);
rect(m
15, height/2+7m, m, 8m + c[14]);
rect(m16, height/2-6.5m, m, 7m + c[15]);
rect(m
16, height/2+6.5m, m, 7m + c[15]);
rect(m17, height/2-6m, m, 6m + c[16]);
rect(m
17, height/2+6m, m, 6m + c[16]);
rect(m18, height/2-5.5m, m, 3m + c[17]);
rect(m
18, height/2+5.5m, m, 3m + c[17]);

1 Like

Hi

https://www.reddit.com/r/processing/comments/7dqqvh/comment/dq0ecac/

1 Like

Note that you can’t translate processing sound library into p5.js you need to code your own FFT via p5.js follow @GoToLoop link to do so

Watch this

2 Likes