Livejs

About

LiveJS is/will be a Javascript based environment for livecoding or doing experiments on websites.
It's a bookmarklet, which is "a small JavaScript program that can be stored as a URL within a bookmark in most popular web browsers or within hyperlinks on a web page."

It can be used on every browser and on every website.

It's capable to use live/flickr/twitter … streams and the resources of the webpage that it runs on.
It also can receive OSC messages.

The project is also hosted by Google.
LiveJS Google Code page

Downloading

Here is the bookmarklet
or the nightly build

Screenshoots

Examples

To run codes you have to press CTRL + ENTER.
If you want to run only fragments then select it and press CTRL + ENTER.
On MAC something is dirty and this keycode does not work.
The nightly build contains a RUN button that works under MAC too.

Basic

Draw a rectangle

// clear the GFX canvas
GFX.clear();

// creates a rectangle
rect = GFX.createRect({ x: 100, y: 100, width:100, height: 100 });

// makes it red and a bit transparent
rect.setFill([255, 0, 0, .5]);

GFX is a special object that contains all the drawing functions.

---

Basic Animation

GFX.clear();
rect = GFX.createRect({ x: 100, y: 100, width:100, height: 100 });
rect.setFill([255, 0, 0, .5]);

// adds a function to the LAYER 0, it will be called in every frame
LAYER0.addTo("basicanim", function()    {

    var speed = 10;
    // calculates the new position based on the FRAMECOUNTER
    var posx = (FRAMECOUNTER % 20)*speed;

    // transforms the rect
    rect.setTransform({ dx: posx });

});

Initally there are 3 special objects called LAYERs ( LAYER0, LAYER1, LAYER2 ).
Every layer contains functions that are called in every frame.
In this case the 'basicanim' is on the LAYER0.

---

Grid layout

chars = [ 'a', 'b', 'c', 'd', 'e' ];

SCR.innerHTML="";
for (var i=0;i<200;i++)    {
    SCR.innerHTML+="<span>"+chars[i%5]+"</span>";
}

// makes a grid from spans
makeGrid($$('span'),{ stepx: 10, stepy: 10 });

---

Grid layout with animation

chars = [ 'a', 'b', 'c', 'd', 'e' ];

SCR.innerHTML="";
for (var i=0;i<200;i++)    {
    SCR.innerHTML+="<span>"+chars[i%5]+"</span>";
}

LAYER1.addTo("anim1", function()    {
    makeGrid($$('span'),{ stepx: FRAMECOUNTER%40, stepy: FRAMECOUNTER%40 });
});

---

Gets flickr images by tags

LAYER0.addTo("func1", function(r) {
       var images = r.value.items;
       dojo.forEach(images, function(v) {

            // put them into the screen
            SCR.innerHTML+= v.description;

       }); 
},0);

// images with the tag 'tits'
getFlickr('tits',40,'LAYER0.func1');

---

Spiral layout with flickr

LAYER0.addTo("imageProc", function(r) {
       SCR.innerHTML = "";
       var images = r.value.items;
       dojo.forEach(images, function(v) {

            // put them into the screen
            SCR.innerHTML+= v.description;

       }); 
},0);

getFlickr('sexy+tits',100,'LAYER0.imageProc');

var alpha = 0;
LAYER1.addTo("animFlickr", function()    {
    alpha+=PI/720;
    makeSpiral($$('img'),{ r: 200, alpha: alpha, cx: 200, cy: 200 });
});

Documentation

• Preparation
• Structure

Source

http://livejs.googlecode.com/svn/trunk/LiveJS/

Non-members may check out a read-only working copy anonymously over HTTP.
svn checkout http://livejs.googlecode.com/svn/trunk/ livejs-read-only

Similar stuff

• Jsaux

Future development, todos

LiveJS's metanotes

Comments

Add your comment