Debug with Editor

p5.js Coding Questions
1

Hi All

Is there a way to set though the code using https://editor.p5js.org/ ?

Regards

Chris

2

Do you mean step through the code?

I always use print("here"); to check whether p5 is reaching a certain section in the code.

  • Or print(i); to get a variable value.

Hey, and welcome to the processing forum!

Great to have you here!

Warm regards,

Chrisir

3

Hey thanks for this. That makes sense I should have known that. I notice that the draw module does not stop but loop. Is that normal?

1 Like
4

That’s one of the core concepts of Processing and draw().

Because only with this automatically looping of the function draw() you can make animations!

like here:


let x=0; 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circle(x,100, 30);
  x+=4;
}

To stop draw() from looping

To stop draw() from looping call noLoop().

Here is an example where we have a condition (with if) to stop draw() being called again and again.

let x=0; 

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circle(x,100, 30);
  x+=4;
  if(x>200)
    noLoop();
}
2 Likes
5

Thanks for this. So if I wanted to display text would this need to be done outside of the draw() as it would be repeated.

6

No, it’s good to do it in draw() and use background at the beginning of draw()

7

Very interesting. The text will be redrawn all of the time then I guess. Now I am a bit confused. Processing and p5.js. Is Processing a full IDE with debug etc and p5.js just a basic editor for users?
Sorry to be a pain. How does the whole thing run in the real world via an index.html sitting on a site?

8

Correct. That’s good.

(When you are very advanced and looking for trouble and want to reduce load for your processor, try noLoop() as described. I never do.)

That’s right. The IDE has different modes (Java, python…), p5.js is among them. See upper right corner in the IDE where it says JAVA.

But there are different websites offering coding in p5.js as an editor, like openprocessing.org for example.

see: Help! Why I cannot use the P5JS - #2 by GoToLoop

I never did it but you want to read this (imho): get started | p5.js

Chrisir

1 Like
9

Does this https://hello.processing.org/editor/ video work for you? I had to go to Vimeo directly. Still trying to understand how everything fits togerther. Seems like the processing software IDE with error correction and line numbers would be best.

10

Yes, Sir.

I don’t work with p5.js but I use the IDE all the time.

11

Weird how my videos are not playing :frowning: So you use the downloaded version of Processing and not the simple editor? Is it possible to have a chat with you on Skype or Discord?

12

Yes

Warm regards, Chrisir

13

rotation text 2D


let angle=0.0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  translate (200,200);
  rotate ( angle );
  //textMode(CENTER);
  text("Hello", 0, 0)
  
  angle += 0.0188;
}
14

by the way, under the RUN Button >
there is another > sign

Click it and you’ll see the files like “index.html”

15

Very cool !!. So very nice of you to give me some of your time.

1 Like
16

here a 3D rotation

actually, I don’t know how to upload a font into the Sketch / browser

(my work-around was to hijack another Sketch that had a font in it; so Login and then File | Duplicate (modify, save, share…))

(ah, I found it: you must be logged in https://editor.p5js.org to upload a file (font). Bad documented…)

Chrisir

let font;
let angle = 0.0;

function preload() {
  font = loadFont('OpenSans-SemiBold.ttf');
  }

function setup() {
  createCanvas(600, 400, WEBGL);
  textFont(font);
  textSize(48);
}

function draw() {
  background(220);

  // render the text before the rectangle 
  push();
  stroke(0);
  fill(0);
  translate(40, -25, 40);
  rotateY(angle);
  text("Hello", 0, 50);
  pop();
  
  angle += 0.0188;

}
17

Thanks. Works.

image001.jpg

1 Like
18

Hi

How would I go about producing this. Having the stars move and console etc including text? I would like to use the Watch Now to play videos in a frame?

image001.jpg
image001.jpg1199Ă—419 33.9 KB

image001.jpg

1 Like
19

Err…complex.

There are so many elements!

Easiest when you just take this image as background. Done.

When you want the stars to move,

  • make the sky black
  • use my ball code for each star

for a star field see Incremetly speed millis()? (processing, not p5 but easy to convert)

maybe cut out the console so you have another image that can walk over the background

when you want to move them together you can use :

push();
translate(consoleX, 0); 
// display console (with image()) and text (with text()) here
pop();

Chrisir

20

Interesting note for you: P5j or Processing for Education?