cables-gl / cables

cables is a tool for creating beautiful interactive content
https://cables.gl
MIT License
351 stars 15 forks source link

rectangle texture coords / rectangle texture aspect ratio #3069

Closed tastez closed 2 years ago

tastez commented 2 years ago

would be nice if circletexture has a built in alpha. Currently it draws a circle on black background

tastez commented 2 years ago

clarification - circle texture is great when overlayed on existing imagecompose stack, but by itself in an empty imagecompose stack it won't allow you to set the imagecompose op to transparent.

steam0r commented 2 years ago

will be new version, please collect other issues with CircleTexture

pandrr commented 2 years ago

i also guess it should have better aspect ratio handling ?

pandrr commented 2 years ago

hmm should we do the aspect ratio thing like in rectangleTexture ?

pandrr commented 2 years ago

https://dev.cables.gl/edit/pZ4zLW

IMHO

so:

pandrr commented 2 years ago
tastez commented 2 years ago

rectangletexture aspect ratio = this is to toggle the rectangle to look like the size you've set in parameters regardless of ImageCompose texture dimensions? so like a square would look like a square on a rectangular texture?

and this would also be the paramter added to shapes2d/circletexture right? I am not sure how to make it work with rectangletexture... i expected it to just correct the look of the rectangle inside a whatever dimensions imagecompose.

tastez commented 2 years ago

some testing for aspect ratio and coords

aspectratio/coordinate ops:

like discussed, all of this can be done with maprange but seems such a common thing to switch all the time so makes sense to have in param panels

aspectratio op, letterbox op, viewport2 op, fullscreenrectangle op with aspect ratio toggle -seem to fight with mouse op normalized coordinates so can get pretty confusing example with dev.fullscreenrectangle op aspect ratio toggled on https://dev.cables.gl/edit/com_LW

-mouse op doesnt consider the aspect ratio modification

force canvas size op -seems perfect to me, coordinates from mouse work as expected

interactive rectangle -outputs 0-1 coordinates -would be nice to have toggle for -1 to 1 range -would be nice to have y flip example setup with rectangle op to show that y flip is required https://dev.cables.gl/edit/Gw5NLW example setup with circletexture and shapes2d with maprange -1 to 1 https://dev.cables.gl/edit/81MYLW

imagecompose ops:

rectangle texture ~-aspect ratio functionality unclear~ -aspect ratio toggle works only if not first op in imagecompose stack! example with rectangletexture with aspect ratio on and imagecompose using viewport size. No other op before it, so toggle doesn't work. https://dev.cables.gl/edit/QeW0MW

-coords need to be changed to easily work with mouse op. right now they are 0 to 1, not -1 to 1 -need to untoggle y flip on mouse op to get correct y position, not cohesive with other ops in this list.

circle texture - auto aspect takes over if not first op in imagecompose!

shapes2d texture - auto aspect takes over if not first op in imagecompose! -shape is automatically aspect corrected only if not the first op in imagecompose stack? example of behavior (removing circle above the 2nd one, will squish it) https://dev.cables.gl/edit/M4WHMW

-color alpha doesn't work

-normalized mouse coords don't work on Y axis - they seem to change depending on aspect of canvas example showing Y coord issue https://dev.cables.gl/edit/CiTEMW

bulgepinch -coords need to be changed to easily work with mouse op. right now they are 0 to 1, not -1 to 1 -aspect ratio toggle would be nice since it is a circle bulge that gets stretched otherwise example patch https://dev.cables.gl/edit/UMHhMW

twirl -coords need to be changed to easily work with mouse op. right now they are 0 to 1, not -1 to 1 -aspect ratio toggle would be nice since it is a circle bulge that gets stretched otherwise

zoomblur -x,y center params are 0 to 1, and Y is unflipped, would be nice to have it similar to other ops

kaleidoscope -center param coords are 0 to 1, y is flipped.

scaletexture -center coords are 0-1 -offset is seems to be -1 to 1 but ui element prevents going into one direction, since it allows only 0-1 -direction parameter and center seem flipped which is a brain ache (flip x/y toggle?)

scrolltexture, fbmnoise, layernoise, pixelnoise, worleynoise, glitchnoise, polkadotnoise, plasma -is good with normalized mouse op but like scale, direction parameter is flipped from what is expected (flip x/y toggle?)

gridtexture, lensscratches, hexagonnoise, valuenoise, perlinnoise, pixeldisplacement, simplexnoise,cellularnoise -works as expected attached to normalized mouse op (flip y on by default)

barreldistortion -aspect toggle would be nice

vignette -aspect here is a slider which is uncommon to other ops -autoaspect could be nice toget a circle

tastez commented 2 years ago

ohhh wow found out how to have aspect correct circle and shapes 2d and rectangle (its sort of not working) if you have something before the op in the imagecompose, then aspect correction works for both circle and shapes2d. rectangle aspect ratio toggle works, but the rectangle doesnt center.

if there is nothing before these ops then the shape is stretched. https://dev.cables.gl/edit/RI0JMW

tastez commented 2 years ago

test with imagecompose 2.0

pandrr commented 2 years ago

change positioning to -1 to 1: