
Realtime Three.js Coding - franze
http://mrdoob.com/projects/code-editor/
======
mrdoob2
Is not just for three.js. It's for anything HTML/CSS/JavaScript. Originally I
built it because I needed a temporal editor for coding on ChromeOS and the new
packaged apps -- for which there is an editor in the works already -- hadn't
reached the dev channel yet.

------
terhechte
I love it. Reminds me of the Hotswap feature in Eclipse which Notch seems to
use a lot for building his games. I wish there was something like that for
UILayer, UIView and OpenGL in Objective-C. I know about the REPL in
RubyMotion, but it's Ruby and a REPL is still not the same as having a live
preview of editor changes. I really hate the fix-compile-test workflow, and
especially for layers and layer animations and so on, I keep myself compiling
and restarting an app multiple times until the speed, delay, looks parameters
feel _right_.

I guess it's really difficult to implement something like that in Objective-C
though. While it's possible to replace methods through method swizzling with
new methods (say from a category), and while Objective-C allows to add
categories to a NSBundle and dynamically add that NSBundle to a running app,
this doesn't work on iOS as far as I know due to security limitations.

~~~
phn
What notch used is a step further. From what I get this page simply
"refreshes" the code and starts the execution anew. Notch is actually hot-
swapping code, for example the code in the update function of the game,
leaving the game state intact. If he wants to test a change in the init code
for example, he would need to restart the program.

Either way, very cool way to play around with three.js without having to
switch back and forth to the editor.

~~~
outworlder
Is that documented anywhere?

~~~
phn
I have no idea, I just remember it from the stream from notch. I also
experimented a bit with something similar for python.

You can find it here: <http://www.krause-software.com/hotswap/>

I think it worked so well for notch because the code he was changing was in a
different class than the program's entry point, so the virtual machine had it
easy swapping the code. Once again, I don't know the details, it is just my
impression from what I saw that time.

------
larister
Brilliant. I wonder if it was inspired by Brett Victor's fantastic talk
'Inventing on Principle' (<http://vimeo.com/36579366>) - it seems there have
been many such efforts to break the barrier between writing code and seeing
the effects since that talk appeared. Maybe it's just that the talk made an
impression on me and hence I've been noticing this sort of thing more. Either
way, bravo Mr Doob.

~~~
mrdoob2
I feel that talk made an impression on many people. I think that talk made
live editing "mainstream" and Bret "stole" the concept by doing a good show
just like Apple does. It's been done for years but no one "bothered" making a
good show/product that wowed people.

From the top of my head (fluxus) [1] and impromptu [2]. And I bet every game
company have their own live editing tools.

Anyway, </rant>.

What inspired me was this video of Iq's live coding setup [3] from last year.
Months later I made a webgl version [4] to help spread glsl know-how. Then
doing the HTML/CSS/JavaScript one was just natural de-evolution :)

[1] <http://www.pawfal.org/fluxus/>

[2]
[http://en.wikipedia.org/wiki/Impromptu_(programming_environm...](http://en.wikipedia.org/wiki/Impromptu_\(programming_environment\))

[3] <http://www.youtube.com/watch?v=9g8CdctxmeU>

[4] <http://glsl.heroku.com/e>

~~~
p01
Not to forget JSbin that has been here for a good 4 years now and many other
live editors like it.

------
spicyj
(Shameless self-promotion:)

Though it's currently hard to do 3D, we have similar features in the Khan
Academy CS section:

<http://www.khanacademy.org/cs>

However, we don't restart the code from the beginning when you change
something -- you'll notice that if you change the code in the linked page, the
icosahedron jumps to a new angle, whereas with the KA environment, execution
continues from the current state.

~~~
mrdoob2
Maybe I should change the default code to use Date.now()? ;)

~~~
spicyj
That would certainly give the proper illusion. :)

With our environment, you can interact with it and it'll maintain that state
as well.

~~~
ibdknox
In John's post he mentions that doing hotswapping is very hard, but that
hasn't been my experience so far. Can you by chance expound a bit on what
makes/made it so difficult?

~~~
spicyj
I'm curious to see what you've done -- anything you can share?.

I'll let John write up the details in a future blog post, but mostly there are
a lot of strange edge cases and problems that have to deal with maintaining
closures, etc.

------
risratorn
A little off topic perhaps but what amazes me the most is that the Three.js
code is actually understandable for someone who doesn't do 3D programming. It
all makes sense, and the interface is just perfect.

~~~
mrdoob2
Glad to hear! :_)

------
failrate
Every day, I am more appreciative of the work the mrdoob is doing to further
browser-based 3d work.

------
Mizza
Autistic and awesome. I always try to make transparent terminals for real time
web development but give up in frustration and go back to doing it the old
fashioned way.

This is a cool interface. It's fun to use math/graphing libraries in design. I
used one for this: <http://webp2p.org>

Good stuff

~~~
Gigablah
> Autistic

That's a rather unfortunate typo :)

------
munaf
Since we're on the topic, there's also Tributary if you're doing d3 stuff.
<http://enjalot.com/>

------
quadhome
Something similar for unit-testing and Space Invaders:

<http://testinvaders.heroku.com/>

------
RKearney
There's almost zero contrast when selecting text. This makes it nearly
impossible to see what text is selected on the screen.

The text also seems to randomly become bold and/or disappear and flash on the
screen when trying to select text.

~~~
89a
Your browser or personal settings must be clashing with it.

Works fine for me

------
Johnyma22
This needs integrating into Etherpad. I'm sure the sketchpad guys might be
interested.

------
gnarbarian
I started making something like this with codemirror. It's got autocomplete
too with ctrl+space

[http://dl.dropbox.com/u/22541447/motorboating-
pirates/index....](http://dl.dropbox.com/u/22541447/motorboating-
pirates/index.htm)

------
Riesling
This is definitely a nice showcase for three.js.

I don't think one could lower the entry barrier any further. More projects
should use this approach.

I started playing with it immediately and I am already thinking about projects
I could use this for.

------
jarek-foksa
Are you still planning to release commercial version of Harmony? I remember
that you were mentioning it few months ago on Github.

~~~
mrdoob2
As soon as packaged apps gets green light. Not sure if commercial, but sure an
installable webapp with some improvements. I guess I'll recode the whole thing
:P

~~~
jarek-foksa
Commercial version of Harmony that can be integrated with third-party apps
would be great. I guess you could use simillar licensing model to Potrace:
<http://potrace.sourceforge.net/#dual>

------
EastCoastLA
Needs to have the image open in another window rather than behind the text.

~~~
pacomerh
You're missing the whole point of not having other windows open

