live coding inleiding

live coding inleiding. terug naar de startpagina

mbv live coding zie je tijdens het coderen direct het effect. Deze effecten worden visuals genoemd

Visuals worden vaak gecombineerd met video , camera beelden en audio.

De visuals worden vaak, door een VJ (Visual Jockey), op dance events real time ontwikkeld

In deze rubriek een aantal schetsen met hydra visuals in p5.js met het hydra-synth.js script

Door het gebruik van Hydra in p5.js wordt de 3D functionaliteit van p5.js toegevoegd bijv mbv de p5.js 3D primitieven.

De hydra functies zijn eigenlijk shaders (zie de rubriek shaders in glsl) deze shaders staan in hydra-synth.js vanaf regel 2165

Voor de schetsen heb ik oa gebruik gemaakt van de hydra voorbeelden in de door Ted Davis ontwikkelden editor P5LIVE

Je kan mbv deze editor on line experimenteren en je kan de editor via github downloaden

Na downloaden en uitpakken van de editor In Ubuntu in de map P5LIVE-main het terminal venster openen.

De python server starten met het commando: python -m SimpleHTTPServer 5000

De Bowser starten met http://localhost:5000

1	negen simpele visuals in hydra
2	visual met box en buizen
3	negen visual met box en buizen
4	zelf gemaakte hydra functie
5	negen hydra webcam animaties

Het index html bestand met hydra-synth.js.

De schets moet in de body staan dan ben je er zeker van dat de scripts voor de schets volledig zijn geladen

Als de schets in de head staat kan de foutmelding ontstaan dat een DOM element niet leesbaar is.

Als je de schets in de p5LIVE editor wilt laden moet hydra-synth.js in de schets staan als:

let libs = ['includes/libs/hydra-synth.js'];

 
<!DOCTYPE html>
<html>
 <head>
    <script language="javascript"type="text/javascript"src="../lib/p5.min.js"></script>
    <script language="javascript"type="text/javascript"src="../lib/hydra-synth.js"></script>
  </head>
  <body>
    <script language="javascript"type="text/javascript"src="sketch.js"></script>
 </body>
</html>

Flevopink