# 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:** 2
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 11, 2020, 6:21pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/21 "2020-11-11T18:21:19Z")
by the way, I don’t know what level of professionalism you want to achieve… is it for a job or for university or for school…?
anyway, for the light effects, the sun and lens flares you might want to turn to Blender or Photoshop…
you need a bit of post production here… maybe processing is not the right tool here…
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 11, 2020, 6:23pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/22 "2020-11-11T18:23:56Z")
Light effects not needed. Just something simple really. Play a video with some animation in the background. And have some tech to explain the spec of the hardware.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 11, 2020, 6:25pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/23 "2020-11-11T18:25:14Z")
That’s possible
Chrisir
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 11, 2020, 6:57pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/24 "2020-11-11T18:57:23Z")
Do you know if there is a way to come up with co-ordinates of the elipse for shapes? If you have the shape already.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 11, 2020, 7:41pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/25 "2020-11-11T19:41:50Z")
> [@cpw](#):
>
> to come up with co-ordinates of the elipse for shapes?
can you display the shape?
Then you say translate(x,y); before it
when you want to isolate different movements surround the code section with push(); … pop();
see reference: [reference | p5.js](https://p5js.org/reference/)
see examples: [examples | p5.js](https://p5js.org/examples/motion-bounce.html)
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 11, 2020, 7:46pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/26 "2020-11-11T19:46:14Z")
. So the target is now this
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 11, 2020, 7:56pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/27 "2020-11-11T19:56:44Z")
Yeah, cut out the individual shapes you want to move into the canvas:
Console with controller
PS Logo
then you also have the text (lines).
So let’s say, you have 5 independent entities
use image () and text() command
each entity has its x,y like
- text1X, text1Y, text2x,text2y img1x,img1y, img2x,img2y
**How to animate**
Now, the idea is that you work with states!
just a int variable you declare. let state=0;
When state is 0, let’s text Breakthrough moves up (text1Y initially = height+10):
```auto
if(state==0) {
//Breakthrough moves up:
text("Breakthrough ", text1X, text1Y);
text1Y--;
if(text1Y<=120) // Has it arrived?
state=1; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
}
// -----------------------------------------------
else if(state==1) {
//
text("Breakthrough ", text1X, text1Y); // not moving
text("Game", text2X, text2Y); // moving up
text2Y--;
if................
state=2; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
}
```
next steps (states!) would be text3, then the logo, then the console, flying in from different sides
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 11, 2020, 8:17pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/28 "2020-11-11T20:17:17Z")
Great thanks for that. How is it to play a video in a frame with text say on the left?
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 11, 2020, 8:19pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/29 "2020-11-11T20:19:30Z")
Is there a command like CASE?
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 11, 2020, 8:21pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/30 "2020-11-11T20:21:41Z")
only in processing, not js
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 11, 2020, 8:23pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/31 "2020-11-11T20:23:07Z")
> [@cpw](#):
>
> to play a video in a frame with text say on the left?
see [reference | p5.js](https://p5js.org/reference/#/p5/createVideo)
you can just display text above / upon the video
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 12, 2020, 9:35am UTC](https://discourse.processing.org/t/debug-with-editor/25327/32 "2020-11-12T09:35:45Z")
How is it going?
Chrisir
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 12, 2020, 9:50am UTC](https://discourse.processing.org/t/debug-with-editor/25327/33 "2020-11-12T09:50:03Z")
I am creating the mock-up screens so I am clear what needs to be done and then will look to write the code. The idea
would be to animate each product and when you Find out More you get the next detailed page and a video to play.
I am thinking perhaps a toggle for background music.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 12, 2020, 11:32am UTC](https://discourse.processing.org/t/debug-with-editor/25327/34 "2020-11-12T11:32:39Z")
check this out
State is a good approach for your program, also when you want to go to the information screen after mouse pressed: just a new state…
```auto
let state = 0;
let text1X = 30,
text1Y = 450;
let text2X = 30,
text2Y = 450;
let speed1=4;
function setup() {
createCanvas(400, 400);
textSize(44);
}
function draw() {
background(220);
if (state == 0) {
//Breakthrough moves up:
text("Breakthrough ", text1X, text1Y);
text1Y-=speed1;
if (text1Y <= 120) // Has it arrived?
state = 1; // !!
}
// -----------------------------------------------
else if (state == 1) {
//
text("Breakthrough ", text1X, text1Y); // not moving
text("Game", text2X, text2Y); // moving up
text2Y-=speed1;
if (text2Y <= 190)
state = 2; // !!
} else if (state == 2) {
text("Breakthrough ", text1X, text1Y); // not moving
text("Game", text2X, text2Y); //
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 12, 2020, 11:38am UTC](https://discourse.processing.org/t/debug-with-editor/25327/35 "2020-11-12T11:38:48Z")
here you can see how to check the Mouse Button:
see [Counter that increases with mouse click](https://discourse.processing.org/t/counter-that-increases-with-mouse-click/25342/6)
for the coordinates: [https://www.processing.org/tutorials/drawing/](https://www.processing.org/tutorials/drawing/)
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 12, 2020, 12:39pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/36 "2020-11-12T12:39:10Z")
> [@Toggle rulers in sketch processing 3.53](https://discourse.processing.org/t/toggle-rulers-in-sketch-processing-3-53/9474/5):
>
> here is a simple ruler Chrisir String helpText=""; void setup() { size(600, 800); background(255); } void draw() { background(255); showRuler(); } // --------------------------------------------------------------- void showRuler() { int fullLengthLine=28; // X-Ruler stroke(0, 0, 255); // BLUE fill(0, 0, 255); line(0, 0, width, 0); // if (false) for (int x=0; x\<=width; x+=50) { if (x%100==0) { // at 0, 100, 200, 300..... we show text and line …
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 12, 2020, 1:05pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/37 "2020-11-12T13:05:32Z")
I cut and paste the code but could not get it to run. I increased the canvas sizes but didn’t see much change. I will have to spend more time it seems 🙂
---
### Author:  [@cpw](https://discourse.processing.org/u/cpw)
#### Post date: [November 12, 2020, 1:11pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/38 "2020-11-12T13:11:04Z")
Emm. I was thinking rather than break the code down into sections. Can I ask one final favour. Can you add the final text 3 getting my head around the if logic is confusing. I will then to add the logo and graphics as separate states. If you don’t have time that’s fine also. You have been a great help.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 12, 2020, 1:47pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/39 "2020-11-12T13:47:16Z")
See also this [Some Movies I made](https://discourse.processing.org/t/some-movies-i-made/13306/)
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 12, 2020, 2:50pm UTC](https://discourse.processing.org/t/debug-with-editor/25327/40 "2020-11-12T14:50:18Z")
> [@cpw](#):
>
> Can you add the final text 3
**here it is:**
```auto
let state = 0;
let text1X = 30,
text1Y = 450;
let text2X = 30,
text2Y = 450;
let text3X = 30,
text3Y = 450;
let speed1 = 4;
function setup() {
createCanvas(600, 400);
textSize(44);
}
function draw() {
background(220);
if (state == 0) {
//Breakthrough moves up:
text("Breakthrough ", text1X, text1Y);
text1Y = text1Y - speed1;
if (text1Y <= 120) // Has it arrived?
state = 1; // !!
}
// -----------------------------------------------
if (state == 1) {
// Game moves up
text("Breakthrough ", text1X, text1Y); // not moving
text("Game", text2X, text2Y); // moving up
text2Y = text2Y - speed1;
if (text2Y <= 190)
state = 2; // !!
}
//-------------------------------------------------------
if (state == 2) {
// Console moves
text("Breakthrough ", text1X, text1Y); // not moving
text("Game", text2X, text2Y); // not moving
text("Console", text3X, text3Y); // moving up
text3Y = text3Y - speed1;
if (text3Y <= 260)
state = 3; // !!
}
// ------------------------------------------------------
if (state == 3) { // finish this phase
text("Breakthrough ", text1X, text1Y); // not moving
text("Game", text2X, text2Y); //
text("Console", text3X, text3Y); //
}
}
```
[Previous page](https://discourse.processing.org/t/debug-with-editor/25327.md?page=1)
[Next page](https://discourse.processing.org/t/debug-with-editor/25327.md?page=3)