center html element relative to coordinates

edited November 2014 in p5.js

hello, last few days i got into p5.js and wondered, if there's a way to center an created html element on the canvas. equal to an "text:align" in css or like some sort of "rectMode".

if my way of thinking is going in the wrong direction, please tell me…i'm getting a bit confused by mixing these different languages.


  • edited November 2014

    General formula for C-like languages like Java & JS w/ rectMode(CORNER):
    cx = width - element.width >> 1; cy = height - element.height >> 1

  • thx for the input! im not quite shure whats happening in that line. does the right shift happen before or after the subtraction? i never worked with it before. and it says rectMode(CORNER)?

  • edited November 2014

    Does the right shift happen before or after the subtraction?

    After! Regular arithmetic operations got higher priority! But when in doubt, use parens (). O:-)
    Also, >>1 is merely a quicker integer division by 2: /2. *-:)

    And it says rectMode(CORNER)?

    CORNER is already the default rectMode(). Just being explicitly about it:

  • ah ok, now i get it! thanks alot! ;)

  • But when in doubt, use parens ()

    Good advice - it avoids ambiguity and makes absolutely no difference to the execution speed.

    Also, >>1 is merely a quicker integer division by 2: /2

    Both these are converted to 6 Java byte code instructions by the Java compiler

    Bit shift       Division
    ILOAD 1         ILOAD 1 
    ILOAD 2         ILOAD 2
    ISUB            ISUB
    ICONST_1        ICONST_2
    ISHR            IDIV
    ISTORE 3        ISTORE 3

    the only difference is in the fifth instruction and since are operating on a 2 byte integer then hell will freeze over before you notice the difference (if any). :)

  • hah thank you for the indepht explanation!

    i understand the theory, but it doesn't work right. when i run the p5-code my html element is placed on the left side of the viewport…

    text = createDiv("hello world");

    this should - theoretically - place it in the middle, or am i misusing your advice? :(|)

  • "Also, >>1 is merely a quicker integer division by 2: /2."
    From what I have read recently, in JS, >> 1 is slower than / 2... Because it converts floats to int, do the operation, then convert back to float, or something like that.

  • edited November 2014

    Because it converts floats to int, do the operation, then convert back to float, or something like that.

    Actually, there's only 1 numerical primitive in JS : number: /:)

    It's true that bitwise operators remove anything after the decimal point, just like Java's (int).
    However, the type is still number. There's no extra step to convert it back to some float! [-X

    Moreover, since Java got integer division and JS doesn't, width/2 != width>>1 in JS when width is odd. :P

  • edited November 2014 Answer ✓

    @kempowski, 1st of all a warning: Avoid variable names like the 1s present in Processing API! L-)
    For example text = createDiv("hello world"); would destroy function text() for your whole sketch!
    Rather than text, choose something a little diff. like txt! *-:)

    In P5.JS, we've got function text() which displays some string anywhere within the canvas.
    That's the traditional Processing way of displaying texts btW! O:-) Here's a sketch relying on text():

    However, HTML provides an element called <div>, which we can have some text in it as well.
    Main diff. between text() & createDiv() is that the latter is independent from the sketch's canvas element.
    Therefore, it can be position()ed anywhere in the browser page, even outside our canvas.
    Plus it isn't affected by neither background() nor clear()! So it stays put until we hide() it! :D

    But 1 of the problems I've encountered w/ createDiv() is that its initial width was too big! @-)
    So I've had to use method size() to get a <div>'s width narrower than canvas' width: size(0350, AUTO)
    Also used attribute() & style() in order to get a more æsthetic result: :bz

    // center-html-element-relative-to-coordinates
    createCanvas(300, 200);
    background(0), noStroke(), fill(0200);
    const txt = createDiv('Hello world!').class('header');
    txt.size(0350, AUTO).attribute('align', 'center');
    txt.position(width-txt.width >> 1, height-txt.height >> 1);'font-size', '32px').style('color', '#ff8000');
  • thank you :) i feel kind of stupid because i forgot about the text() function :| the number 0350 doesnt quite make sense to me, why the designing for the elements are in a separate css file, but thx ;)

Sign In or Register to comment.