{"id":65,"date":"2020-05-07T18:55:47","date_gmt":"2020-05-07T18:55:47","guid":{"rendered":"http:\/\/basboudewijn.nl\/?post_type=jetpack-portfolio&#038;p=65"},"modified":"2020-06-16T08:19:22","modified_gmt":"2020-06-16T08:19:22","slug":"neural-grains","status":"publish","type":"jetpack-portfolio","link":"https:\/\/basboudewijn.nl\/?portfolio=neural-grains","title":{"rendered":"Neural Grains"},"content":{"rendered":"\n<p class=\"has-text-color has-drop-cap has-white-color\">Dit project heb ik samen met Mark Smits en Tom Siemerink gemaakt in opdracht van HKU. Neural Grains was onze eindopdracht voor het eerste jaar van Creative System Design (CSD\/SYSBAS). De opdracht bestond uit een combinatie van Javascript en MAX 8. De koppeling hebben we verzorgd met OSC (Open Sound Control).<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/VPcMIxzQT4s\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<div style=\"height:49px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-color has-drop-cap has-white-color\">Het proces begon al in februari, toen we voor SYSBAS groepjes moesten maken om uiteindelijk aan onze eindopdracht te gaan werken. Mark, Tom en ik kwamen samen en gingen brainstormen over mogelijke idee\u00ebn. Onze eerst idee was abstract, maar heeft ons uiteindelijk wel in de richting van dit eindresultaat geholpen. &#8220;We zouden iets kunnen doen met chaos in het hoofd van een MT-student.&#8221; Het stuiterende ballen script uit een eerdere opdracht, zouden we dan zo uitwerken, dat je in de 2 minuten die je had steeds meer ballen \u00e9n dus connecties in je scherm zou hebben. Dit idee hebben we echter niet uitgevoerd omdat we er al snel achter kwamen, dat de granulaire synthesizer die Mark had gemaakt, niet meer optimaal zou kunnen werken. OSC vind het niet prettig om van 50+ balletjes een positie en afstand door te sturen bij ieder frame.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-11.39.21-1024x947.png\" alt=\"\" class=\"wp-image-84\" width=\"516\" height=\"478\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-11.39.21-1024x947.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-11.39.21-300x277.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-11.39.21-768x710.png 768w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-11.39.21.png 1908w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/figure><\/div>\n\n\n\n<p style=\"text-align:right\" class=\"has-text-color has-drop-cap has-white-color\">We gingen voor eenentwintig ballen. Twintig op zichzelf door de ruimte bewegende ballen \u00e9n een balletje die jij als speler kunt besturen. In de code hiernaast zie je hoe dat besturen werkt. Met de functies isControlable en window.addEventListener was het voor ons mogelijk om een &#8220;keydown&#8221; event aan te maken. Wanneer je in dit geval op de linker pijltjestoets drukt, veranderd de richting van het balletje op de x-as van 1 naar -1. Ook zorgt deze &#8220;keydown&#8221; ervoor dat de diameter van alle balletjes met 10 tot 15 pixels groeit en dat de kleur van alle balletjes bij iedere pixel die ze groeien, steeds roder wordt.<\/p>\n\n\n\n<ul class=\"wp-block-gallery alignfull columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"514\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.18.41-1024x514.png\" alt=\"\" data-id=\"67\" data-link=\"http:\/\/basboudewijn.nl\/?attachment_id=67\" class=\"wp-image-67\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.18.41-1024x514.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.18.41-300x151.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.18.41-768x386.png 768w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.18.41.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Wanneer het balletje van de speler geen contact maakt met een van de andere balletjes, verandert de achtergrondkleur naar roze.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"514\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.22.52-1024x514.png\" alt=\"\" data-id=\"68\" data-link=\"http:\/\/basboudewijn.nl\/?attachment_id=68\" class=\"wp-image-68\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.22.52-1024x514.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.22.52-300x151.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.22.52-768x386.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>De patch, voordat de speler een toets in drukt. 2 balletjes worden op een willekeurige positie gegenereerd.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"515\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.21-1024x515.png\" alt=\"\" data-id=\"69\" data-link=\"http:\/\/basboudewijn.nl\/?attachment_id=69\" class=\"wp-image-69\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.21-1024x515.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.21-300x151.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.21-768x386.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Op het moment dat de speler een van de pijltjestoetsen indrukt, krijgen alle balletjes een bepaalde groeiwaarde.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"517\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.42-1024x517.png\" alt=\"\" data-id=\"70\" data-link=\"http:\/\/basboudewijn.nl\/?attachment_id=70\" class=\"wp-image-70\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.42-1024x517.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.42-300x151.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.23.42-768x387.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Deze groei is gekoppeld aan de kleur van de ballen. Als toetsen herhaaldelijk worden ingedrukt, worden de ballen groter en roder.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"515\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.07-1024x515.png\" alt=\"\" data-id=\"71\" data-link=\"http:\/\/basboudewijn.nl\/?attachment_id=71\" class=\"wp-image-71\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.07-1024x515.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.07-300x151.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.07-768x387.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Wanneer alle vier de pijltjestoetsen tegelijk worden ingedrukt, zie je dat de ballen in een keer vergroten.<\/figcaption><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"515\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.39-1024x515.png\" alt=\"\" data-id=\"72\" data-link=\"http:\/\/basboudewijn.nl\/?attachment_id=72\" class=\"wp-image-72\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.39-1024x515.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.39-300x151.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-07-om-20.24.39-768x387.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Na de toetsaanslag van de speler keert de bal snel terug naar zijn originele kleur en grootte.<\/figcaption><\/figure><\/li><\/ul>\n\n\n\n<p class=\"has-text-color has-drop-cap has-white-color\">Een aantal parameters worden vervolgens via OSC naar MAX 8 gestuurd om zo het geluid te genereren. Het geluid van de MAX-patch wordt gegenereerd op drie vlakken. Een zaagtand drone die je met MIDI invoer kunt bespelen, directe feedback op toetsaanslagen in de vorm van waterdruppels en als laatste de granulaire synthesizer die Mark heeft gebouwd. Deze synth wordt geactiveerd wanneer de afstand tussen een bestuurbaar en onbestuurbaar balletje minder dan 300 pixels is. Op datzelfde moment genereert de Javascript code een lijntje tussen de twee balletjes. Dit lijntje wordt dikker naarmate de ballen elkaar naderen. MAX 8 krijgt continu zowel het aantal connecties, als de afstanden ten opzichte van het bestuurbare balletje door.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"675\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-12.10.44-1024x675.png\" alt=\"\" class=\"wp-image-85\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-12.10.44-1024x675.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-12.10.44-300x198.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Schermafbeelding-2020-05-08-om-12.10.44-768x506.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Setup: Sample inladen (linksboven) -&gt; Sample regio en lengte aangeven -&gt; numberbox onder sample op 1 -&gt; general volume aan.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-color has-drop-cap has-white-color\">Al met al was dit een te gek project om te doen al heeft het de nodige uren gekost om allemaal te werken zoals we dat hadden gehoopt. Dit is het project dat mij bekend heeft gemaakt met de functies van Javascript, waar ik in de toekomst een hoop aan zal hebben.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"155\" src=\"http:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Logo-Bas-Boudewijn-V1-1024x155.png\" alt=\"\" class=\"wp-image-27\" srcset=\"https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Logo-Bas-Boudewijn-V1-1024x155.png 1024w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Logo-Bas-Boudewijn-V1-300x45.png 300w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Logo-Bas-Boudewijn-V1-768x116.png 768w, https:\/\/basboudewijn.nl\/wp-content\/uploads\/2020\/05\/Logo-Bas-Boudewijn-V1.png 1650w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Dit project heb ik samen met Mark Smits en Tom Siemerink gemaakt in opdracht van HKU. Neural Grains was onze eindopdracht voor het eerste jaar van Creative System Design (CSD\/SYSBAS).<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/basboudewijn.nl\/?portfolio=neural-grains\" class=\"readmore\">Lees verder<span class=\"screen-reader-text\">Neural Grains<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":71,"comment_status":"open","ping_status":"closed","template":"","jetpack-portfolio-type":[4],"jetpack-portfolio-tag":[12,15,13,14],"_links":{"self":[{"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=\/wp\/v2\/jetpack-portfolio\/65"}],"collection":[{"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=65"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=\/wp\/v2\/media\/71"}],"wp:attachment":[{"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"wp:term":[{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fjetpack-portfolio-type&post=65"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/basboudewijn.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fjetpack-portfolio-tag&post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}