1) Inleiding open source.
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 leuk 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
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 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 In dit voorbeeld wordt gebruik gemaakt van:
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
De meeste schetsen werken met het aframe.min.js script. A-Frame beschikt niet over een eigen forum
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),
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.
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.
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.
enkele leden van de shader gemeenschap:
4) Evvvvil , zijn echte naam weet ik niet maar hij is een dog therapist, boating shoes enthusiast, mullet lover & shader coder
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
