sterren en planeten live

De schets sterren en draaiende planeten in de P5LIVE editor 

  

AppendChild

appendChild wordt niet gevonden
dit verholpen door de schets in de body te plaatsen
 
 
zelf gemaakte hydra functie "mixen" In een p5.js schets met boxen
 
In een p5.js schets met boxen
geladen in P5LIVE-OFLINE
 
 
zelf gemaakte hydra functie "palet"
 
in een p5.js schets met boxen
 

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  

 

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>