Debug with Editor

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.

image001.jpg

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?

image001.jpg

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

Interesting note for you: P5j or Processing for Education?

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

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.

That’s possible

Chrisir

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.

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: https://p5js.org/reference/

see examples: https://p5js.org/examples/motion-bounce.html

. So the target is now this

image001.jpg

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

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

Is there a command like CASE?

only in processing, not js

see https://p5js.org/reference/#/p5/createVideo

you can just display text above / upon the video

How is it going?

Chrisir

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

1 Like