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

**URL:** <https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [December 14, 2023, 5:11pm UTC](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475 "2023-12-14T17:11:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bouu28](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@bouu28](https://discourse.processing.org/u/bouu28)\
**Post date:** [December 14, 2023, 5:11pm UTC](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475/1 "2023-12-14T17:11:02Z")

</div>

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, 4_m);  
}  
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, 4_m);  
}  
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, 4_m);  
}//c  
rect(m, height/2, m, 14_m + c[0]);  
rect(m_2, height/2, m, 18_m + c[1]);  
rect(m_3, height/2, m, 20_m + c[2]);  
rect(m_4, height/2, m, 22_m + c[3]);  
rect(m_5, height/2-7.5_m, m, 7_m + c[4]);  
rect(m_5, height/2+7.5_m, m, 7_m + c[4]);  
rect(m_6, height/2-9_m, m, 6_m + c[5]);  
rect(m_6, height/2+9_m, m, 6_m + c[5]);  
rect(m_7, height/2-9.5_m, m, 5_m + c[6]);  
rect(m_7, height/2+9.5_m, m, 5_m + c[6]);  
rect(m_8, height/2-10_m, m, 4_m + c[7]);  
rect(m_8, height/2+10_m, m, 4_m + c[7]);  
rect(m_9, height/2-10_m, m, 4_m + c[8]);  
rect(m_9, height/2+10_m, m, 4_m + c[8]);  
rect(m_10, height/2-10_m, m, 4_m + c[9]);  
rect(m_10, height/2+10_m, m, 4_m + c[9]);  
rect(m_11, height/2-10_m, m, 4_m + c[10]);  
rect(m_11, height/2+10_m, m, 4_m + c[10]);  
rect(m_12, height/2-9.5_m, m, 5_m + c[11]);  
rect(m_12, height/2+9.5_m, m, 5_m + c[11]);  
rect(m_13, height/2-9_m, m, 6_m + c[12]);  
rect(m_13, height/2+9_m, m, 6_m + c[12]);  
rect(m_14, height/2-7.5_m, m, 7_m + c[13]);  
rect(m_14, height/2+7.5_m, m, 7_m + c[13]);  
rect(m_15, height/2-7_m, m, 8_m + c[14]);  
rect(m_15, height/2+7_m, m, 8_m + c[14]);  
rect(m_16, height/2-6.5_m, m, 7_m + c[15]);  
rect(m_16, height/2+6.5_m, m, 7_m + c[15]);  
rect(m_17, height/2-6_m, m, 6_m + c[16]);  
rect(m_17, height/2+6_m, m, 6_m + c[16]);  
rect(m_18, height/2-5.5_m, m, 3_m + c[17]);  
rect(m_18, height/2+5.5_m, m, 3_m + c[17]);

>

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 14, 2023, 6:17pm UTC](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475/2 "2023-12-14T18:17:53Z")

</div>

> **[Processing transition](https://github.com/processing/p5.js/wiki/Processing-transition)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

> **[reference | p5.js](https://p5js.org/reference/#/libraries/p5.sound)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [December 14, 2023, 6:20pm UTC](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475/3 "2023-12-14T18:20:46Z")

</div>

Hi

> [@Convert p5js to Processing](https://discourse.processing.org/t/convert-p5js-to-processing/29893):
>
> could anyone help me converting this code into Processing please? thanks

[https://www.reddit.com/r/processing/comments/7dqqvh/comment/dq0ecac/](https://www.reddit.com/r/processing/comments/7dqqvh/comment/dq0ecac/)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [December 14, 2023, 8:07pm UTC](https://discourse.processing.org/t/how-can-convert-my-processing-code-to-javascript-so-it-runs-in-a-webpage/43475/4 "2023-12-14T20:07:43Z")

</div>

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

[![](https://img.youtube.com/vi/2O3nm0Nvbi4/hqdefault.jpg "17.11: Sound Visualization: Frequency Analysis with FFT - p5.js Sound Tutorial") ](https://www.youtube.com/watch?v=2O3nm0Nvbi4&t=233s)