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

p5.js Beginners
1

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;

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;


 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/

2

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

image
image1920×857 119 KB

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

4 Likes
3

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

4

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.

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

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;
  }
}
5

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.

2 Likes
6

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.

2 Likes