davidedc / livecodelab

a web based livecoding environment

On-line live coding environment

LiveCodeLab is a special secret place where you can make fancy "on-the-fly" 3D visuals and play awesomely offbeat (literally) sounds.

"On-the-fly" meaning: as you type. Type just three letters: "box", and boom! A box appears. No clicking play, no waiting, no nothing.

Play! http://livecodelab.net/play/

Live coding in the browser

LiveCodeLab has been used by several groups/people for:

Education

it's a great way to get kids and adults interested in code, as it allows for instant feedback and easy pair programming. It helps introduce simple concept like loops, and much more complex like transform matrices!

Showcasing modern browser features

it's a nice showcase of what browsers can do with the latest 3D and JavaScript implementations.

Creative coding

It's a live coding tool that artists can use, misuse and tweak. Go full screen, hide the code and you can make incredible screen recordings with just a few lines of code!

Auto-coding

Automatic coding in the browser is still quite a virgin territory. It's been done a lot with lisp-y languages, but not quite in the context of things like LiveCodeLab, so there is an opportunity to do quite some original work there.

Roadmap

Roadmap? Where we are going there are no roadmaps. If you insist, here is what's currently in our mind:

• Make the code nicer (always the case, isn't it?)

• Ways to share programs with others.

For a more fine-grained look at ideas and bugs, take a look at the tracker

Libraries used

• Three.js by Ricardo Cabello aka Mr.doob.
• CoffeeScript by Jeremy Ashkenas.
• LowLag.js by kirkjerk
• Processing.js library by J. Resig.
• Code Mirror by Marijn Haverbeke.
• Scrollwheel handler by Brandon Aaron.
• McLexer by Matthew Might.

Main contributors

• Davide Della Casa. Made the first version.
• Guy John aka @rumblesan. Massive, massive contributions: refactored the code big times, set-up a proper build system, undoes the entropy done by others, working on new parser.
• Thomas van den Berg aka noio: support for midi input, refactoring of event system, tweaking of several bpm-related functions.
• Matthew Lawrence: replaced the old "plasters and regexes" autocoder hack with a much more proper lexer-based solution.
• Julien Dorra: contributed to french version, refactoring and great UX/UI feedback.

Documentation

Please check the docs-overview file in the docs directory for an overview of the available documentation.

Glamour shots

livecodelab's Issues

refactoring of primitives drawing functions

the routines for drawing primitives ( line, box, ball... ) contain aweful duplications. Heavy refactoring needed.

French and UK localisation should be handled in separate localisation file.

The localisation strings should have a suffix that makes it clear that they contain localised strings.

There should be two different suffixes: one for the strings that belong to the "windowing system" and menus and menu entries, and another one for the language.

The keys should be initialised at launch.

So for example the "box" keyword should be replaced with box_LOC_KEYWORD, and that should then be initialised at launch.

"Autocode" should be replaced with autocode_LOC_ENVRMNT and that too should be initialised at launch.

The reason why there are two families of localisations is that we could aspire to auto-detect the language of the program (say, French) and run it transparently even if the environment stays in English.

function to change text background color

if you use this, when you change the text color then the text background color is not changed

keeping variables and their values across frames

Why is this useful:

• you could want to have a variable that remembers if something particular happened in the previous frame
• it's not always possible to quickly calculate the content of a variable as a function of the state of one frame only
• with arrays, one might want to accumulate values that cannot be calculated quickly within one frame only
• simple state machines

So the new behaviour would be that by default all top-level variables are kept across frames. This could be done in a couple of ways:

---

CoffeeScript.compile and CoffeeScript.eval accept a "sandbox option", which might help in creating a scope that maintains state across executions? I didn't look much into that but it's likely to work that way. See https://www.google.co.uk/search?q=CoffeeScript.compile+sandbox and http://coffeescript.org/documentation/docs/coffee-script.html

---

1. create a scopeAcrossFrames object that holds all the variables that will be preserved across frames
2. in the code manipulation step, find all variables declared in the first var block. Coffescript automatically aggregates all "top-most" variables in a block of var declarations at the top.
3. for each variable declaration in the block of vars of above, first check whether thisAndThat already exists in the global scope or in the scopeAcrossFrames object. If no, then the variable is created and initialised in the scopeAcrossFrames object. If yes (it does exist in the global state already), then skip it. So for example:
   var thisAndThat;
   at program translation time if the thisAndThat variable is not defined in the global state already then a) var thisAndThat is removed and b) scopeAcrossFrames.thisAndThat is created and initialised with null
