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
volg de lessen van Uncle Bob over clean coding

 

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 ?
 
 
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

het resultaat van dat.gui.min.js<br>met dank aan Google

het resultaat van dat.gui.min.js met dank aan Google
 

 

ammo in actie

ammo.js in actie

 

 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   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
      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 on 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 Aquarium
            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.
         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.
            zie ook de site alteredqualia met veel three.js animaties en de site van Mr Doob (Ricardo Cabello) met het multiuser schetsboek
 

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
       6)  aieckik met 583 shaders ga ook naar zijn github kanaal AieKick is een van de Lovers of Code and Art in all their forms zie ook zijn shadereditor noodlesplate
       7)  Dave Hoskins met 103 shaders met veel fractal shaders
       8)  FabriceNeyret2 met 1885 shaders zie ook zijn website met linken naar zijn shadertoy demo's
 
  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 
 
     De structuur van de documentatie van Three.js is een mooi voorbeeld
     Deze bevat documentatie van de meest gebruikte libs zoals oa three.js  OrbitControls, en de loaders
     De three.js doc bevat geen documentatie van dat.gui.min.js (is een open source lib van Google). zie de animatie groep van 8 kubussen en 3 cylinders

    Hierbij een voorbeeld , het gaat hier de lib "ammo.js" die in veel toepassingen wordt gebruikt.

    Een schets waarin je met kogeltjes zachte voorwerpen kan wegschieten
    Deze schets is gebouwd binnen het Three.js framework zie    https://threejs.org/examples/?q=am#physics_ammo_volume

    De schets maakt gebruik van  Ammo.js en staat op github   https://github.com/kripken/ammo.js
    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

    zie de demo op github   https://github.com/schteppe/ammo.js-demos

    Ammo.js is aangepast en de naam is veranderd in Physi.js. zie de demo op github  https://github.com/chandlerprall/Physijs
    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 pagina
De lib is ontwikkeld om webxr animaties met Three.js te maken. Via Morgan kom je bij Magic leap  de makers van het HelioWebXR platform
Het 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)
 
Ricardo Cabello (Mr Doob) gebruikt de libs in de three.js rollercoaster animatie zie ook rollercoater met aanpassingen
 

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
Zie ook de open source ITP project finder een mogelijke opzet voor het DDAMA platform ? 
 

1) deelnemers aan het processing project

Daniel Shiffman zie zijn github kanaal en  zijn coding train tutorials op youtube zie ook de coding train website
en de website met zijn nature of code boek zie de repo met inmiddels de tweede uitgave
De Hagenaar Jakub Valtar die actief is in het ontwikkelen van processing versie 4.  Ga naar de audio animaties op zijn website

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
Evelyn Masso zie haar Github kanaal  en haar C++ lib  "Easy NeoPixels" , een arduino lib.  Misschien iets voor mijn arduino NeoPixel schets ?

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

Jason Sigal zie zijn github kanaal en ga naar zijn website, en zijn portofolio pagina met veel muziek projecten
b2renger, werkt als digital workshop manager at L "Ecole de design Nantes Atlantique zie zijn github kanaal
Zie ook de website mathsciencemusic met oa het Scratch Music project
 

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
Gene Kogan staat op nr 45 van het lijstje ga naar zijn github kanaal en website.
Gene is in 2019 gestart met het Abraham project een open project om met AI een artificiele artiest te maken
Zie ook stylegan een NVIDIA NVlabs project. zie ook de site van Brandon Dorsy met het DREAM project "we gebruiken het meer maar begrijpen het minder"
De site van Andreas Refsgaard die digitale kunst maakt met ml4a (machine learning for artists)
Andreas heeft ook samen met Gene een meetup gegeven bij de CCU groep in Utrecht
Ga ook naar het github kanaal van Tom-Lucas Säger.  Hij heeft in 2020 in een workshop over ml5.js georganiseerd

 

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
Lewy Blue met oa het discoverthreejs-site project de repo voor het boek "Discover three.js" Het boek is vorig jaar en dit jaar fors uitgebreid en is super up to date.
In 2019 heb ik nog een Three.js locomotiefje mbv dit boek gemaakt
Michal herzog met zijn in  ES6 ontwikkelde module Three-jsm  Zie ook zijn kick off project ontwikkeld met Yuka en Three.js
Zie ook de jsm examples van mr Doob. Met mijn Virtual realty met cardboard schets heb ik ook even aan jsm geroken
Don McCurdy is een developper bij google, zie zijn github kanaal en de website van Don.
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. Cannon.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
 

facebook             Lees ook de open source code of conduct van facebook

zie ook de open source website van facebook  door de mensen van facebook zijn een fors aantal open source libs ontwikkeld Ik noem hier
Pytorch, detectron2, Classy Vision, react360 om 360 graden en VR content te maken met react en Docusauris met 600 deelnemers.
Ga ook naar de React website
 

Google

Open source projecten van google meest bekende project is Tensorflow 
Ga ook naar de site experiments.widthgoogle met meer dan 1600 experimenten
Google Summer of code (GSoC) een internationaal jaarprogramma waarin Google prijzen toekent aan studenten
die in de zomer een open source software project hebben afgerond. zie ook Google Code Jam een programeer wedstrijd voor wiskundige
 
met het zephyr OS een RTOS OS project een nieuwe generatie om boards te flashen oa de BBC Microbit
zie ook de youtube video van Marcel Holtmann.  Hij bespreekt de beperkingen van Microbit tgv de geinstalleerde firmware.

Dankzij zephyr kan je veel meer doen met de microbit hardware na 10.17 minuten de flash instructies.  zie de doc 

Enkele wetenschappers, kunstenaars en wiskundige die zich met digital art bezig houden

levin Golan verbonden aan de universiteit van Pitsburg.
hij geeft lessen in interactive and computational new media arts at Carnegie Mellon University
Ga naar zijn github pagina. Hij werkt ook voor het Frank Ratchye instituut

Zie ook het overzicht van Art and code homemade projecten van studenten

Patricio Gonzalez een veelzijdig kunstenaar die oa digital art maakt met shaders Hij is mede schrijver van The Book of shaders
ga naar zijn website  en zijn boek The Book of shaders en mijn artikelen over dit boek zie ook het clouds project op github

lars Berg was ook deelnemer aan dit project uit 2015 

Open source libs

Open source lib een  "massive collection of the world's best open source software" gesponsord door Digital Ocean 
ga je bijv zoeken naar "Webgl2" toepassingen dan kom je bij 80 open source webgl projecten
Zoek naar shaders en je kom bij 360 Open Source Shaders Software projecten
 

Niet eerder genoemde open source platforms 

Rust foundation

 

 

 

voor het in de wolken klasje

video Pauline Verseput

Marin Boverhof studio de Maan