Hi All
Is there a way to set though the code using https://editor.p5js.org/ ?
Regards
Chris
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
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
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
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.
No, it’s good to do it in draw() and use background at the beginning of draw()
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?
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
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.
Yes, Sir.
I don’t work with p5.js but I use the IDE all the time.
Weird how my videos are not playing 
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?
Yes
Warm regards, Chrisir
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;
}
by the way, under the RUN Button >
there is another > sign
Click it and you’ll see the files like “index.html”
Very cool !!. So very nice of you to give me some of your time.
1 Like
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;
}
Thanks. Works.
1 Like
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?
1 Like
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