4. If the thisAndThat exists in the scopeAcrossFrames object (because it's just been created just now or before), then replace all the occurrences of thisAndThat with scopeAcrossFrames.thisAndThat (or with this.thisAndThat if you choose the way of calling call(scope object) passing a global scope object)

Note that while the user types his intended variable name, variables for all the substrings will also be created. This is probably not a problem for

"times" should also be able to bind to a variable

...something like

3 times (x) ->
   do something with x here going from 0 to 2

protection mechanism against slow sketches

in every loop and every start of function, a watchdog should be added that checks whether it's a case of infinite (or too long) loop or infinite (or too long) recursion. This is because you want to recover nicely from those cases and show a "slow sketch" dialog before the "sick tab" dialog of the browser prompts you to stop all javascripts.

if you get the name of a samples wrong then...

... the other samples play in an odd way too

The examples should fade-in more nicely...

...maybe with a bar saying artist and title?

add "scan line" and "grid" overlay effects to livecodelab

adding a "scanlines" or "grid" overlay effect should be easy and performant in both the canvas and webgl version.

An example of the "grid" overlay effect (although a faint one) see this:
http://www.webgl.com/wp-content/uploads/2012/04/webgl-daftunes-2.jpg

One could start with implementing the canvas version, which consists with just an extra div with a repeating line or dot pattern. If that performs well in all browsers then that's it.

For webgl, in theory this stuff is better done via shaders, so one could look into that option as well if it makes things faster for webgl-enabled browsers.

if the background is solid and fully opaque then...

you don't need to have a situation of transparency with a solid fill below.

It can be easier, where the div below does nothing, and just the webgl context initialises the background with a solid opaque fill.

I have no idea if this is worth doing, because it might be added complication that streamlines something where there is no performance gain.

But maybe it's worth adding a comment somewhere explaining this edge case, just to say that someone thought about it.

implement "bigger" and "smaller"

which is a shorthand for scale(1.1) and scale (0.9) - or some constants like that

add a debug variable to turn on/off the window.onerror catch-all mechanism

there is a function in livecodelab.js that catches all the errors:

window.onerror = function(msg, url, linenumber) { ...

This is great in the livecoding environment, but it's bad for when debugging the environment itself, because it prevents error from being revealed/handled by the debugger in the browser.

So there should be a quick switch to enable/disable that catch-all mechanism.

add command to change cursor color

if you use this, when you change the text color then the cursor color is not changed

resolve warning "Variable referenced before declaration: max"

WARNING - Variable referenced before declaration: max
var max = max(max(red, green), blue),
^

Safari 6 revamps Web Audio API - check whether you can avoid preloading sound

...right now in Safari all sounds are preloaded. Which means that the time-to-launch time is quite long and loads of memory is used (and never released by the way, Safari tends to leak memory).

If the new Web Audio API implementation works like in Chrome, then maybe sounds can be loaded dynamically just like in Chrome?

add a spin function

spin is like a rotate() but it's based on the tempo

there should be a four-arguments "rotate" and rotateX rotateY rotateZ

the current
rotate(xrotate, yrotate, zrotate)

is really "home made", it's not a conventional notation for rotations. It assumes that you always have to rotate around X first, then around Y second, and then around Z last. (the order of the rotations matters). This is quite arbitrary, there is no specific reason to force that order on the user.

So if instead of doing that one wanted to rotate around Z and then Y and then X, then she'd have to use three separate rotates with three arguments.

The "serious" way of doing this is

1. to have separate rotateX, rotateY, rotateZ. Which is what Processing does
2. have a four-arguments rotate which uses quaternions (which are related to euler axis notation, which takes 3 arguments to specify an axis of rotation, and the last parameter to specify the rotation around it).

For more info on notations of 3d rotations see: http://en.wikipedia.org/wiki/Rotation_formalisms_in_three_dimensions

addSound should work even if there is no bpm. (There should be a default bpm).

autocoder should stop if user types something...

one can probably detect whether the user is typing something by checking keypresses, but note that CMD-z (undos and redos) should keep the autocoder going.

resolve warning: "unreachable code: editor.setCursor(0, 0);"

WARNING - unreachable code
editor.setCursor(0, 0);

Why simple gradient is different when parameter is zero vs. parameter being color(0)?

Wireframe becomes black when ambientLight is on

to reproduce:

ambientLight 0,255,255
rotate time/1000
noFill
box

semi-transparencies bring up the black values of the (transparent) background

For example the motion blur as implemented now is really just a dark shadow - it doesn't retain color. Which is just about OK because it still does convey an idea of motion, but it's not as good as it could be.

This artifact can be seen here:
http://www.sketchpatch.net/labs/screenshots/ScreenShot17.png
and here:
http://www.sketchpatch.net/labs/screenshots/ScreenShot16.png

This implementation of motion blur just blends in the last two frames. Note that both frames have transparency (as visible form the pictures linked above, the gradient background is a separate div that is shown through the transparency).

See in the next comment a simpler case where this happens, which doesn't even involve motion blur.

when livecodelab starts, gameboy's turn-on sound plays

would a "pegDetail" function be needed?

this would be the analogous of ballDetail for "ball"

think about whether to rename "bpm" into "beats"

one one side, I find "bpm" to be too technical. On the other side, some friends tell me that it's actually quite "street" and "beats" wouldn't quite mean the same thing...

implement radialGradient (for the background)

autocode bug: ballDetail occasionally turned to boxDetail...

...and boxDetail clearly doesn't exist. Just a matter of refining the regular expression.

editor fade-ins and fade-outs stutters a bit...

…maybe due to jquery messing about with divs? Can anything be done?

regex failing on last line without newline

…unless you add a final newline, which satisfies the regex for turning that line into line();

rotate millisecs/1000
pushMatrix // bookmark the position after the rotation
line
translate 0.5,0,0
line
popMatrix // go back to the bookmarked position
translate -0.5,0,0
line
resetMatrix // resets the position
line // not affected by initial rotation

make it so the minified js actually contains ALL the javascripts

re-use the matrixes across frames

seems like as matrixes are used across frames, and pushed and popped within a frame, they are effectively created anew and destroyed.

It's probably worth to optimise that and keep a bucket of reusable matrixes. Maybe making the mechanism quite modular so you could switch it off or delete it altogether if you change your mind in the future (or if you want to get a build without that particular feature).

look into options for concatenating CSSs

console.log() should be put behind an helper function so that...

so that
a) it can be turned of or on globally
b) we can avoid console.log() to break browsers that don't support it, such as IE

