Debug with Editor

p5.js Coding Questions
21

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…

1 Like
22

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.

23

That’s possible

Chrisir

24

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.

25

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

see examples: examples | p5.js

26

. So the target is now this

image001.jpg
image001.jpg822×534 24.1 KB

image001.jpg

27

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


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

28

Great thanks for that. How is it to play a video in a frame with text say on the left?

29

Is there a command like CASE?

30

only in processing, not js

31

see reference | p5.js

you can just display text above / upon the video

32

How is it going?

Chrisir

33

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.

image001.jpg
image001.jpg752×490 22.1 KB

image001.jpg

1 Like
34

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…


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); // 
  }
}
35

here you can see how to check the Mouse Button:

see Counter that increases with mouse click

for the coordinates: https://www.processing.org/tutorials/drawing/

36
37

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 :slight_smile:

38

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.

39

See also this Some Movies I made

40

here it is:


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

}