prosthetic knowledge
-
Delaunay Painter
Great creative online drawing toy allows you to upload an image and ‘triangulate’ it yourself.
There are 4 modes - solid, lines, solid+lines, and simple. Images can also be saved.
Try it out for yourself here
-
GIFPaint
Simple online browser-based image editor to create your own hand drawn GIF animations, which can be posted directly to your Tumblr blog:
A simple HTML5 animation application inspired by MacPaint, Deluxe Paint and MSPaint.
Created by James Hicks, if you have any feedback or bugs you can get in touch on Twitter or info (at symbol) gifpaint.com.
I’d also love to see any cool GIFs you make using GIFPaint and will reblog them to the GIFPaint Tumblog
Try it out for yourself here
-
slitscanner.js
Bookmarklet can turn HTML5 videos on Youtube and Vimeo into slitscan-like images:
Slitscanner is a little piece of Javascript you can run as a bookmarklet to start, well, slitscanning videos online. This only works in the HTML5 video players so for Vimeo you will need to select “Switch to HTML5 Player” in the lower right on the video pages. For YouTube it’s a little trickier, you can opt into the HTML5 test here, but they will still use the Flash Player for videos with ads.
… Just hit the bookmarklet on any YouTube or Vimeo video page with an HTML5 player, and it will start drawing onto a canvas in the browser. You can modify the speed with the slider (the default value draws the entire video to the width of the browser). You can also download the code and modify it as you wish.
You can find out more and get the bookmarklet here, plus here is a Tumblr blog with some more examples
Examples above:
Champagne Coast by Blood Orange
True Skin
REGGIE WATTS: IMPROVISED DECONSTRUCTION
OMCOPTER - Ninja shoot with Epic -
Acid Defender
Music game experiment using a HTML5 and Web Audio API by Patrick Borgeat.
This is a web experiment, merging music-making with gameplay. All sounds (except for the snare and kick drum) are synthesized in the web browser and all sounds are sequenced in the web browser.
You can either play the game, in which you must evade the “evil” red squares who want to destroy your notes, or you can play the jam mode with no enemies and more controls.
This web app doesn’t use Flash to generate either the graphics (HTML5 canvas is used) nor the audio. This is possible thanks to the Web Audio API which allows for flexible and efficient creation/routing/mixing of audio signals. It’s currently only supported by WebKit based Browsers but will hopefully find more support in other browsers soon. The jam mode is just a bonus – off course there could be a better interface for the drums/synth and more variety.
You can try this out (Chrome only) here
-
Data Driven Stories: Aaron Koblin for the Future of StoryTelling
Aaron Koblin discusses his high-profile web-based creative projects which have all been groundbreaking:
A sort of dreamscape unto itself, this film charts the creation of several of acclaimed artist Aaron Koblin’s most imaginative and game-changing projects, including the crowd-sourced music video for Johnny Cash’s song “Ain’t No Grave” and the user-customized short film “The Wilderness Downtown,” which is set to Arcade Fire’s “We Used to Wait” and was created entirely in HTML5. Koblin also describes the genesis and evolution of what may be his most groundbreaking work to date: “This Exquisite Forest,” a collaborative art project and online story generator (created with Chris Milk and the Tate Modern museum in London) built and nurtured by web users. Koblin’s remarkable oeuvre draws increasingly on the immense computing, storage, and data-sharing capabilities of the current generation of computers—as well as recent innovations like hardware-accelerated browser graphics—and demonstrates in the most vivid ways imaginable the infinite artistic and narrative possibilities of crowdsourced digital creation and autonomous storytelling.
-
WebGL Webcam Dithering
Another in-browser webcam toy - this one, by @fiftythirteen takes your visual feed and converts it into a retro coloured dither.
(Best seen clicking the images if you are viewing via the Tumblr Dashboard, to see the effect work as it should).
Works better in Chrome - try it out for yourself here
-
HexGL
A Wipeout clone written in HTML5 that runs in your browser:
What is this?
HexGL is a futuristic, fast-paced racing game built by Thibaut Despoulain using HTML5, Javascript and WebGL.
CreditsHexGL was built with love using three.js, a 3D library built on top of WebGL and maintained by Mr.doob and AlteredQualia.
I’d also like to thank Nobiax for the great metalic road texture, and all the beta-testers that gave me a hand during the development phase.While there isn’t a multiplayer mode, there is a Hall of Fame for the best finishing times.
To play, go to the HexGL site here
-
Another 3D Trippy Browser Webcam Toy
It currently doesn’t have an official name, but works similar to WebCamMesh (previous post), albeit without the visible grid mesh. Put together by @mrdoob, it pseudo-converts your webcam feed into 3D (although not accurately - it’s based on colour as opposed to real depth data which you could only get with a connect).
Only works in Chrome (as far as I am aware), and you’ll need to press the ‘Hide Editor’ button in the top right.
-
WebCamMesh
Fun online webcam toy turns your visual feed into a trippy 3D mesh, running on HTML5 in your browser - by Felix Turner:
WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a ‘fake’ 3D depth map by mapping pixel brightness to mesh vertex Z positions. Perlin noise is used to create the ripple effect by modifying the Z positions based on a 2D noise field. CSS3 filters are used to add contrast and saturation effects.
Note: Only works with Chrome and Opera.
You can find out more about the project at Felix’s website here
You can try this out yourself with a webcam and browser hereDiscovered via notational and bashford
-
Recursive Harmony
Modular coding experiment by Forrest Oliphant uses popular online HTML drawing toy Harmony, turns drawings into animated fractals.
Try it out here
-
Electric Ikebana
Audio Visual 3D HTML5 generative piece put together by Douglas Coupland and Paul Humphries for Alcatel-Lucent, creates unique colourful polygon flower vases decorated with data particles:
The concept was to compose a musical track that interacts with telecommunications data of internet traffic and online activity, expressed in a visual manifestation.
Raw numerical data is visually translated into particles and their shape, colour, and quantity are determined by internet traffic volume and type.
It‘s the audio that initiates the coming together of the particles as they’re being driven by the music to build a digital form.
Each viewing is unique. This is due to the experience pulling in user‘s location and time of day while they control the point-of-view, fluidly moving around the environment.
The result is a creation that gives a voice and form to the online network, inspiring new possibilities of digital expression and electronic imaginings.
More info and links to start can be found here
EDIT: From Douglas Coupland’s twitter feed, regarding the algorithmic nursery song:
It changes every time you do it. Some of the lyrics are from Claude Shannon’s 1948 paper on Information Theory.
— Doug Coupland (@DougCoupland) June 7, 2012 -
Biodigital Human
Online browser-based interactive resource allows you to examine human anatomy:
The BioDigital Human is a 3D platform that simplifies the understanding of anatomy, disease and treatments. Explore the body in 3D!
The BioDigital Human is a 3D platform that simplifies the understanding of anatomy, disease and treatments. Interactive tools for exploring, dissecting, and sharing custom views, combined with detailed medical descriptions provide an unprecedented new visual format to learn about your body.
This app uses the exciting new web standard for 3D - WebGL.
You can try it out here - if you use Chrome, you can get the Chrome app here
-
WebGL Terrain Editing
Impressive demo of modern browser tech in WebGL + HTML5 that can create a landscape scene with dynamic and realistic graphics. Put together by Rob Chadwick:
Editing terrain in WebGL. This demo is located at http://robchadwick.com/TerrainEditor/. The drawing operations are all computed on the GPU, so interaction should be fast and fluid. Ambient occlusion, soft shadows, and atmosphere volume shadows are raytraced on the GPU. Samples are accumulated over time, and take about 60 frames to converge to a nice smooth image. Direct lighting uses spherical harmonics, and the landscape is normal mapped. Texturing uses a texture atlas. Built with OSGJS.
-
Loop Waveform Visualizer
Trippy browser-based music visualizer. Drag and drop an MP3 file and interact with your mouse. Can only work, though, with Google Chrome.
From Create Digital Motion:
Los Angeles-based developer Felix Turner of Airtight Interactive shares The Loop Waveform Visualizer. Tested for use in Google’s Chrome, it’s powered by two cross-platform, cross-browser, HTML5-associated technologies, WebGL and the Web Audio API. Give it any MP3 (you can even drag and drop right into the browser), and it’ll give you dancing, geometric visuals.
More info about the project at Create Digital Motion here
You can try the music visualizer in your Chrome browser here -
Command and Conquer - HTML5 Version
Project currently in beta attempting to convert the original classic real-time strategy game to modern browser based standards:
This is a recreation of the original Command and Conquer, Real Time Strategy game entirely in HTML5 and Javascript.
This page works best on Google Chrome or Mozilla Firefox. The images can take a little while to load so please be patient.
This is still a work in progress. Any comments or feedback (including bugs), is appreciated. I intend to develop this game further - improving the AI, pathfinding (See improved pathfinding demo here), adding more units and levels. If you are interested in helping out with this effort (even by just testing the game and giving feedback), please let me know.
