6 būdai, kaip patekti į kūrybinį kodavimą

Sunku tiksliai apibrėžti, ką reiškia „kūrybinis kodavimas“. Apskritai tai reiškia gaminį, kuris yra išraiškingo pobūdžio, o ne grynai praktinį. Tai galimybė sužinoti ir ištirti, kaip įvairios įvairios technologijos gali susivienyti kuriant įspūdingus meno kūrinius.

Kokia forma įgyjama, priklauso tik nuo kūrėjo. Viskas nuo duomenų vizualizavimo iki manipuliavimo vaizdais gali būti laikoma „kūrybiniu kodavimu“. Žiniatinklis yra pakankamai lankstus, kad atvertų galimybes įvairiose meno ir dizaino srityse.

Čia mes apžvelgiame įvairius būdus, kaip galite eksperimentuoti su kodu ir kurti stimuliuojančius vaizdinius rezultatus. Norite pabandyti? Apsižvalgykite aplink geriausi kodo redaktoriai internetas turi pasiūlyti ir įstrigti!



01. Važiuokite tiesiai į rėmus

Jei jums patiko kodas ir gerai įsivaizduojate, ką norite sukurti, kodėl laukti? Čia yra keturi geriausi kūrybinių koduotojų pagrindai; Išsirink!

p5.js

p5.js atsisiuntimo ekranas

p5.js suteikia jums galią ir paprastą naudojimąsi procesoriumi, tačiau žiniatinklyje

Apdorojimas yra šventas gralis kūrybingiems koduotojams. Tai suteikia kalbą ir IDE, leidžiančią dizaineriams ir netechnikams kurti nuostabias vizualizacijas, neužkandant technikos.

P5.js biblioteka laikosi apdorojimo principų ir taiko juos internete. Tai teikia tas pačias abstrakcijų rūšis, kurios suteikia paprastumą pradedantiesiems ir suteikia galingą valdymą ekspertams.

kaip atkreipti žingsnis po žingsnio riaumojantį liūtą

Didžioji darbo dalis atliekama vykdant dvi funkcijas - viena valdo projekto sąranką, o kita link to puslapio tęsiasi ciklo metu. Biblioteka pateikia daug visuotinių metodų ir kintamųjų, kad atnaujintų šių funkcijų puslapį. Pavyzdžiui, iškvietus „frameRate“ (60), „p5.js“ gali atlikti sunkų darbą išlaikydamas pastovų 60 kadrų per sekundę greitį.

eskizas.js

sketch.js miniatiūrų ekranas

sketch.js yra lengvas, bet galingas būdas pradėti naudoti „JavaScript“

Sveriantis mažiau nei 5 KB, „sketch.js“ yra maža sistema, padedanti kūrėjams atsinaujinti ir veikti naudojant kūrybinę „JavaScript“. Jis pakankamai lengvas, kad būtų galima įdėti į bet kurią svetainę, tačiau kartu su juo pateikiama daugybė funkcijų.

Galima pasinaudoti metodais, reaguojančiais į įvykius projektuose. Nors tai apima įprastus atgalinius skambučius, tokius kaip animacijos ciklas, „sketch.js“ taip pat atveria įvykius, tokius kaip klaviatūros įvedimas ir lango dydžio keitimas.

Palietimo ir pelės įvestys traktuojamos vienodai, todėl visi projektai pagal numatytuosius nustatymus yra paliečiami. Nors galima konkrečiai taikyti bet kurį įvesties tipą, reikia sunerimti dėl nedidelių dviejų įvykių tipų skirtumų. Jis taip pat gali automatiškai apskaičiuoti deltas tarp šių taškų, kad būtų lengviau atlikti fizikos skaičiavimus.

D3

D3 pagrindinis puslapis

D3 yra daugiau nei diagramos ir grafikai

Nors D3 jau seniai yra grafikų ir diagramų kūrimo biblioteka, tai dar ne viskas. Duomenimis pagrįstas požiūris leidžia puikiai sukurti patrauklias vizualizacijas - tiek informatyvias, tiek abstrakčias. Kartu su turtingu duomenų šaltiniu, tokiu kaip „Twitter“ API, infografiką lengva kurti.

