Live coding visuals in de webeditor van Olivia Jack. terug naar de inleiding
osc(30,0.02,6).colorama(0.09).kaleid(4).kaleid(88).kaleid(10).out(o0) naar de animatie in fullscreen
Live coding visuals
enkele weblinks: basis hydra functies , hydra book , hydra op github , Geikha tutorial "what is hydra?" , Thomas Jourdan tutorial
enkele opmerkingen
ivm met CORS policy is het niet mogelijk om images , video en sound bestanden op deze server ,via de webeditor van Olivia, te tonen.
Door op de knop met de hyda code te klikken wordt de webeditor geopend en wordt de code uitgevoerd
In onderstaande hydra wordt kaleid 3 keer na elkaar uitgevoerd
kaleid(88) zorgt voor de cirkelvormen
kaleid(4) zorgt er voor dat de ellipsen in een vierkant zijn gegroepeerd
kaleid(10) zorgt voor de 10 hoek , de 10 punten, die vanuit het centrum groter worden
kaleid(4) na colorama plaatsen geeft een kartelend blok effect, zie de animatie in de header
1) osc(30,0.02,6).colorama(0.09).kaleid(88).kaleid(4).kaleid(10).out(o0)
In deze animatie wordt de animatie sinusvormig naar voren en achter bewogen. Door time*0.08 te veranderen in time*0.8 zie je het effect versneld.
In kaleid staat een reeks van 5 argumenten (3,5,7,8,60) de effecten van deze getallen worden met de snelheid fast(0.5) na elkaar getoont.
Als kaleid(60) aan de beurt is zie je cirkels.
2) noise(() =>5+80*Math.abs(Math.sin(time*0.08)),0.2).color(-8, -2,1).colorama().kaleid([3,5,7,8,60].fast(0.5)).scale(10.5).out()
In deze animatie zie je het voronoi- ipv het noise effect
3) voronoi(20,0.05,0.1).color(-20,1,20).colorama(0.5).kaleid([3,5,7,9,80].fast(0.05)).scale(4.5).out()
Hydra maakt gebruik van de javaScript lib "Meyda" en heeft een voor gedefineerd object "a"
De audio berekeningen gebruiken Fast Fourier Transform (fft)
Zie het effect van een lage bijv "O" toon en een hoge "S" toon.
tonenspectrum
Met a.show() zie je rechtsonder een staafdiagram die het volume van de verschillende tonen aangeeft.
Met a.setBins(5) is het beschikbare tonenspectrum 5 (number of fft bins) toongebieden. Je zie rechtsonder 5 bewegende staafjes onder een lijn.
De getallen in het a.fft[] array moeten altijd lager zijn dan het beschikbare tonenspectrum , hier 5
Door a.setSmooth(.85); toe te voegen wordt het beeld wat rustiger.
een hydra met modulateRotate(shape(10,0,04)