Lines is based on a writing technique from medieval times developed by monks as a solution to expensive paper and tedious writing. The monks were writing in the centre of the page allowing enough space for others to annotate the pages on the sides, method allowing you to read the story through other people’s writing. The problem arises when 5-6th person tried to comment there would be no paper space left over. As the time passed and writing material became cheaper this technique was abandoned and the techniques we used today were adopted. The team behind the project thought it would be interesting experiment to revisit the techniques using modern technologies, predominantly the “screen” as it has no borders and provides infinite space.

Educated as artists and graphic designers, trained primarily in the logics of print and haptic output, we have grown a great interest in how a transition to screen publishing, and the formats of the new media, affect the way we write, read and communicate. What are the new contracts between author and reader? How are they shaped by old and new forms, and how do new habits in writing and reading affect the way we build and share knowledge?

Continue reading.... Lines [WebApp]

Coming soon to the HTML5 toolbox is the Web Audio, still in development for Chrome, Google have a dedicated page with a number of very interesting and fun examples. Thanks to Alexander Chen for pointing out this ’3D Sonogram’ example which I seem to have missed the last time I visited the page. Here is how the new Web Audio is described:

The Web Audio API introduces a variety of new audio features to the web platform. It can be used with the canvas 2D and WebGL 3D graphics APIs for creating a new generation of games and interactive applications. The API is capable of dynamically positioning/spatializing and mixing multiple sound sources in three-dimensional space. It has a powerful modular routing system, supporting effects, a convolution engine for room simulation, multiple sends, submixes, etc. Scheduled sound playback is provided for musical applications requiring a high degree of rhythmic precision. Realtime analysis / visualizer support and direct JavaScript processing is also supported.

More at chromium.googlecode.com/svn/trunk/samples/audio/index.html

Created by Kris Temmerman, aka Neuro Productions, WebGL Tadpoles is an experiment with 30 tadpoles relying on inverse kinematic chains and moving in a 3D using Perlin Noise vector field.

Kris writes: And since they aren’t static objects, I have to project the vertices and calculate the normals every frame in JavaScript. In that sense, the JavaScript speed is reasonable. But as always, I was hoping for more. In C++ I can easily render +500 tadpoles with 4 times as many triangles per tadpole …..To get some anti-alias, I render it first in a frame buffer object 9 times the window size (width*3, height*3). So, no complaints about the WebGL speed… for now…

Try it here: webgl/tadPoles or read more at WebGL Tadpoles | Neuro Productions

Made by Neuro Productions
Music: Celestial Aeon Projectx

If you like this, see also Cindermedusae by Marcin Ignac, made with Cinder but WebGL version is in the making.

Hypertext Remix is a browser-sequencer created by Lara Warman and Kellyn Loehr. The system generates systems sounds when the browser hits the edge of the screen. The speed of each box is set by the scroll bar and the sounds that are generated are all from the OS. The project is driven by a notion that the browser is not just a tool for viewing but a performative tool in and of itself. In addition, sounds play with the idea of daily familiarity from the machines and systems we interact with every day.

Both Lara and Kellyn are MFA candidates in the Design & Tech Program at Parsons.

Created by Emmanuel Pire, Experimental Study on Web Asynchronicity is a project that uses “web time noise” as a way of composition. The noise you will find is not coded with a random function but is actually the network response time and the browser’s imprecisions that create the asynchronicity.

Browsers are smart enough to recognize that it is the same image and will load it only once, and display it everywhere it’s needed (that’s the [1/1]). In case of animated gifs, they will also keep synchronized. If it’s not recognized as the same image, the browser will then load each image separately and of course, not at the same time.

Only ,  and  set the image used. Try it at lipsumarium.com/lab/asynchronicity/

This is the personal playground of Hakim El Hattab, exploring what is possible using HTML5 and Canvas. Most recent addition includes Sinuous, a simple game built using canvas which will test your mouse pointer reflexes by having you direct your cursor against incoming meteors. My other personal favourites include Blob, Magnetic, Particle Depth and Particles.

Head over to hakim.se/experiments for some awesome HMTL5 fun or play with the code here.. Looking forward to see what’s next…

Inspired by this code in the Generative Design book, Harmony by Mr.Doob aka Ricardo Cabello is a result of weekend play with various drawing algorithms and <canvas>.

Canvas was initially introduced by Apple for use inside their own Mac OS X WebKit component, later adopted by Gecko browsers and standardized for the next generation web technologies. It consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions allowing for dynamically generated graphics (wikipedia).

Ricardo’s app includes a number of different drawing styles generally driven by connecting previously drawn points together or tangenting off the same points creating a pencil shading type effect where the edges are not as clearly defined. Ricardo also points out that the web app is built modular so he can keep adding more brush styles in the future.

In addition, because the app is basicly based on WebKit, some adaptations to the code make it work on Webkit mobile (Android and iPhone). Whilst he hasn’t implemented multitouch support yet and is a little slow compared to desktop browsers, it is quite impressive nonetheless.

Read more about the app on Ricardo’s blog.

Harmony

+ See also Mark Knol‘s flash version here.

Sketch by Edu

Somewhat similar to the Faceless Void [Processing] app by Jason Lam we wrote about few days ago, Pliable and Cubic Mirrors are two flash application created by Hitoshi Akira Nishimura aka the source-laboratory. Both apps run in your browser and make use of the webcam to represent the camera image (in real time) in the form of triangles and isometric boxes. The Pliable app also makes use of the mouse location by deforming the triangulated mesh (see video).

(Thanks Ezuob)

Created by Anthony Mattox, Pulsus is a flash game in which players must solve puzzles by arranging objects in order to move particles from an emitter into goal points. The game is in part about solving puzzles, but also about exploring and understanding a dynamic, engaging, system.

The goal of the project was to create a game that was aesthetically compelling, fun, and logically engaging. Players enter the game with little explanation and, through initially simple levels, explore how to manipulate the system to accomplish goals. While it is essentially a puzzle game, the system being solved is constantly in flux.

Pulsus was created using Adobe Flash and Actionscript 3. The audio was created in Pure Data with some mixing in Audacity. The concept of the game emerged from Anthony’s work with particle systems in Processing. You can read more about the development of the game on Anthony’s blog.

Play here: pulsusgame.com

Anthony Mattox is a digital artist and designer. His recent work consists largely of generative applications written in Processing. His generative work often uses particle systems in order to construct complex, colorful images exploring form, texture, and pattern.

Pixuffle is a fun webapp that allows you dissect and shuffle parts of your photographs to create interesting compositions. By loading a photo of your choice, you can slide left, right, top and bottom lines of the pics. By doing so you cut up the picture at sections you want. Once done, you can save the pic to your computer and the app will also upload it to this flickr group.

Pixuffle is a project by Paulo Barcelos, developed at FABRICA in 2009. Design by Magdalena Czarnecki. It is an open-source project. Access Pixufle’s code repository here.

Pixuffle

(thanks Paul!)