digitale kunst geinspireerd door kandinsky

 

p5.js meetup

p5.js meetup

 

Alles werkt perfect 

Alles werkt perfect

lees ook zijn artikel "Gepakt door de datagiganten"

 

 

 

 

deel van de code van een indrukwekkend digitaal kunstewerk

deel van de code van een indrukwekkend digitaal kunstewerk

 

resten van een boeing 737 <br> was dit ook gebeurt als het vliegtuig open source was geweesd ?</br>

resten van een boeing 737 was dit ook gebeurd als
het vliegtuig open source was geweest ?
 
 1)  Inleiding open source.
      Over open source en open source gemeenschappen.   Je kan een breiklupje ook een open source gemeenschap noemen.

      zie ook de open source gedragscode van de P5.js gemeenschap 

1a) aantekeningen tbv de schoolklasjes

      Waarschuwing over het downloaden van open source software.
      Processing "Mondriaan" voorbeeld tonen, in de pde plakken, effecten tonen die ontstaan door het veranderen van de code.

      Misschien is sterren en draaiende planeten  ook euk om naar processing te copieeren ? met toets "o" geef je een reset

      Naar de eigen open processing pagina verschil tussen generatief en niet generatief tonen, demo effecten die ontstaan door verandering van de code
      Naar voorbeelden geinspireerd door   Paul Klee KandinskyPiet Mondriaan en het  Bauhaus

      open processing klasje laten zien.  Ook open source hardware laten zien?

2)   inleiding over WebGL

     Ontwikkeling van het internet en de browser
        1) alleen teksten.
        2) teksten met foto's.  
        3) teksten foto's, video's en geluid
        4) teksten foto's, video's geluid en interactief te beinvloeden  3D animaties, zoals webgames, virtual en augmented reality.

            Om van deze internet mogelijkheden gebruik te maken moet je browser beschikken over extra software, voor 3D animaties is dat WebGL.

3)   wat is WebGL ?

      WebGL is een open source software bibliotheek geinstalleerd in de meeste webbrowsers .WebGL is ontwikkeld door de Khronos groep,
      een groep in 2000 gesticht door verschillende bedrijven.

      WebGL schetsen kunnen bestaan uit java en shader code geschreven in GLSL (Graphic Library Shader Language zie paragraaf 7)

      Een Webgl framework is een sofware pakket om op een simpele manier interactieve 3d animaties mbv WebGL te maken.

      Zie de lijst van WEBGL frameworks.   Noemenswaardig zijn THREE.js, (uitspraak three dot js, zie paragraaf 6) A-frame (werkt direct in VR) en Unity.

4)   Websites die gebruik maken van WebGL

      3d animaties gemaakt met P5.js maken ook gebruik van WebGL (zie mijn 3d animatie met 12 parallellogrammen)

      Website met WEBGL toepassingen   alteredqualia   niet alles wat daar getoond wordt is open source. 

      De gezichten vloeien in elkaar over (gemaakt door morph) Een project ontwikkeld in het facerecognition lab van  Lisa de Bruine
      (De vele publicaties mevr de Bruine roepen bij mij evenzovele vragen op !)
      Je kan door muisklikken de veranderingen stoppen!! De code die zij gebruikt is open source zie haar github pagina
      Het walking in the air voorbeeld.  Let op de bewegingen van het mannetje!  

      In dit voorbeeld wordt gebruik gemaakt van:

         1) THREE.js,  Het "mannetje" treed ook op in het Three.js voorbeeld Shading physical en is een model met de naam Sittingbox.glb
         2)  De schets maakt gebruik  van GLSL (Graphic Library Shader language) coderegels, bedacht door de webgame ontwikkelaars  ArKano22 en martinsh
         3)  De "walking in the air" video van de Nasa zelfs onze Andre heeft er aan meegewerkt
 

5)   A-frame een Webgl, VR framework

      A_Frame is een Webgl Framework om VR (virtual reality) animaties te bouwen en is gebasseerd op Three.js.
      De VR ervaringen met A-Frame werken met Vive, Rift, Daydream, GearVR en cardboard (hoe dat precies gaat weet ik niet) info over VR headsets
      A-frame, met veel voorbeelden, downloaden van Github.  Op Github staat ook de A-frame-inspector, een zeer uitgebreide grafische interface.
      Zo kan je aan de slag zonder te coderen. Over het gebruik van de inspector is er een zeer uitgebreid documentatie   beschikbaar.
      De meeste schetsen werken met het aframe.min.js script. A-Frame beschikt niet over een eigen forum
      Voor vragen en antwoorden kan je gebruik maken van stackoverflow.  De A-Frame painter om in 3d te schilderen is leuk. zie de blog met instructies

      De website van de painter. Omdat de code van de painter (open source) beschikbaar is kan. Je kan de painter ook op je localhost zetten.

 

