1) Inleiding open source.
zie ook de open source gedragscode van de P5.js gemeenschap De gemeenschapsverklaring in het Nederlands
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
Lars Berg met veel voorbeelden. Lars maakt gebruik van mn Three.js en
cannon.js 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.
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
9) Onderzoek naar open source software bronnen op het internet tbv kunstenaars
een poging tot afbakening van open source software tbv het DDAMA platform
Met lib wordt ook bedoelt een of meerdere classes , hier is toepassing synoniem voor kunstwerk
onderzoeks vragen mbt het kunstwerk
1) In welke kunstwerken en framework (bijv Three.js) worden de libs gebruikt ?
2) Zijn er meer kunstwerken waarin de libs worden gebruikt ?
3) Is het kunstwerk op het internet dankzij een browser met WebGL interactief te benaderen ?
onderzoeksvragen mbt de voor het kunstwerk gebruikte libs
1) wat is de oorsprong van de gebruikte bibliotheek ? en wie is de maker ? Met wat voor doel is het gemaakt ?
2) wat voor veranderingen zijn er in de loop van de tijd aangebracht ? en waarom?
3) Hebben gebruikers of ontwikkelaars fouten ontdekt en problemen ondervonden ? Tip: google met de vraag lib.js not working en zoek verder in stackoverflow
testfase
1) beschrijf de classes van de lib. Maak een beschrijving van de constructors dit in analogie met javadoc
2) test de lib met een toepassing in bijvoorbeeld Atom of Visual Studio
3) publiceer de lib met de test toepassing op het ddama platform
Deze bevat documentatie van de meest gebruikte libs zoals oa three.js OrbitControls, en de loaders
ammo is de "Bullet physics engine" en kent honderde toepassingen
Zie ook de website
enabled3d met github linken met oa veel voorbeelden met het gebruik van ammo.js in three.js
waarom aangepast ?
Zie de website enable3d met github linken
voorbeeld 2
De webxr rollercoaster animatie maakt oa gebruik van HelioWebXRPolyfill.js en RollerCoaster.js De rol van HelioWebXRPolyfill.js is mij niet geheel duidelijk.
De classes van deze lib worden niet beschreven in de three.js documentatie dus moet je , om meer te weten ,op het internet gaan zoeken
HelioWebXRPolyfill.js is 2 jaar geleden ontwikkeld door Morgan Villedieu hij is Senior 3D Graphics & Front-End Web Developer. zie zijn
github paginaHet platform om 3D webapps te ontwikkelen die gebruik maken van het Magic Leap device dit is een dure VR bril die oa in de medische sector wordt gebruikt.
Het Magic Leap device is voorzien van een Helio browser
RollerCoaster.js is gemaakt door Mr Doob (Ricardo Cabello)
Enkele niet erder genoemde open source platforms
Openframe is een platform geschikt voor de rasberry py. Wat is open frame?
Openframe is an open source platform for artists, curators and art enthusiasts to share, discover and display digital art.
Openframe is dus geen framework
Openframeworks is een open source C++ gereedschapskist om creatief te coderen Is ook geschikt voor de raspberry py
OpenCV = Open Source Computer Vision Library met schetsen in C++ OpenCV geeft ook niet gratis cursussen
Cecium.js (niet volleding open source) lib om 3d globe animaties om zo data te visualiseren Zie het github kanaal
Vulkan ontwikkeld door de Khronos groep voor 3d met de GPU
Vulkan is een SDK te installeren in ubuntu met sudo apt update en sudo apt install vulkan-sdk
babylon.js is net als Three.js een WebGL framework voor 3d animaties, met 349 deelnemers, zie het github kanaal van Babylon
Via de deelnemers van op github geplaatste projecten
Deelnemers aan grote opensource project zijn vaak ook actief in andere open source projecten
De projecten procesing , p5.js , en ml5.js zijn ITP projecten van the Tich School of art van de NYU zie ook het
ITP github kanaal
1) deelnemers aan het processing project
Rune Skoldborg Madsen zie zijn github kanaal met oa zijn rune.js project
2) deelnemers aan het p5.js project
p5.js is een project van de processing foundation met 435 deelnemers. Veel deelnemers zijn of waren verbonden aan het ITP van de NYU
Stalgia Grigg met de p5.xr lib een lib om in p5.js VR schetsen te maken met een eigen p5.xr website
3) deelnemers aan het p5.js sound project
b2renger, werkt als digital workshop manager at L "Ecole de design Nantes Atlantique zie zijn github kanaal
4) Deelnemers aan het ml5.js project
zie het lijstje met de meest actieve deelnemers, klik op Hanna Davis.
Zij werkt oa met
D3.js een lib om open data te visualiseren.
Via de deelnemers in github kanaal van D3.js kom je in de wereld van de door data gedreven kunstenaars
5) Deelnemers aan het Three.js project
Ricardo Cabello (alias Mr Doob) met oa het
glsl-sandbox project (voor de shadertoy mensen) met 14 deelnemers met oa
Tom MackWright.
Tom heeft gewerkt aan het OpenStreetMap project en was actief in het hier boven genoemde D3 project en het
Observable project
In 2019 heb ik nog een Three.js locomotiefje mbv dit boek gemaakt
Don doet ook mee met het A frame project zie de
A frame website en het
A frame github kanaal met 347 deelnemers
Zie ook de Nederlandse site
webxr.nl uit Amsterdam met een meetup groep van 187 leden zie ook de
webxr voorbeelden pagina op deze website
Java libs die te gebruiken zijn binnen het Three.js framework
cannon.js geinspireerd door Three.js en het genoemde ammo.js project. cCannon.js is gestart door Stefan Hedman.
zie de cannon.js github pagina met 17 deelnemers en 2100 geregistreerde gebruikers.
tween.js zie de
github pagina, dankzij tween.js zijn oa interessante bewegingspatronen binne Three.js mogelijk. Er is ook een
jsm versie van tween.js in ontwikkeling
zie ook de open source website van facebook
voor het in de wolken klasje
video Pauline Verseput
Marin Boverhof studio de Maan