Manipuliuodamas DOM elementais, tokiais kaip SVG, D3 veiks su bet kokiu turtu, kuris jau yra programos dalis. Tai suteikia struktūrą, aplink kurią juos galima transformuoti, kad būtų galima pabrėžti ar atgaivinti ekrane.

Yra daugybė būdų, kaip pasiekti D3 per kitas bibliotekas ir sistemas. Pavyzdžiui, lengvai pasiekiami specialiai sukurti „React“ komponentai, „Angular“ nurodymai ir daugumos kitų „front-end“ rėmelių papildiniai.

trys.js

Naudodami „three.js“ galite lengvai sukurti sklandžią 3D sąveiką naudodami „WebGL“

Darbas 3D su „WebGL“ gali būti sudėtingas geriausiu metu. Išsiaiškinus, kaip šešėliai ir fotoaparato perspektyvos veikia tokioje plataus masto API, galima atimti kūrybinius projekto aspektus ir sulėtinti viską.

Naudodamiesi „three.js“, galite peržvelgti šiuos sudėtingus aspektus ir sutelkti dėmesį į vaizdą. Tai yra „3D“ „JavaScript“ biblioteka, veikianti kartu su „WebGL“, kad būtų galima lengvai sukurti sklandžiai sąveiką su minimaliomis pastangomis.

Biblioteka pateikia daug integruotų metodų, kaip sukurti objektus scenoje. Viską galima pakeisti, kaip ir bet kurį kitą „JavaScript“ objektą, ir jis bus atitinkamai atnaujintas. Sudėtingi metodai, tokie kaip tekstūros atvaizdavimas, pateikiami iš dėžutės ir paprastai yra tik objekto tinkamos parinkties nustatymo atvejis.

02. Išmaniai naudokitės duomenų šaltiniais ir API

Yra daug viešai prieinamų duomenų, kad galėtumėte žaisti, kad jūsų projektas būtų šviežias; sužinokite, ką galite padaryti naudodami šiuos šaltinius.

„Twitter“

„Twitter“ kūrėjų platforma yra kūrybinių koduotojų lobynas

„Twitter“ yra daugybė informacijos. Žmonės kalba apie kiekvieną įmanomą temą, realiuoju laiku kartu su nefiltruotomis reakcijomis skelbdami nuotraukas ir vaizdo įrašus. Tai daro aukso kasyklą kūrybiniam kodavimo projektui. Oficiali API gali sugrąžinti „tweets“ reikalingu formatu kartu su kitais metaduomenimis, kurie yra atviri analizei. Tada šiuos duomenis galima vizualizuoti naujais ir įdomiais būdais.

„Twitter“ API pateikia keturis apibrėžtus „objektus“, kuriuos galima gauti, - „tweets“, vartotojus, vietoves ir subjektus. Subjektai pateikia papildomos informacijos, susijusios su tais objektais, įskaitant žymas su grotelėmis ir laikmeną. Šių objektų vertės yra fiksuotos ir bus tik išplėstos, o tai reiškia, kad niekada neprarasite prieigos.

Pačių „Twitter“ įrašų galima ieškoti su užklausa į vieną galutinį tašką. Šios paieškos gali būti atliekamos pagal eilutę arba gali būti labiau apibūdinamos, pvz., Vaizdai ar „tweet“ su teigiama nuotaika.

Vizualizuodami „Twitter“ duomenis galite sukurti puikų sujungtą dizaino kūrinį. Sujungus kelis duomenų taškus, tokius kaip vieta ir nuotaikos, gali būti sukurtas projektas, kuris taip pat yra informatyvus, pvz., Pateikiami tiesioginiai „Twitter“ pranešimai apie temą iš viso pasaulio.

Nors yra daug galimybių naudoti „Twitter“ išvestį, API taip pat leidžia programoms skelbti pranešimus „Twitter“. Tai gali būti iš bet kurio šaltinio, jei jis prijungtas prie API.

