p5.dom CSS transforms

[shiffman]

I'm working on a set of examples for the "a to z" class at ITP and am doing a lot of CSS transformations on divs. This results in writing lots of awkward code like.

var div = createDiv('text');
div.style('transform','translate(' + x + 'px) rotate('+angle+'deg)');

I think it might be nice to have:

div.translate(x,y);
div.rotate(angle);

This would also help deal with the fact that for cross-browser compatibility I should really be doing multiple calls to:

-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg); 
transform: rotate(45deg);

Not to mention all my values are in radians so there's another set of conversion happening in my code.

I'd be happy to work on wrapping all this up nicely. Thoughts on usefulness? (Also I have to admit that I'm on about day 2 of working with CSS transforms so I don't really know what I'm talking about.)

[studioijeoma]

I just ran into this issue too. I think it'd be very useful.

I also think it'd be useful to be able to transform p5.elements together w/ basic shapes like

push()
transform(...)
rotate(...)
rect(....)
div.draw()
pop()

im assuming div's values are cached... and it will only modify the divs css just on change not update/draw.

[futuremarc]

Hi @ekeneijeoma, this is a good point. Should push() and pop() be tracking added element styles as well as canvas styles? I think it does make sense.

Also, I guess the default unit for rotate() should be in radians?

[shiffman]

I'm not sure if push() and pop() apply to CSS transforms since, by definition, they nest according to the DOM, rather than order of execution as in canvas / opengl.

The two options as I see it for units are:

• Stick with CSS defaults which I believe are always degrees or
• Go with current p5 angleMode() state.

I would say let's go with angleMode() since these are special p5 functions. @lmccart what do you think?

All this said, I don't really have experience with CSS transforms so could be way off base. Here are two nice resources / sets of examples for reference.

http://desandro.github.io/3dtransforms/
http://davidwalsh.name/3d-transforms/

[futuremarc]

closed with 9015ffe