# Debug with Editor

**URL:** <https://discourse.processing.org/t/debug-with-editor/25327>\
**Category:** Coding Questions\
**Created:** [November 10, 2020, 5:34pm UTC](https://discourse.processing.org/t/debug-with-editor/25327 "2020-11-10T17:34:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 10, 2020, 5:34pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/1 "2020-11-10T17:34:26Z")

</div>

Hi All

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

Regards

Chris

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2020, 6:01pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/2 "2020-11-10T18:01:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 10, 2020, 7:09pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/3 "2020-11-10T19:09:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 10, 2020, 9:30pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/4 "2020-11-10T21:30:28Z")

</div>

> [@cpw](#):
>
> I notice that the draw module does not stop but loop. Is that normal?

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:

```auto

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.

```auto
let x=0; 

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

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

```

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 9:49am UTC](https://discourse.processing.org/t/debug-with-editor/25327/5 "2020-11-11T09:49:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 10:52am UTC](https://discourse.processing.org/t/debug-with-editor/25327/6 "2020-11-11T10:52:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 11:01am UTC](https://discourse.processing.org/t/debug-with-editor/25327/7 "2020-11-11T11:01:26Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 11:17am UTC](https://discourse.processing.org/t/debug-with-editor/25327/8 "2020-11-11T11:17:27Z")

</div>

> [@cpw](#):
>
> The text will be redrawn all of the time

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.)

> [@cpw](#):
>
> Processing a full IDE with debug etc and p5.js just a basic editor for users?

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](http://openprocessing.org) for example.

see: [Help! Why I cannot use the P5JS - #2 by GoToLoop](https://discourse.processing.org/t/help-why-i-cannot-use-the-p5js/18067/2)

> [@cpw](#):
>
> How does the whole thing run in the real world via an index.html sitting on a site?

I never did it but you want to read this (imho): [get started | p5.js](https://p5js.org/get-started/#settingUp)

Chrisir

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 12:45pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/9 "2020-11-11T12:45:31Z")

</div>

Does this [https://hello.processing.org/editor/](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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 1:07pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/10 "2020-11-11T13:07:00Z")

</div>

> [@cpw](#):
>
> Does this [Processing Hour of Code | Editor](https://hello.processing.org/editor/) video work for you?

Yes, Sir.

> [@cpw](#):
>
> Seems like the processing software IDE with error correction and line numbers would be best.

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

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 1:14pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/11 "2020-11-11T13:14:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 1:17pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/12 "2020-11-11T13:17:22Z")

</div>

> [@cpw](#):
>
> So you use the downloaded version of Processing and not the simple editor?

Yes

Warm regards, Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 1:49pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/13 "2020-11-11T13:49:35Z")

</div>

rotation text 2D

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 1:56pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/14 "2020-11-11T13:56:22Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 1:56pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/15 "2020-11-11T13:56:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 2:26pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/16 "2020-11-11T14:26:29Z")

</div>

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…))

- present: [https://editor.p5js.org/Chrisir10/present/eHKVG62AK](https://editor.p5js.org/Chrisir10/present/eHKVG62AK)

- edit: [https://editor.p5js.org/Chrisir10/sketches/eHKVG62AK](https://editor.p5js.org/Chrisir10/sketches/eHKVG62AK)

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

Chrisir

```auto
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;

}

```

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 3:02pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/17 "2020-11-11T15:02:44Z")

</div>

Thanks. Works.

![image001.jpg](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2485d26919316b1d80aa60f5ca8e2cb5bc0275fe.jpeg)

---

<div class="post-metadata">

**Author:** ![cpw](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@cpw](https://discourse.processing.org/u/cpw)\
**Post date:** [November 11, 2020, 5:09pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/18 "2020-11-11T17:09:09Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/17aa671e4a6f2ec8f96bc32b09d4fe5bfd76f666.jpeg)

![image001.jpg](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2485d26919316b1d80aa60f5ca8e2cb5bc0275fe.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 5:50pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/19 "2020-11-11T17:50:06Z")

</div>

> [@cpw](#):
>
> How would I go about producing this

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()?](https://discourse.processing.org/t/incremetly-speed-millis/25293) (processing, not p5 but easy to convert)

> [@cpw](#):
>
> Having the stars move and console

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

> [@cpw](#):
>
> console etc including text?

when you want to move them together you can use :

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

```

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [November 11, 2020, 6:05pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/20 "2020-11-11T18:05:48Z")

</div>

Interesting note for you: [P5j or Processing for Education?](https://discourse.processing.org/t/p5j-or-processing-for-education/25347/2)

[Next page](https://discourse.processing.org/t/debug-with-editor/25327.md?page=2)