6)   Three.js als voorbeeld van de structuur van de website van een open source gemeenschap.

         Naar de THREE.JS website   zie ook de site van Mr Doob, de initatiefnemer van Three.js  en de three.js rubriek op deze site

         1) Documentatie met voorbeelden
         2) leden van de gemeenschap hebben contact met elkaar via  twitter en een Forum  (showcases met veel lockdown projecten),
            zie het covid project van Theo op ladybug,  Endlessly generated psychedelic van de russische groep Aquarius
            en de projecten van prisonner 849 (Paul West) en de door Hofke verzamelde showcases Met linken naar codepen
         3) De gemeenschap bestaat uit gebruikers (hier 38439) en deelnemers (hier 1352)
         4) De broncode documentatie en de code van de voorbeelden zijn via github te downloaden

         5) T shirt met logo te koop

      Voorbeeld van websites op de startpagina van Three.js
         1)  De site van amnesty international, met mbv getuigen samegestelde Saydnaya gevangenis in 3d, een voorbeeld van forensische architectuur.
         2)  Cine shader hier kan je de in shadertoy (zie paragraaf 7) gemaakte shaders in een bioscoop omgeving tonen en editen.

         3)  De site Hackery, Math & Design van Steven Wittens met leuke animaties en achtergrond artikelen.

       Three.js voorbeelden waarvan de code beschikbaar is
         1) Een schets om met kogeltjes zachte vormen weg te schieten. De schets maakt gebruik van het script ammo.js (Avoided Making My Own)
         2) Het laden van verschillende typen 3D bestanden voorbeeld van het glTF helm bestand  glTF is een van de honderden 3D bestand formaten.
         3) De Primary Ion Drive  van Mike Murdock 

         4) postprocessing rgb halftone van Xavier Burrow hij heeft ook met Three.js het open source virtuele museum Closed on monday gemaakt.

7)   Het gebruik van shaders in Three.js

      Shaders worden gemaakt met  openGLSL  (openGL Shader Language)  en zijn geschikt om de GPU (graphische processor unit) parallel aan te sturen.
      Als eenvoudig voorbeeld op de website het artikel shaders in Three.js  zie ook the book of shaders, (is nog niet af) een goede start voor de beginners.
 

8)   De shader gemeenschap

      Shaders worden voornamelijk in game's gebruik oa in minecraft. In de film The Throne of Fire in 1983 werden al shaders gebruikt.

      Naar de website  shadertoy  van de shader gemeenschap, zie ook het twitter account van shadertoy

      enkele leden van de shader gemeenschap:

       1)  De initiatiefnemer  Iniqo Quilez  Iniqo heeft een indrukwekkend  youtube kanaal , zijn kanaal op shadertoy  (nickname iq) met 460 shaders
       2)  Martijn Steinrucken the art of code met shader tutorials op Youtube en zijn kanaal op shadertoy (nickname = BigWings), zie ook het twitteraccount van Martijn
       3)  Flopine, kanaal op shadertoy,  een twitter account  en een kanaal op twitchTV.  met de tutorials:  "HBHS Have a Beer Have a Shader".
       4)  Evvvvil , zijn echte naam weet ik niet maar hij is een dog therapist, boating shoes enthusiast, mullet lover & shader coder
            Evvvvil maakt fractals met openGLSL,  zie mijn artikeltje over fractals met mandelbulb, het kanaal van Evvvil op shadertoy
            Op twitchTV, organiseert Evvvvil elke dinsdagavond om 21.00 h een codeer sesie. Hij heeft ook een twitter account en 3d fractal video's op Vimeo
       5)  Shane, een shadertoy kanaal met 169 shaders
 
  Wat komt er na WebGL ?    WebGPU?       wat komt er na de GPU?   De  KPU?
 
      Ideee !!    een pixelhouder project starten ?   moet nog worden uitgewerkt.  
      Je zie dan hoe mensen afspraken met elkaar maken. Mogelijk krijgen je zo een indruk van de gemoedstoestand van een groep op een bepaald moment
 

   Animaties op 3 schermen schermen 1 en 2 werken het beste met chromium

   scherm 1 de three.js voorbeelden starten met   https://threejs.org/examples/#webgl_postprocessing_unreal_bloom

   scherm 2 de alteredqualia site                           https://alteredqualia.com/

   scherm 3  www tekenen met mr Doob               https://mrdoob.com/

   video's 

1)   How To Draw With Code Casey Reas - YouTube

2)  van Raven Kwok:    Zero One on Vimeo.mp4

3)  Sintel.2010.1080p.mkv