Visiems API taškams reikalingas tam tikras autentifikavimas. Daugeliui projektų tai yra tik programos raktas, tačiau autentifikavimas gali būti keblus, kai tai daroma rankiniu būdu. Laimei, yra keletas paketų, kurie šiek tiek palengvina darbą su „Twitter“ API.

„Npm“ modulis „twitter“ yra visiems reikalinga kliento biblioteka dirbant per „Node“. Jis palaiko įprastus galinius taškus ir srautą, kuris gali būti naudingas įgyvendinant projektus realiuoju laiku.

„Instagram“ ir „Flickr“

Nešiojamas kompiuteris kavinėje, rodantis žemėlapio maršrutą

Socialinės medijos API gali būti puikus duomenų vizualizavimo ir masažavimo šaltinis

Kūrybinio kodavimo projektai dažnai būna vizualūs, todėl vaizdų ir vaizdo įrašų bendrinimo API tampa patrauklia įkvėpimo perspektyva. Laimei, tokios svetainės kaip „Instagram“ ir „Flickr“ atveria savo duomenis ir leidžia kūrėjams pasiekti tą turinį bei aplinkinius metaduomenis.

„Instagram“ tapo viena populiariausių žiniatinklio vaizdų dalijimosi platformų. Todėl tai yra gausus vaizdų šaltinis, naudojamas kūrybiniuose projektuose. API nesiskiria. Tai suteikia prieigą prie vaizdų, vaizdo įrašų, komentarų ir žymų, taip pat būdų, kaip ieškoti šios informacijos, norint rasti tai, ko reikia projektui.

Iš pradžių prieiga prie API bus ribojama nedideliu paskyrų ir vaizdų fondu. Norėdami pašalinti kai kuriuos iš šių apribojimų, „Instagram“ turės patys peržiūrėti projektą, o tai gali būti daug laiko ir bevaisis kūrybinio kodavimo projektams. Priklausomai nuo projekto, gali pakakti pradinio smėlio dėžės režimo.

„Flickr“ turi lengviau prieinamą API. Tai aukštos kokybės vaizdų šaltinis, pasiekiamas keletu skiriamųjų gebų. Daugeliui nuotraukų galinių taškų reikia tik programos rakto, kad būtų lengviau nustatyti ir gauti.

„Flickr.photos.search“ galinis taškas yra dažniausiai naudojamas ir suteikia prieigą prie daugumos „Flickr“ turinio. Jei reikia, jis gali būti filtruojamas ir rūšiuojamas pagal datą, vietą ir net licenciją. Kiti galiniai taškai gali gauti daugiau informacijos apie nuotrauką, pvz., Komentarus ar EXIF ​​duomenis

Gauti API, kad ji veiktų tiksliai taip, kaip reikia projektui, gali būti sunku, ypač jei rašyti informaciją atgal į „Flickr“. Laimei, egzistuoja daugybė paketų, padedančių jį naudoti su „JavaScript“, įskaitant įmonės „flickr-sdk“, esantį npm.

Svarbu pažymėti, kad visi vaizdai lieka jų savininkų nuosavybe. Asmeniniams projektams tai nebus problema, tačiau jei tai bus dalijamasi, būtinai paprašykite leidimo arba įskaitykite savininką, atsižvelgiant į fotografo nustatytas sąlygas.

Fotoaparatas ir mikrofonas

Portretas pagamintas iš jaustukų

„Kitasenju Design“ „Emoji Wall“ ima vaizdą iš fotoaparato ir perbraižo naudodamas jaustukus 3D erdvėje

Žiniatinklis paprastai apsiriboja pelės žymėjimu ir spustelėjimu, tačiau tai nėra vienintelis būdas pateikti įvestį. Šiandienos naršyklėse yra naujos API, kad būtų galima surinkti duomenis iš skirtingų išorinių šaltinių, įskaitant fotoaparatus ir mikrofonus.

