Spela, lär och upplev ny webbteknik med Chrome-experiment

Annons

De Chrome-experiment webbplatsen är ett skyltfönster för allt nytt och spännande när det kommer till webbteknik och webbläsarframsteg, med fokus på JavaScript. HTML5 10 webbplatser för att se vad HTML5 handlar om Läs mer , canvas, SVG och 3D WebGL-motorn är alla framträdande i små gnistor av kreativitet som banar vägen för ett vackrare och mer interaktivt internet.

En av de bästa sakerna med Chrome Experiment är att webbplatsen uppmuntrar till lärande 4 måste-se TED-föreläsningar om kreativitet, inspiration och passionKreativitet. Inspiration. Passion. Dessa är alla begrepp som vi är mycket medvetna om, men det är inte många av oss som exakt kan peka ut deras källa. Var kommer kreativiteten ifrån? Vad är det som orsakar en... Läs mer tillsammans med upptäckt, så när du väl har lekt med ett projekt finns det en god chans att du kommer att kunna lära dig lite om hur det går till – och i vissa fall ge det en chans själv.

Det finns hundratals leksaker att leka med på Chrome Experiments webbplats och här är några av de bästa för att komma igång.

Webbläsarkrav

Eftersom detta är en Chrome-fokuserad webbplats som drivs av Google, är alla experiment tänkta att fungera i deras Chrome-webbläsare. Detta betyder att du bör ha små problem att köra någon av dem om du laddar ner eller uppdaterar till senaste stabila versionen av Chrome, även om andra moderna webbläsare också borde fungera.

Försök bara inte göra något av det här IE6 Om du fortfarande använder IE6 är du ett problem [Åsikt]IE6 var den bästa av de bästa när den kom nypressad från Microsofts mjukvarufabrik. På grund av det kunde den uppnå rekordnivån på 95 % webbläsarmarknadsandel på höjden av... Läs mer , Okej?

Dessa moln är inte äkta 3D – som författare Jaume Sanchez påpekar – men tänk om din webbplats eller ens skrivbordsbakgrund genererade vackra, 3D-liknande moln med bara CSS och lite JavaScript. Vi är uppenbarligen inte långt borta från det stadiet som denna demo visar.

Jaumes webbplats är full av andra intressanta experiment som involverar HTML5, såväl som massor av tutorials som hjälper dig att komma igång med att göra din egen. Om du vill veta hur han gjorde dessa moln kan du läsa allt om det här.

Roligare än funktionell, denna WebGL-drivna svarv från Einar Öberg använder mellanslagstangenten och muspekaren för att återskapa konsten att svänga trä, metall och sten för hand. Einar byggde demot så visa upp en enkel procedurskuggning, men han lade också till några ljud för autenticitet.

Även om det inte är en komplett handledning, kan du lära dig lite mer om hur det gjordes författarens blogg.

Ett experiment som involverar partikeleffekter och WebGL-motorn, Edouard Coulon har skapat något verkligt vackert som du kan manipulera med musen och mellanslagstangenten. Klicka för att locka partiklarna till mitten av skärmen och tryck sedan på mellanslagstangenten för att se dem skjuta utåt igen!

Det finns tyvärr ingen handledning för den här, även om jag rekommenderar att du provar läget för en miljon partiklar om din dator kan hantera det. Lägg till en projektor och ett mörkt rum för oändligt roligt!

Tillverkad av AlteredQualia som också skrev den fantastiska ro.me interaktiv film (som också visas i Chrome Experiment), WebGL cars är en 3D-leksak som låter dig styra en Bugatti Veyron och Lamborghini Gallardo från flera kameravinklar.

En sak som är särskilt cool med detta är demonstrationen av rörelseoskärpa, skärpedjup och olika ljusförhållanden. Okej, och barnet i mig älskar att leka med leksaksbilar – vad kan jag säga?

Detta är ett av de reaktionsspel där målet är att flytta målet med din mus (eller i det här fallet tangentbordet också) i ett försök att undvika mötande hinder – förutom att det är bättre än resten eftersom det här involverar en X-Wing och vad som ser ut som skyttegravsloppet från Star Krig.

Författaren som går under namnet OutsideOfSociety har många fler WebGL-experiment på gång hemsida.

My Robot Nation är ett fullt fungerande gränssnitt för e-handel och utnyttjar kraften i WebGL för att du ska kunna göra det designa, måla och anpassa din alldeles egna leksaksrobot innan den skickas ut till dig för ett set pris.

Ok, så du behöver inte köpa roboten för att få en kick av den – men om du spenderar så lång tid som jag gjorde på att försöka göra något som vagt liknar en Robobrain från Ramla ut Väck ditt intresse med dessa wikis på 4 fiktiva postapokalyptiska världarHar du någonsin hoppat på wikin för din favoritserie eller bokserie och sedan hamnat i en innehållsmättad tidsförskjutning? Du vet vad jag pratar om – något i stil med det där klassiska TVTropes svarta hålet... Läs mer serie då önskar du att du hade. Glöm inte att kolla in alla andras skapelser också!

Ett annat spel av typen "undvik hindren med musen", förutom att det här är en uppföljare till originalet FastKat förbi Omiod, ett ganska populärt HTML5-spel som du kanske redan har spelat. Uppföljaren är snabbare, svårare och väldigt beroendeframkallande.

Börja bara inte spela det när du har arbete att göra...

Det sista experimentet som visas här (av hundratals, det var svårt att välja bara 8) är ganska speciellt eftersom det låter dig manipulera WebGL-objekt med hjälp av kod i farten. Förutom en uppsättning demos att titta på och spela med, finns det en serie tutorials som hjälper dig att lära dig lite WebGL.

Jag är ingen kodare (jag är dålig på att komma ihåg ord än mindre funktioner) men till och med jag tyckte att det var engagerande och lite bemyndigande att manipulera och fiffla runt med WebGL med en bra handledning för att hålla min hand. Om du är intresserad av att prova den här typen av saker men inte har en aning om hur du gör det är det här ett bra ställe att börja.

Slutsats

Webbplatsen Chrome Experiments är bara en plattform för artister och kodare att skicka in sina skapelser till, men det tjänar ett stort syfte - att lyfta fram talang och hjälpa andra att lära andra om möjligheterna med ny webbteknologi. Det finns till och med Chrome-experiment som fungerar på din mobil!