Is the space character relevant in the beat sequences? It shouldn't be.

add a nice Livecodelab banner to the github page

resolve warning "Variable referenced before declaration: min"

WARNING - Variable referenced before declaration: min
min = min(min(red, green), blue),
^

add a "clean" script that deletes...

add a "clean" script that deletes both that html and the minified javascript so we don't keep those around when not needed and we don't check those in.

Use the Three.js concatenation/minification system.

As we'll split the source code in different modules, it would be good to use the same concatenation/minification system that Three.js uses (or very similar).

So that there is no penalty in splitting the source code in as many parts as we see fit.

add a "tempo" function

the tempo function sets a rhythm to which many things align. Setting a tempo sets a default wave period, and a default speed at which default rotations and "wobbly" default scale happens.

add a "wave" or "wavy" variable

which is a shortcut for a -1 to 1 sin wave based on a "tempo" variable.

add command to change the highlight color

if you use this, when you change the text color then the highlight color is not changed

add command to change the text color...

... this should change the cursor color and the highlight color and the text background color as well.

Question is: how do you infer good default colors of highlight and cursor and background given the text foreground color?

addSound should also accept sound as constant as well as string.

users can only choose from a finite amount of sounds, so a constant would make more sense and it's quicker to type because there are no quotes.

I'd like to keep the strings version as well because one could generate the strings programmatically e.g. "penta" + n.

drawbacks:

• there will be many additional constants, there is a risk of user picking a variable with the same name

Check if the stroke is the wrong size because some graphic cards only accept integers for lines…

Just round it to an integer and see what happens. If it works - the reason why it's not an integer is
a) the user passes something other than an integer
b) the stroke is meant to be layered "outside" of the fill, so that outer layer is scaled to be slightly bigger

the beats are wrong, each beat should be 4 of the "X" characters

automatic detection of whether user is using radians or degrees

a possible way to do this is to keep a list of, say, the last three numbers used for rotations.

If they are all multiples of either 5 or 33 (noting that 0 doesn't count) then switch to degrees. Otherwise keep radians.

Or you could do the other way around.

This automatic mechanism kicks in only if the user doesn't manually specify the mode invoking something like "useRadians" or "useDregrees".

autocoder to swap Xs and Zs in the music sketches

automatically generate the html file pointing to the minified resources

command for playing sound should be named "play" rather than "addSound"