Extensions for Hydra.
Inspired by Ritchse hydra-extensions.
You can load extensions into Hydra with the following syntax:
await loadScript("https://hydrated.savamala.top/hydra-gradient.js")
These are functions that play with coordinates and geometry, specially with polar coordinates.
fit is just a shortcut for scale(1,1,()=>window.innerWidth/window.innerHeight), so you don’t need to write all this code just to correct the screen geometry.
Examples:
shape(4).fit().out()
spiral converts anything into a spiral, centered on the screen center. It works by rotating each pixel by a different degree, depending on the distance to the center.
It receives 3 parameters:
at0: the rotation applied at distance 0.at1: the rotation applied at distance 1. All other values are linearly interpolated from these 2.speed: the rotation applied through time, just like in rotate.Examples:
osc(40,0,0).spiral().out()
osc(30,0,0.9).spiral(0,20,0.2).fit().out()
voronoi(5,1).spiral(0,6,-0.1).rotate(0,0.2).scale(0.5).fit().out()
Like spiral, radial applies a circular transformation, but in this case, it modifies the radius (i.e. the distance to the center), depending on the angle.
It works by dividing the whole circumference in several parts, and applying the same change to each part.
It receives 3 parameters:
parts: how many parts will be computed.from: change in the radius to the border of each parts. It’s multiplicative, so 1 means keeping the same distance, and 2 doubling it.to: change in the radius in the middle of each part. All other values will be calculated using a modified sine.Examples:
osc().radial().out()
noise().radial(5,1,0.1).out()
osc(40,0).modulate(noise(8,0.2).radial()).out()
toPolar translate Cartesian coordinates to polar coordinates. Vertical lines will become circles, and horizontal lines will become lines converging to the center.
Examples:
osc(80,0,0).toPolar().fit().out()
osc(20,0,0).rotate(Math.PI/2).toPolar().fit().out()
voronoi(8,3).color(0.7,0,0.7).toPolar().out()
toCartesian is the exact opposite to toPolar: it converts from polar coordinates to Cartesian coordinates. Applying toPolar and then toCartesian is the same that doing nothing.
Examples:
osc().spiral(0,Math.PI*6).toCartesian().out()
osc().toPolar().radial(24,0.5,2).toCartesian().out()
shape(4).repeat(8,4).scrollX(0,0.1).toPolar().spiral().toCartesian().spiral(8).fit().out()
hydra-gradient:Also, try combining hydra-geometry with hydra-gradient:
gradient2(1,0,0,0,0,1,-0.2).toPolar().radial(12,0.1,0.2).fit().out()
gradient3().spiral(0,12,-0.2).scale(0.4).kaleid(8).repeat(8,4).out()
These are functions to make gradients with the specified colors.
Use gradient2 to create a gradient between two colors:
gradient2(r0=1,g0=0,b0=,r1=0,g1=0,b1=1,speed=0)
Examples:
gradient2(1,0,0,0.8,0,0.8,0).out() creates a gradient from red to purple.
gradient2(1,0,0,0.8,0,0.8,2).out() the same gradient, but now animated.
gradient2(1,0,0,1,0,1,2).scale(0.4).kaleid(100).out().
gradient2_ is the same as gradient2 but colors are expressed as arrays: gradient2_([1,0,0],[0.8,0,0.8],2).out().
Use gradient3 to create a gradient involving three colors:
gradient3(r0=1,g0=0,b0=,r1=0,g1=0,b1=1,r2=0,g2=1,b2=0,speed=0)
Examples:
gradient3(1,0,1,0,1,0,0,0,1,0).out()
gradient3(0.8,0,1,0.7,0.7,0,1,0,0,0.2).scale(0.2).out()
gradient3(0.8,0,1,0.7,0.7,0,1,0,0,0.2).scale(0.2)
.blend(gradient2(0,0.6,0,0.7,0,0.3,-0.4)).out()
gradient3_ is the same as gradient3 but colors are expressed as arrays: gradient3_([0.8,0,1],[0.7,0.7,0],[1,0,0],0.2).scale(0.2).out().