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

P5LIVE-OFLINE installeren

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	tien visual met box en buizen
4	negen hydra webcam animaties
5	zelf gemaakte hydra functie	mixen op 2 boxen in p5.js
6	zelf gemaakte hydra functie	palet op 2 boxen in p5.js
7	vijf visuals met torus, sphere en parallellogrammen
8	Hydra functie rectpalet met cirkels en rechhoeken	met animatie zelf gemaakte hydra fucncties
9	3d pijlen sphere, boxen, torus en conus
10	live coding in de webeditor	van Olivia Jack

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