# Why is my p5js code is too slow after I upload it

**URL:** <https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [November 29, 2022, 4:19pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936 "2022-11-29T16:19:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 29, 2022, 4:19pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936/1 "2022-11-29T16:19:46Z")

</div>

Hello, i am just learning about these things, processing and p5…  
I made a sketch on Processing and transfer it to p5.js.  
What happend is that the resolution of my codes turned too slow, both of them. As o Processing as on p5. Then i uploaded it to github .  
Is there something i am missing for my work get too slow?  
I am sending here both of them and a link of the github.  
The flashs/blinks of the rect suposed to be real fast, as the little circle on the ET head, witch contains a link ebebbed.  
Thanks to all

1- Processing code;

```auto
PImage et;

boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PShader blur;

void setup() {
  size(600, 600);

  et = loadImage("et.png"); // Load the image into the program
  filter(BLUR, 6);
}

void draw() {
  background(0); // total canva black

  // rect flahing/blinking

  int m = millis();
  fill(m % 200); // velocity of flashs **not working good** maybe my computer..
  rect(25, 25, 555, 555, 30);

  image(et, 0, 0 );
  textSize(128);
  fill(0, 408, 612, 816);

  //text

  text("Techno", 100, 150, -120);
  filter(BLUR, 6);

  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(74, 245, 243, 70);
  } else {
    noStroke();
    noFill();
  }

  circle(267, 290, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://web.facebook.com/groups/378940129825776");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}

void checkButtons() {
  if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

```

2 - p5 code;

```auto

 var button;

var et;

var overButton;

var backwards;

var timeLapse;

var timeTrack;

var blur;

function preload() {
photo = loadImage('et.png');
}

function setup() {
    initializeFields();
  createCanvas(windowWidth, windowHeight);
    //createCanvas(600, 600);
    // Load the image into the program
    et = loadImage("et.png");
    filter(BLUR, 6);
}

function draw() {
    // total canva black
    background(0);
    // rect flahing/blinking
    var m = millis();
    // velocity of flashs **not working good** maybe my computer..
    fill(m % 170);
    rect(25, 25, 555, 555, 30);
    image(et, 0, 0);
    textSize(128);
    fill(0, 408, 612, 816);
    // text
    text("Techno", 100, 70, -120);
    filter(BLUR, 6);
    if (overButton == true) {
        noStroke();
        fill(74, 245, 243, 70);
         filter(BLUR, 8);
    } else {
        noStroke();
        fill(237, 10, 222);
    }
    circle(267, 290, 30);
}

function mouseClicked() {
  {
    window.open('https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7');
  }

    
}

function mouseMoved() {
    checkButtons();
}

function mouseDragged() {
    checkButtons();
}

function checkButtons() {
    if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY < 300) {
        overButton = true;
    } else {
        overButton = false;
    }
}

function initializeFields() {
    et = null;
    overButton = false;
    backwards = false;
    timeLapse = 400;
    timeTrack = 0;
    blur = null;
}

```

And this is the page with the results from github;

[https://vrtxart.github.io/head-tutorial1/](https://vrtxart.github.io/head-tutorial1/)

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [November 30, 2022, 3:35pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936/2 "2022-11-30T15:35:22Z")

</div>

Interesting! If you use the profiler you will notice that the blur filter is taking seconds per frame to complete.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/4/84d3adce4a9bc7e123df16b59e945e07d34ef929.jpeg)

To avoid this bottleneck, you might want to include a blurred version of your image in the sketch, or bake it in the setup.

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [November 30, 2022, 8:28pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936/3 "2022-11-30T20:28:40Z")

</div>

Thank you Mr. @sableraph .  
Also do the same with the text, and any other image that i will add in this or other code like these, i guess?!  
What is this “profiler” you said (this new window in black)?" is it something i can dL in Processing or other software ?  
So, i do it now… show you it gonna be.  
Thanks once again

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 1, 2022, 12:00am UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936/4 "2022-12-01T00:00:36Z")