Kurti vizualiai suprantamus projektus yra puikus būdas įtraukti vartotojus. Naudodami regėjimą kaip įvestį per tradicinę klaviatūrą ir pelę, vartotojai gali bendrauti įvairiais būdais, pavyzdžiui, stebėti veidą ar atpažinti vaizdą. Kadangi dabar daugelyje įrenginių yra įmontuota kamera, tai nebėra kliūtis, kuri buvo kadaise, ir puikiai tinka žiniatinkliui.

Vartotojo klausymasis taip pat yra puiki rankinio įvesties alternatyva. Balso atpažinimas galėtų valdyti navigaciją arba vartotojai galėtų pateikti savo garso pavyzdžius, kuriuos būtų galima naudoti pagal savo patirtį. Tai taip pat gali būti alternatyva mygtuko paspaudimui. Išgaunant aukštį ir garsumą, juos galima susieti su įprastu mygtuko paspaudimu, kuriuo galima valdyti bet ką - nuo spalvos iki judesio.

Prieiga prie fotoaparato ir mikrofono yra įmanoma per navigatoriaus objektą.

navigator.mediaDevices.getUserMedia({ audio: true, video: { width: 640, height: 480 } }) .then(function(stream) { // Access input }) .catch(function(error) { // Provide fallback option });

Kodas turi tiksliai nurodyti, ko reikia iš įvesties įrenginių. Kvietimas getUserMedia () suaktyvins leidimų dialogo langą, kurį vartotojas turi priimti prieš tęsdamas. Priėmus šias funkcijas, galima naudotis srautais, todėl jos efektyviau naudoja atmintį.

Visos pagrindinės naršyklės palaiko šią API, įskaitant mobiliuosius. Jei naršyklė negali atitikti tikslių reikalavimų, pažadas bus atmestas ir neveiks. Svarbu pateikti alternatyvią patirtį, pvz., Vaizdo įkėlimo formą, kur prieiga neįmanoma.

03. Mobiliųjų prietaisų jutikliai

Whitehall gatvės vaizdas pagamintas iš LEGO kaladėlių

„Brick Street View“ parodys, kaip atrodytų dabartinė aplinka, jei jie būtų pagaminti iš „LEGO“

Mobilusis pasaulis pateikia visiškai kitokias galimybes, kai kalbama apie kūrybinį kodavimą. Daugybė formos veiksnių ir jutiklių, kuriuos galima naudoti naršyklėje, gali suteikti išskirtinių įspūdžių.

Mobilieji įrenginiai yra beveik išimtinai sąsajos su lietimu. Naršyklės turi galimybę aptikti ir stebėti kelis prisilietimus vienu metu. Tai reiškia, kad projektams neprivalo vadovauti vienas taškas ir jais galima manipuliuoti kur kas intuityvesniu būdu.

window.addEventListener('touchstart', e => { e.preventDefault(); const touches = e.changedTouches; });

Visuose prisilietimo įvykiuose renginyje naudojama ypatybė „pakeistasTouches“. Čia pateikiama nuoroda į visus prisilietimo taškus, kurie pasikeitė priklausomai nuo įvykio tipo, o ne atskirą kiekvieno prisilietimo taško įvykį. Stebint šiuos, galima susieti gestus arba piešti liečiant.

Akselerometrai ir giroskopai dažniausiai naudojami pereinant iš portreto į kraštovaizdžio režimą, tačiau juos taip pat galima interpretuoti. Įvairius sąveikos metodus galima sukurti naudojant patį prietaisą kaip valdymo mechanizmą - nesvarbu, ar atliekant konkrečius koordinuotus judesius, ar labiau remiantis gestais, pavyzdžiui, purtant.

window.addEventListener('deviceorientation', e => { console.log(e.gamma); }); window.addEventListener('devicemotion', e => { console.log(e.acceleration); });

API suteikia prieigą prie šios informacijos, tačiau grąžinamos vertės skiriasi atsižvelgiant į naršyklę, nes visos jos naudoja ne tą pačią koordinačių sistemą. Bibliotekose, tokiose kaip p5.js, pateikiamos specialios vertės ir kabliukai, pvz., „RotationX“ arba „deviceShaken ()“, kad būtų lengviau pašalinti skirtumus.

Mobilieji įrenginiai taip pat turi galimybę nustatyti tikslią jų padėtį naudodami geografinę vietą. Galimybė sužinoti tikslią įrenginio vietą gali atverti naujų galimybių ir suteikti racionalesnę patirtį.

navigator.geolocation. getCurrentPosition(pos => { console.log(pos.coords); });

Prieiga suteikiama per navigatoriaus objektą. Pateikta vertė yra latų ilgio prietaiso koordinatės, kartu su kitais duomenimis, pavyzdžiui, aukščiu ar greičiu, jei prietaisas tai palaiko. Naršyklės naudos greičiausią vietos nustatymo metodą, pvz., IP adresą. Tačiau tai ne visada gali būti tiksliausia.

Šių įnašų sujungimas kūrybiniais būdais yra raktas į kažko ypatingo kūrimą. Pvz., Naudojant įrenginio vietą ir orientaciją, kad būtų sukurta virtuali žvaigždžių stebėjimo patirtis.

04. Įvairių ekranų patirtis

Rankoje laikote telefoną su burbulais

kaip nupiešti atspindžius ant stiklo
„Bubbles“ - projektas, sukurtas „Google I / O 2017“ - suteikia vartotojams galimybę praleisti burbuliukus iš viso pasaulio

Stalinės naršyklės suteikia raminančių žinių apie kūrybinius projektus. Bet eksperimentuodami su skirtingais ekranais, vartotojai gali gauti labiau pritaikytą patirtį, kuri jiems tinka.

Reaguojančio dizaino principai vis dar galioja ir kūrybinio kodavimo projektuose. Vartotojai turėtų galėti jais mėgautis neatsižvelgdami į įrenginį, nesvarbu, ar tai stalinis kompiuteris, ar mobilusis, ar projektuojamas milžiniškame ekrane.

Šie skirtumai taip pat gali būti naudojami dar labiau sustiprinant projektą. Naudodamiesi žiniasklaidos užklausomis CSS, mobiliojo ryšio vartotojai galėtų gauti patirtį, pritaikytą mažesniam rankiniam formos koeficientui. Kadangi mobiliojo ryšio vartotojai dažniausiai yra tik vienas asmuo, šiems lankytojams, pavyzdžiui, būtų galima pasiūlyti labiau pritaikytą didesnės platformos vaizdą.

Popieriniai lektuvėliai kompanijos „Active Theory“ paskatino vartotojus kurti virtualius lėktuvus savo telefonuose. Tada jie gali būti „išmesti“ ir rodomi svetainės darbalaukio versijoje. Ten lankytojai galėjo stebėti, kaip lėktuvai skraido aplink pasaulį, ir pamatyti, iš kur jie atvyko.

Tokią sąveiką galima palengvinti naudojant „WebSockets“. Ryšys tarp naršyklės ir serverio yra pagrįstas įvykiais, išvengiant poreikio apklausti serverį, o tai dažnai gali būti švaistoma ir linkusi vėluoti. Tokie projektai kaip „Socket.io“ gali palengvinti „WebSocket“ protokolų nustatymą.

Tiesioginis bendravimas tarp prietaisų taip pat gali turėti galingą efektą, kai vartotojai yra kartu vienoje patalpoje. Sebas Lee-Delisle'as „PixelPhones“ Pavyzdžiui, projektas ekranų minią pavertė laikinu ekranu. Kai visi bus sujungti, visi tapo patirties dalimi.

„WebRTC“ yra „JavaScript“ API rinkinys, palengvinantis bendravimą realiuoju laiku tarp naršyklių. Norint užmegzti ryšį, reikia serverio, laikmenos siunčiamos tiesiogiai tarp naršyklių, todėl sąveika tampa greita ir paprasta sukurti. Dabar jį palaiko visos pagrindinės naršyklės tiek darbalaukyje, tiek mobiliajame.

05. Savigeneruojantis menas

Kompiuteriu sukurtas miesto centras

„Infinitown“, kurią sukūrė „Little Workshop“, sukuria procedūrinį miestą, kuris yra unikalus kiekvieną kartą, kai lankotės

Net patys kūrybiškiausi kodavimo projektai po kurio laiko gali tapti pasenę. Atsitiktinumo elementas gali išlaikyti dalykus šviežius kiekvieną kartą paleidus kodo dalį. Nors tai gali atsirasti iš vartotojo įvesties, gali būti įdomu pamatyti, koks kodas gali būti išjungtas, kai jis atleidžiamas nuo pavadžio.

Užuot apibrėžę, kokia būtų kodo bloko išvestis, apibrėžkite taisyklių rinkinį, kurio reikia laikytis. Apibrėžus atsitiktinę pradinę padėtį, galutiniai rezultatai visiškai skirsis.

„Conway“ gyvenimo žaidimas yra puiki vieta pradėti. Apibrėžtame tinklelyje kiekvienas kvadratas gali būti „įjungtas“ arba „išjungtas“, atsižvelgiant į kvadratus aplink jį. Spalvindamas kvadratus, priklausančius nuo jų būsenos, jis sukuria vaizdą. Pakartojus procesą kelis kartus parodoma, kaip kvadratų grupės laikui bėgant mutuoja. Taisyklių, kurias jos keičia, pakeitimas gali dramatiškai pakeisti rezultatą.

Naudojant „JavaScript“ su elementu, šis vaizdinis procesas yra gana paprastas. Naudodamas requestAnimationFrame (), „JavaScript“ gali iš naujo įvertinti savo aplinką kiekviename kadre. Tai yra atvejis, kai paskutinio kadro išvestis naudojama kaip įvestis kitam kadrui ir leidžiama programai pasirūpinti savimi.

06. „WebVR“ ir „Bluetooth“

VR patirties kūrimas naudojant tokią sistemą kaip „A-Frame“ yra daug mažiau panašus į sunkų darbą

Nors naršyklės kasdien tampa vis pajėgesnės ir galingesnės, vienos peržiūros srities gali būti tik tiek. Laimei, naršyklės taip pat plečiasi iš naršyklės.

Virtuali tikrovė turi galimybę panardinti žiūrovą būdais, kurių anksčiau nebuvo įmanoma. „WebVR“ yra atvira specifikacija, leidžianti per naršyklę prieigą prie šių įtraukiančių pasaulių masėms. Tai taip pat padeda sumažinti skirtumus tarp skirtingų įrenginių tipų, tokių kaip „Google Cardboard“ ir „HTC Vive“.

Karkasai, tokie kaip Rėmas , gali padėti apeiti bet kokias komplikacijas, pateikdamas paruošiamus naudoti VR elementų elementus. Kadangi jie sukurti našumui ir patikimumui, jie palieka kūrėjui galimybę laisvai naudotis puikia vartotojo patirtimi.

„Bluetooth“ yra dar viena galimybė ir galimybė atsisakyti ekrano. Lustai yra lengvai prieinami ir gali būti derinami su skirtingais išvesties įrenginiais, kad skleistų garsą ir šviesą - visa tai valdo naršyklė per „Web Bluetooth“ API. Sąsaja pagrįsta pažadais, o tai šiek tiek palengvina asinchroninį ryšį.

Naršyklės palaikymas skiriasi, kai šios technologijos vystosi. „WebVR“ šiuo metu įvairiose valstybėse palaiko „Edge“, „Firefox“ ir „Chrome“ kūrimo versijos. Šiuo metu žiniatinklio „Bluetooth“ palaiko tik „Chrome“, tačiau kiti tai svarsto.

Šis straipsnis iš pradžių buvo paskelbtas kūrybinio interneto dizaino žurnale „Web Designer“. Prenumeruokite „Web Designer“ čia .

Susiję straipsniai: