Fixed position with createGraphics

p5.js Beginners
1

wanna create an always on top fixed position ellipse with createGraphics without being scrolled out of screen, tried position(0,0,'fixed'); but doesn’t work, code below, ideas? thanks.

let dot;

function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.position(0,0);
}

function draw() {
  background(220);
  dotDisplay();
}

function dotDisplay(){
  dot.background(0,255);
  fill(255);
  dot.ellipse(25,25,50, 50);
  image(dot,0,0,50, 50);
  dot.position('fixed');
}
2

Hi @juju
Not sure what you mean by “scrolled out of screen”, but with a canvas height o 2000, it’s very likely that your browser window has to be scrolled. The PGraphics is fixed to the canvas.

3

I created height of 2000 on purpose to demonstrate when scroll bar appears, I want that PGraphics to always stay at the same position without being affected by the scroll bar.

4

kind of like the * graphic on the left of this P5 page always stay at the same place even when I scroll up and down.

6

The string 'fixed' is valid only as method position()'s 3rd parameter:
reference | p5.js

You’re using image() in order to display your dot p5.Element object:
reference | p5.js

That means those coordinates are relative to the sketch’s canvas regardless which position() you set.

If you wanna move your dot object relative to some other DOM element you’re gonna need to invoke its method show() 1st:
reference | p5.js

1 Like
7

Thanks for the reply. What if it’s like the animation below? How can I make the dot stay?

let clockAlpha;

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

function draw() {
  background(220);
  timeDotDisplay();
}

  function timeDotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 0;
    }
    if (s % 2 != 0) {
      clockAlpha = 255;
    }
    fill(0, clockAlpha);
    noStroke();
    ellipse(25, 100, 50);
    }
  }
8

Hi GoToLoop, thanks for pointing the direction. I managed to make the dot stay, but the fill(), noStroke() & flashing animation like the sketch above doesn’t seem to work, any idea? and it seems if I use image() after dot.ellipse(), there will be two circles. Does that mean I can use createGraphics() without using image() to display the ellipse in this case? Thanks.

let dot;
let clockAlpha;
function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.style('display', 'none');
  dot.show();
  dot.position(0,0,'fixed');
}

function draw() {
  background(220);
  dotDisplay();
}

function dotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 0;
    }
    if (s % 2 != 0) {
      clockAlpha = 255;
    }
  noStroke();
  fill(0, clockAlpha);    
  dot.ellipse(25,25,50); 
  // image(dot,0,0,50, 50);
}
9

It doesn’t seem like you’re invoking those functions as methods over your p5.Graphics dot object. :see_no_evil:

Curiously you call ellipse() as a dot method at dot.ellipse(25,25,50); but not for the 1s you’ve mentioned above. :roll_eyes:

That’s exactly what I’ve implied when I had stated this: :wink:

BtW the p5.Graphics object returned by createGraphics() is a wrapper for the <canvas> element: :art:

Which is directly accessible via its p5.Element inherited property elt: :nerd_face:
reference | p5.js

10

Aww! Got it :sweat_smile: thank you. I feel like switching from Processing to P5 is just like learning another language … it’s all over again… glad this community exists.
One last question, the clockAlpha only works as the first argument in fill() but not the second (as alpha) I checked the log it’s switching between 255 and 0 no problem, know why?

let dot;
let clockAlpha;
function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.style('display', 'none');
  dot.show();
  dot.position(0,0,'fixed');
}

function draw() {
  background(255);
  dotDisplay();
}

function dotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 0;
    }
    if (s % 2 != 0) {
      clockAlpha = 255;
    }
  dot.noStroke();
  dot.fill(0, clockAlpha); // not working
  // dot.fill(clockAlpha); // works
  dot.ellipse(25,25,50); 
  console.log(clockAlpha);
}
11

According to color()'s reference the 2 parameters overloaded version the 1st is a gray value and the 2nd is an alpha value:
reference | p5.js

12

Got it, the background() in draw only clear the sketch background, I need a background for the dot object for it to work. Thank you GoToLoop.

let dot;
let clockAlpha;

function setup() {
  createCanvas(400, 2000);
  dot = createGraphics(50,50);
  dot.style('display', 'none');
  dot.show();
  dot.position(0,0,'fixed');
}

function draw() {
  background(255);
  dotDisplay();
}

function dotDisplay(){
    let s = second();
    if (s % 2 === 0) {
      clockAlpha = 255;
    }
    if (s % 2 != 0) {
      clockAlpha = 0;
    }
  dot.noStroke();
  dot.background(255);
  dot.fill(0,clockAlpha); 
  dot.ellipse(25,25,50); 
}
13

Same for me. I’ve fiddled around with Processing.java for some years now, but only recently with P5.js
Although as a library the functions and structure seem similar, they are as language completely different. My posted answer was clearly wrong and I deleted it. But still, as an exercise, I’m trying to do it in html and css.
In this code, the text is fixed, but I would like to link it the same way to an image.
Any idea?

14

That was actually easy. I fixed the code above.