</div>

here is the new procesing code; looks great and the flashs are faster.  
Now i am try to convert this into p5js. The website i was using does not work any more … You know, when is too good, they take off … i looking for a translator from processing into p5js…  
Ah, i stiil have to make a circle not a rect (i am studing it) as i said in the beging, i do not know where in the code is saying it is a rect lol…  
And also i have to add an image to cover all of that you will see, with a “cutout” circle that show what is behind … .

here is de processing sketch; In this when run only the little purple circle is a button.

```auto
PImage et;
;
PImage img; //here
PImage txt;
boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

void setup() {
  size(600, 600);

  //rect move
  img = createImage(200, 200, ARGB); // here
  for (int i = 0; i < img.pixels.length; i++) { // here
    float a = map(i, 0, img.pixels.length, 255, 0); //here
    img.pixels[i] = color(255, 204); //here
  }

  //images
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);
}

void draw() {
  background(0); // total canva black

  // rect flahing/blinking

  int m = millis();
  fill(m % 200); // velocity of flashs **not working good** maybe my computer..
  rect(25, 25, 555, 555, 30);

  image(et, 130, 125 );
  image(txt, 50, 40);

  image(img, mouseX-img.width/3, mouseY-img.height/3); // here

  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(245,62,224);
  } else {
    noStroke();
    noFill();
  }

  circle(260, 230, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}

void checkButtons() {
  if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

```

And here de p5js. What is happening is that after translate to p5js the little circle (purple) is not a button any more. All the scren you can click and it takes to another page, I am trying to fix it, If you got any cue, please, tell me.  
Thanks

```auto
let et;

let img; //here
let txt;
let boolean = overButton = false;

var myboolean = backwards=false;
var timeLapse=400;
let timeTrack;
let i;

function preload() {
  txt = loadImage('TextoTecFXpng.png');
  et = loadImage('etFXpng.png'); // Load the image into the program
  et.resize(258, 458);
}

function setup() {
 createCanvas(600, 600);

  //rect move
  img = createImage(200, 200); // here
  for (int [i] = 0; i < img.pixels.length; i++) { // here
   var a = map(i, 0, img.pixels.length, 255, 0); //here
    img.pixels[i] = color(255, 204); //here
  }

  //images

}

function draw() {
  background(0); // total canva black

  // rect flahing/blinking

  let m = millis();
  fill(m % 200); // velocity of flashs **not working good** maybe my computer..
  rect(25, 25, 555, 555, 30);

  image(et, 130, 125 );
  image(txt, 50, 40);

  image(img, mouseX-img.width/3, mouseY-img.height/3); // here

  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(245,62,224);
  } else {
    noStroke();
    noFill();
  }

  circle(290, 230, 30);
}
function mouseClicked() {
  {
    window.open('https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7');
  }
}
function mouseMoved() {
  checkButtons();
}

function mouseDragged() {
  checkButtons();
}

function checkButtons() {
  if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

```

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 1, 2022, 1:04pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936/5 "2022-12-01T13:04:09Z")

</div>

> [@vrtx](#):
>
> What is this “profiler” you said

A profiler is a tool that helps you analyse the performance of your code. Browsers like Chrome include a profiler in their dev tools. This is the one I’m using in the screenshot I shared above.

> **[Analyze runtime performance  |  DevTools  |  Chrome for...](https://developer.chrome.com/docs/devtools/performance)**
>
> Learn how to evaluate runtime performance in Chrome DevTools.

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 1, 2022, 1:14pm UTC](https://discourse.processing.org/t/why-is-my-p5js-code-is-too-slow-after-i-upload-it/39936/6 "2022-12-01T13:14:53Z")

</div>

You’re almost there! You just need to fix this in your code:

`let boolean = overButton = false;`

Javascript doesn’t have explicit variable types like Java does. So this line doesn’t do what you think it does.

You can declare your variable this way

`let overButton = false;`

And same for your `backwards` variable.