center html element relative to coordinates

kempowski

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.

GoToLoop

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

kempowski

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

GoToLoop

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:
http://processing.org/reference/rectMode_.html

kempowski

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

quark

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

kempowski

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");
text.position((windowWidth-text.width)/2,200);
text.class("header");

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

PhiLho

"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.

GoToLoop

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: /:)
https://developer.mozilla.org/en-US/docs/Glossary/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

GoToLoop

@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():
http://forum.processing.org/two/discussion/7147/some-simple-pulse-equations-using-trig-

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

// forum.processing.org/two/discussion/8254/
// 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);

txt.style('font-size', '32px').style('color', '#ff8000');

kempowski

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