Well so today I'm doing JavaScript and stuff.
Ok, cool, well, I'm really pleased to be here.
I think well probably one or two of you might
have seen me around a little bit. But what
I've been doing. Well in fact let me give
you a little bit of a background on me. So
I'm Seb Lee-Delisle and a few years ago,
maybe '04, I founded Plug-in Media a small
digital agency in Brighton. We do a lot of
work for the BBC and other really quite.. a
lot of kids stuff yeah so and this is a project
we did for Turner Broadcasting, a Tom and Jerry
music game, and we've also won a couple of
BAFTAs for our kids websites we did for CBBC
projects. So as well as doing that I mean
these days I also do. This is Big and Small
which is one of the CBBC projects that we
won a BAFTA for. Did I mention that? Yeah
did mention it. I'll mention it one more time
probably. So yeah this is a really immersive
3D Flash world all done with Papervision.
I was on the Papervision team. So this was
like one of the biggest projects I ever worked
on. It was just massive. But check it out,
if you're 5. But what I also love doing
outside of Plug-in Media is my own projects
and lots of research. I love doing any kind
of visual interact stuff. Here's something
I was doing at Brighton's White Night. We
were projecting onto this building, Tweets
that turned up with a particular hashtag and
a generative art piece in the middle. And
this is my favourite thing that I ever made
which was some interactive fireworks. You
just waved your arms around and fireworks
came up. I've got a video of that if you want
to have a look. So I'm quite, mostly known
as being a Flash guy which is a bit scary
at a London Web Standards meet up. But the truth
is is that, you know, I'm actually I've done
lots of different things. And you know I've
made an iPhone app, I started off doing Amiga
programming. I was director programmer. And
all of these different things you know they're
just ultimately. I'm not really one thing.
In fact these days I seem to be switching
from technology to technology on a week by
week basis. Whether it's, you know, still
a little bit of Flash, but also I'm teaching
processing, I've just done my first project
in Open Frameworks C++ and of course I'm
doing a lot of JavaScript as well. So I'm
really getting into that sort of headspace
of switching languages. But there is one common
denominator with all of them and that it's
all creative code, right. It's all visual,
right. And I'm finding that I'm redoing much
of the same stuff in all of these technologies.
It's really, really nice. So you might have
heard of the creative JS hashtags. So I'm
running these workshops and here's a little
video of some stuff that people did on the
last Brighton workshop. The music's really
quiet. But there we are. I'm going to be showing
some of this stuff today, so I'm kind of
going to go through a real whistle-stop tour
of some of the best bits of the creative JavaScript
workshops that I run. And lots of particle
effects. I'm quite known for particles really.
They're kind of quite a fun thing to do. And
make something move in a direction and make
it fall down which is fun. But make a thousand
of them and then it's like at least 10 thousand
percent more fun. A lot of games stuff. I've
had loads of experience making games. Casual
games particularly in fashion again now we're
looking at courting some of that stuff into
Canvas and open browser technologies. That
was Rob's, Rob's wasn't it? That was Rob's,
the little world? He was playing with he was
on my course as well. Obviously I taught him
everything he knows. That's Carlos. That race
car back then was quite interesting. Because
that was Carlos Ulloa who also came to my
course. Carlos I know very well from, well
he was the founder of Papervision right. So
I worked with him on that project and he was
just sort of a bit grumpy on my course. Going,
oh it's so trendy, isn't it, JavaScript?
But by the end he just basically blew everyone
out of the water with this incredible, you
know, shaded race car in WebGL. You might have
seen it on the internet the shiny racing car,
Hello Racer that is you know. I mean Carlos
is just you know expert at doing brilliant
shading and modelling in real-time 3D. So
keep an eye on him. So I'm not getting
to 3D yet. I just wanted to get to particles.
I'm just going to move straight to particles.
I'm going to do some live coding which
will be really good with one hand. I haven't
quite worked that out before. You'd think
I'd be used to typing with one hand, erm what?
[Audience laughs]
It's nice you make your own jokes, it's really
good. Ok, I think we've sussed the London
crowd. Oh look, I've just got a microphone
holder there. There Nick. Let's hear it for
Nick. [Audience clap] But tonight I'll call him Mike.
And by the way, I'm just going to leave my Twitter
open, so if you want to Tweet anything embarrassing
that would be funny. Oh look, BAFTA winning.
Did I mention the BAFTA? Ok. Ok so, ok I'm
just going to hope you can hear me at the
back. Mike isn't doing a great job of being
a stand, but that's fine. Right, I've totally
lost my place now. So I'm just going to talk
about particles. So much of what I do is about
physics. But not real physics, not engineering
physics, cheap, fake physics. So if you want
to move something along then you can just
update its position every frame, right? And
in this case we're moving this ball 4 pixels
every frame. That's kind of like its velocity,
right? That's its rate of change. We're just
drawing it one time, in one position and then
the next 4 pixels along. We can recreate drag
in a really complicated way or a really simple
way. That kind of looks ok. So we do it this
way, which is the simple way, multiply that
by point nine every frame and it slowly gets
a bit lower. And it looks like our object
comes to a halt. Yeah. Are you with me? Good.
So that works in 2 dimensions as well. So
we can apply the same amount of drag to the
velocity in both of the x and y dimensions
and then we can recreate gravity just by adding
a little bit to the velocity every frame.
There you go. I just taught you particle physics.
[Audience clap]
Thank you.
>>Audience member: With one hand
>>Seb Lee-Delisle: It's alright, thanks to
Mike I've got my 2 hands now. Ok so, right
and then there's simple. In fact I'm not
going to talk about Simple Collision Detection.
If you want to know about Collision Detection
you should come to my course. Oh yeah. So
here we are, we've just got a simple.
>>Audience: Have you got a book out?
>>Seb Lee-Delisle: I don't have a book out.
But I'm talking to O'Reilly actually about
a little ebook. I'm a bit busy though, so
God knows when I'm going to be able to do
that. Ok, so here we are now. We're going
to make a particle. This is our particle object.
I don't think I reset this file properly,
but that's fine. I'm just imagine you haven't
seen any of this stuff. There. So look at
that. So alright, so some fresh code from
scratch. So we're going to make a particle
there in the middle of the screen and we're
going to render it. Particles and objects
here I've imported it into my JS folder. This
is just the Canvas so I'm just going to draw
the particle on the middle of my Canvas. Oh
it didn't work. You know why? Because I need
to take the pass in a context. I hope it's
called context not contexts. So you know with
Canvas on the API you have to pass in a reference..
What have I done? Oh look it's
there, eh. I'm clearing the rectangle every
frame. Ignore me, ignore me. There you go
our very first particle.
[Audience laughs]
Yeah yeah ok well
that's pretty exciting. Now it's not moving
though, you probably want to make it move.
So instead of just drawing it once, let's
set an interval. Set interval calls this function
x milliseconds per frame and because we want
it to run 30 times a second. We divide a 1000
by 30 and that gets our frame rate in milliseconds.
So every frame I'm going to clear the rectangle
and redraw the particle. Yeah yeah, so now
we've got an animated particle. Are you ready for this?
Oh, damn my mouse. What's going
on? Yeah, it's animating? It's just not, I'm
not actually removing it at all but it is
animated because I'm redrawing it every frame.
So we have to actually set some of the properties
of the particle for that to work. I can never
remember what they're called, but let's just
try velX. So let's just try velX which is
basically the x velocity if I haven't screwed
that up. Oh goodness, live coding, bring it
on. There you go. Oh did you see that? Did
you see it? Hang on, are you ready for this?
Whoa, that's a pretty fast particle.
[Audience clap]
Thank you everyone, thank you. I know it's
ironic but I don't care. So we can make it
slow down and we can add gravity to it of
course. So we can set the drag. And this is
what I did before. So point 9 it should come
to a halt pretty quick. Yeah, well it's a
bit small. Let's make it a bit bigger.
There you go. See how it just grinds to a halt.
A bit fast probably. We could probably reduce
the effect of drag by making that effect closer
to 1 and adding some gravity. Shall we add
some gravity? Maybe point 5 so that increases.
There you go so now it falls down. So we've
got our particle, it's moving around. It's
doing that physics just like I showed you
in the slide. That must be really hard for
you Nick, I'm really sorry.
>>Nick: No I'm not worried
>>Seb Lee-Delisle: Is it alright, yeah? So
1 particle is cool. But really the whole point
of the particle system is that there's like
like a gegillion if you're in open Frameworks,
but if you're in JavaScript, hundreds?
[Audience laughs]
So,ok so all we need to do is make an array that
we put our particles in. Set the maximum number.
Every frame we make more particles. Clear
the rectangle in the Canvas. Go through each
particle, render it and update it. And then
here this bit takes particles off if we've
got too many. That's the bit that makes the
particles there, we just said it. So size
and velocity to a random amount. In my course
I explain all of this really well, it's brilliant.
There you go, we've got some particles. That's
a bit better isn't it? Yeah.
[Audience clap]
Thank you. Yeah I know you're getting a bit
bored of clapping but stay with it, it's good.
Right so we also have this shrink value which
makes it. We multiply the size by that value
every frame. So see how they get a bit smaller.
And but we can also subvert the shrink by
giving it a number greater than 1. And then
actually our particles get bigger. Whoa, look
at that? And we can of course adjust the amount
of velocity and drag. Just make the drag a
bit lower and you know we can make them fade
out a bit as well. So that makes them a bit
more transparent yeah. So you can see straight
away, I'm just editing these values to get
slightly different effects. But what's really
cool is instead of just using like a white
circle we can actually use an image for our
particle. In which case, let's just take a
look at the next example which uses an image.
See now we've got all these little flying
sparkly things. Whoa, and when I click even
more come out. And see that they've got a
nice bounciness and stuff as well but. So
exactly the same code as before, I'm just
using a different image and using a very simple
Collision Detection algorithm that's basically
like just one line of code. Right let's have
a look at the next example. So now see we're
using quite a few of these particles and they're
blobbing out. And now every time I draw a
new particle it gets drawn over the top. But
one of the little tricks that I've learnt
in along the way. Because most sort of graphical
programming environments have this concept
of additive blending and the Canvas is no
exception. Except they call it the Composite
Operator, Composite Operation. And my particle
implements the composite operation. So by
setting the particles Composite Operation
to lighter it means that now particles get
rendered with an additive blend. So what an
additive blend is like is if you've used Flash
it's like the blend mode add. Or if you use
Photoshop it's like when you have the blend
mode which is like lighten, right. So light
stuff shows through underneath the dark things
that you put on top. As soon as you've set
that things blob together. That didn't work.
Did I save it? There you go? Yeah, pretty.
[Audience clap]
Why not just slow clap? I mean God. Ok so
that's some other cool particle stuff. Now
with this example, I've got, I'm using a different
image. Look, I'm just using this image there.
It's a fuzzy white circle. And let's just
take a look at some of the values that we're
giving it. Well we're giving it a random velocity
between minus 5 and plus 5. So that's a little
bit of left and right movement. No up and
down movement at all. A random size, a random
transparency between 20 and 30 percent. A
gravity of minus point 2. What do you think
that will do to it?
>>Audience member: Float up
>>Seb Lee-Delisle: Float up, yeah. Good call.
So a bit of drag. Shrink means that it gets
bigger because it's a number larger than
1 and fade means it fades out. So what sort
of effect do you think this will create? And
don't tell me if you've seen this already, Rob
Any thoughts of what that might look
like? Lots of little fuzzy white particles.
>>Audience member: Bubbles
>>Seb Lee-Delisle: Bubbles
>>Audience member: Smoke
>>Seb Lee-Delisle: Smoke! Let's see if it's
smoky. Perhaps it could be. Who knows? who
knows? There you go and it follows the mouse.
See, some nice smoke. Ok, you're not going
to clap that one. That's fine. But actually
you know this again is an example of how you
can be creative. Because that's exactly the
same code as last time, right. But we changed
the numbers and you get a completely different
effect. It's so powerful this particle system.
I've been using a system like this for years
and years. To do all different kinds of drips
and blobs and explosions and things blowing
up and things on fire. And other things that
have temporarily escaped my mind. But this
is an example. I wanted the smoke to be a
bit more affected. To be a bit more sort of
like turbulent. And I didn't really know how
to do it but I just imagined that maybe if
my particle images like this are kind of crescent
and maybe if I could spin them round a little
bit. Yeah, maybe we'll get a slightly more
realistic smoke. So let's have a look.
[Audience clap]
Yeah, ok cool thank you, thank you. So particle,
I can't remember what 4 is, oh 4 is amazing,
particles 4. This is my favourite particle
effect ever. But it builds up slowly. Right
so here's my particle effect. It builds up
slowly. It follows the mouse. It's kind of
a weird image. Let's just take a look at that
image. It's in here and it's this one. So
what we notice about that is, it's completely
it's not transparent at all, it's black.
With like blue, with a big fuzzy blue. You
can't really see it on this screen but there's
a big fuzzy blue glow around it. So see at
the moment they're covering each other up.
And that looks a bit rubbish. You can see
they're also sort of flowing out of the mouse
a little bit. But again this is an example
where if we set the Composite Operation to
get additive blending then it looks completely
different. Yeah, I love that one. That guy
loves it as well and that one.
[Audience clap]
You all love it. It's brilliant. But there's
one more element that I want to add. In fact
there's a couple of more elements. This is
getting really exciting. So there's this shimmer
property and all this does is it randomises
the size between 0 and where it should be.
So it's a random value. So it could be any
size up to the size that it's meant to be.
And then look at that. [Audience goes Ooh]
[Audience clap]
Yeah yeah thank you, both of you. And but
the final thing. And now what I'm doing in
this example is I'm also keeping track of
the mouse velocity and how fast that mouse
moves and I'm taking a little bit of that.
And I'm actually going to add some of it to
how the particles, the speed the particles
go when they're formed. And that makes them
look like I can sort of throw them around
a bit. Yeah yeah. That's my favourite particle
effect ever. Right and these are all just
Canvas examples so, as Rob said, Canvas can
be pretty slow. Even on the new iPad 2 it's
still quite slow. So I thought I'd experiment
with doing like DOM objects for particles
right. So we're going to take. In this case
I'm taking a div and I'm making loads of divs
and that's going to be my particles and I'm
moving the divs around. So there's, just take
a look. So you've seen that before. That's
kind of similar to the one we did before.
Now that actually works on the iPad. So let's
see if I can find it on here. Now, there it
is. Right, so you can see it. Can you see it?
>>Audience: Yes
Yeah, so that's my particles there. And you
can see now that after a little while it starts
to tug a little bit. So can you see there
that my frame rate's a bit low there? So I
think Rob, did you mention the CSS 3D pack thing
>>Rob: No
>>Seb Lee-Delisle: Ok so in most. In WebKit
browsers and in Firefox, maybe? In Safari
and WebKit and maybe Firefox I don't know.
You can give a DOM object a 3D transform as
a CSS property and then magically hardware
acceleration kicks in. So if I do that on
this and refresh. Oh I've pushed the wrong
button. I don't know what I'm doing. Yeah
and now you probably can't see but that's
running a lot smoother and it will carry on
running smoothly and that's a really neat
trick. So if you want to. Like actually it
gets to the point where you could actually
make a game with this technique right. With
these DOM objects. Just moving them around.
Forget Canvas just.
>>Audience: So is the DOM faster than Canvas
just on this one?
>>Seb Lee-Delisle: It depends exactly, yeah
it is. It's pretty much faster than everything
to be honest. It's probably. Most of the time
it's going to be faster than. Oh I've lost
the wifi. Do you want to, shall we plug this
in? Do you want to? Maybe we don't need to.
Maybe we'll show you some stuff on that later.
But yeah, most of the time it's faster.
>>Audience: SVG
>>Seb Lee-Delisle: SVG, I don't know. SVG
is faster than Canvas usually. But these are
it like depends on the case that you're doing.
I mean SVG makes DOM objects so it's the same
sort of thing. More benchmarks required. So
the other thing that I did. It was Paul Rouget
who actually set the challenge of distributing
a load of circles on a within another circle.
That and figuring out how to randomly distribute
them. So although he wanted a particular type
of algorithm that I didn't give him. I did
come up with an entirely different one that
kind of worked. And all they do is these little
particles they repel each other. So when you
make, and also they're kind of held within
a big circle. So when I make a whole load
of them. In fact, I'm sure I've got an example
which does that. But I it clicked for me.
Hang on, let's just have a look. That may
save a bit of time. There we are. There you
go, that's better. So it makes a load of particles.
They're all repelling each other. They
just basically calculates how far apart they
are. And it puts a force on them. From that
and then look see how they just all jiggle
around and sort themselves out. That's really
quick oh. And I can just keep adding them
and adding them. And I thought well wouldn't
that be fun to do in 3D. So I took Mr. Doob's
3D 3 dot JS, the JavaScript library, and I
thought I'd do them as 3D particles. Whoa,
look at that. So now they'll all in 3D space
and now they're all properly repelling each
other in 3D as well. And they also arrange
each other, arrange themselves into a nice
evenly spaced out sphere of particles as well.
Pretty. Come on.
[Audience clap]
But I thought actually that didn't look so
nice, so I thought instead I'd make them fixed
to the surface of a sphere instead of just
with inside a sphere. And I'd also give them
this particle image which I stole off Mr. Doob.
And additive blending and now we've got this
sphere.
>>Audience member: It's the death star
>>Seb Lee-Delisle: It is kind of the death
star, yeah. Oh well I knew. I knew I should
put more Star Wars references in. So all of
these particles now evenly distributed around
the surface of a sphere. And I can keep adding
them as well. Look and they keep get added
on, whoa.
>>Audience member: Is this WebGL?
>>Seb Lee-Delisle: No, this isn't WebGL, this
is just the 3 dot JS Canvas renderer. So a
buffo what? I've no idea what you're talking
about. So I'm just going to ignore that question.
But yeah it's pretty easy to just switch
renderer and just end up with WebGL. So what
else? Oh I could show you my bunny benches.
Oh I mean I do have a load of 3D examples.
But I don't think I've got time today to
show them. I'm running out of time, aren't
I? Am I? No I've got 15 minutes. Yeah I've
got 15 minutes, 20 minutes. Well ok I want
to just show you, I don't want to go full
on into 3D right now. Because that would take
probably another 20 minutes. But I wouldn't
mind just showing you some of these benchmarks
that I've done. So I've done this Canvas
benchmark here. Which is Iain Lobb's bunny
bench. Now Iain's who does, we do a podcast
together called creative coding podcast, and
he's a really excellent Flash games programmer.
So he took this benchmark in Flash and worked
out all the different ways to blit it and
render it in Flash to get the best performance,
and between the two of us we came up with
a JavaScript version. And this one is Canvas.
Now this runs really well on PCs, but
it doesn't run very well in Macs. I don't
know if you can see really close up. Sometimes
the bunnies are kind of drawn a bit fuzzy.
Now that's because Canvas, I don't know if
you know this, but it works on sub pixel levels.
So it's perfectly legitimate to draw an image
at 10 and half pixels along and it will just
kind of interplay and make it fuzzy. So I
don't know if you can ever see sometimes the
bunnies go fuzzy and that's because it's
being drawn halfway across the pixels. So
this is quite a slow operation on Macs. So
I found a really good way to just speed that
up. Really dumb way of speeding it up is just
literally by rounding the pixel values before
you render it. Are you ready for this? So
all I'm doing is literally rounding the pixel
values before I draw 1 image into the Canvas
and now that's much faster. You're not listening
to a word I'm saying. You're just like look,
it's bunnies. I love bunnies, bunnies. Ok,
good because I've got some more bunnies.
That's good, if I'd have known I'd have done
the whole thing about bunnies, if I'd have
known. So this example is using DOM objects.
So the weird thing when you have a DOM object
is that you have to adjust the CSS transform,
the position in CSS by adjusting a string.
Right, so you're actually putting position
values together by concatenating strings that
make up the CSS. Which to a programmer who's
not used to this is just really weird. But that's fine.
>>Audience member: SQL
>>Seb Lee-Delisle: SQL yeah. I've never
had to render a particle system using SQL before.
>>Audience member: Challenge
>>Seb Lee-Delisle: Challenge accepted. I'm
such a.. I'll do it later. Ok so these are
all DOM objects this time. I can't remember,
are they divs? Yeah, it's called bunnies.
It's a div, so that's way. So I'm just moving
these DOM objects around and so I thought
well maybe they'd be some performance improvement.
Now DOM objects actually snap to pixels anyway
you can't have sub pixel positions for DOM
objects. But if I snap to pixels it does speed
up a little bit. But I think that's probably
just more to do with the fact that I'm no
longer concatenating, floating, point strings
which have like 20 decimal places. So it's
a minor thing, but there's this really good
hack which I mentioned before with the particles.
If you set the CSS 3D transform property you
get hardware acceleration. Now this is a bit
buggy when I do it on several thousand bunnies.
But let's see what happens today. There you
go right. So now the bunnies are going much
much faster and that's because they're now
being rendered with hardware acceleration.
Notice, for some unknown reason, my webform
elements have just disappeared. My HTML toggle
boxes wherever they are. So there's clearly
a little bit of a way to go. Oh, they're back
again. I don't know. But that's quite interesting
as well and certainly again like what I said
before if you want that to run on Canvas then
that's what you have to do. So as part of
my course I teach you pretty much how to make
asteroids from scratch. You know and you know
step-by-step making the asteroids. Making
them have, whoa, pretty particle effects when
they blow up. Hit test, collision detection
stuff, Canvas, more Canvas stuff and even
more particles. Whoa, look at that. Can you
see the.
>>Audience member: Rip off
>>Seb Lee-Delisle: Can you see the. A rip
off of Rob Hawke's. Yes, of course because
no one's ever done a little triangle for a ship before.
[Audience laughs]
Wow, wish I'd thought of a little
triangle for a ship. Yeah well anyway this
is quite interesting because I'm exploring
the possibility of making a game that runs
on IOS. You know someone asked what's the's
the reason to make something in HTML5 and
there isn't really that many good reasons.
But I'm happy to discuss all the various ins
and outs of that. But of course with the thing
that everyone says, like they said it at game
on. I remember actually, I remember very clearly
because I think it was, I can't remember was it
>>Audience member: Hug a Flash guy
>>Seb Lee-Delisle: Eh? I'm sorry. Oh hug a
Flash guy. Yeah, Christian Harman did tell
everyone in the audience to hug me because
of my Flash experience and that's fine. But
I remember very clearly because someone when
we're in this conversation "why should we use
HTML?" and everyone was kind of bumbling around
and Rob did his usual thing of, "Well it's
an open language. If you want to use open
and stuff then you can use the open stuff
it's open." And it's a very well thought out
argument, Rob. But there was someone in
the audience, and this is always what happens,
and she held her iPad aloft and said "Because
it has to work on the iPad". And I was like,
well that's fair enough, but the truth is
that most rich media stuff performs really
badly on the iPad. The iPad 2's a massive
improvement and the new JavaScript engine
is also a massive improvement. But still rendering
Canvas stuff from the iPad is still a little
bit slow. If I run one of these particle demos.
Ah, Joe did you disconnect your network.
>>Joe: Sorry.
>>Seb Lee-Delisle: Ah, is your battery running
out or something?
>>Joe: Yeah
>>Seb Lee-Delisle: Oh, damn it. Well it runs
really shit on the iPad. Oh I can't show my
other stuff now. Has anyone got a network
I can connect to? Oh well, that's totally
ruined the end of my talk now. That's fine,
I just need a network that I can connect
via my computer. Maybe we'll do that and in
the meantime I can just finish off my presentation
and what have we got. Oh blimey, oh goodness.
Ok, hang on a sec. Here we go. So come on
Mr iPad. How do I force it to connect to the
wifi? Just amuse yourselves for a moment.
I don't know how to use this thing. Yeah,
thanks settings, yeah I know. I'm not very
good at computers. What is, what's your
wifi network called?
>>Audience: Wall of Sound.
>>Seb Lee-Delisle: Wall of Sound and..
>>Audience: Please don't read the password out.
>>Seb Lee-Delisle: See Joe was fine, he just
an open network. He's Android guy. Yeah,
easy now. And I also have to connect with
this one as well so don't. Which one? Wall
of. God this is really boring for you isn't it?.
I'm sorry. It can't all be particles and pretty
effects. Ok, so let's see. I've probably.
My IP address has probably changed. I really
should probably put this somewhere a bit more
accessible. What is this strange internet
of which you talk? Right, hang on. This is really boring
So anyone, anyone been anywhere
nice lately?
[Audience laughs]
I feel like one of those hairdressers.
Anywhere nice on your holiday? 1 7 2 20 10.
There you go. Anyone who wants to connect
to my computer that's probably how to do it.
Oh, should be plug this into the thing? Shall
we plug this into the magic thing machine?
Er, I need the VG. Shall I do it then? It's
all, it's all screwed in. You do it.
>>Audience member: He's just a mic stand alright.
He can't be mic stand and a cable guy. Right,
I've never tried this before. Does it work?
Oh whoa, look at that, that's amazing. Ok,
yeh. So I was just. I was only going to show
you like how crap Canvas was. So there you
go. That's that Canvas example. I mean there's
a lot of. I mean part of it is actually that
you're just clearing the whole entire screen
every frame so there's optimisations to be
had in terms of keeping track of the so-called
dirty rectangle. But also you know DOM elements
are inevitably going to be a little. What,
did someone find that amusing? Dirty rectangle?
What's so? What? I don't see it; I don't
get that at all. So this is like the the.
That's the particle effect with the DOM elements.
But I just wanted to show you this. Because
I've been playing a little bit with my asteroids
and I wanted to try and see how the multitouch
worked. It actually works really well in JavaScript.
So, look at that? Whoa, it's really responsive
as well. Wow, this is even more responsive
than like Android not in JavaScript. So that
doesn't mean to be a dick. But I just found
you know. I had a Nexus one and
Multi-touch just blatantly didn't work and
it really annoyed me. But look at that. It's
like 10. You can actually do 11 touches.
[Audience laughs and clap]
I don't know why 11, I've no idea. But I just
thought, wouldn't it be fun because. I think
the main challenge with making. [Audience laughs]
What's? Do you want to share something with the rest
of the group? The main challenge I find with
making a game that works on mobile at all
is you know the control mechanism. So I was
very excited when Android had Flash player
and I was like yeah I can finally play all
these Flash games that I've been making
over the last 8 years or whatever. Finally
play it on a mobile device. Of course, loaded
it up on the device and it worked surprisingly
fast right. You know they've done a pretty
good job in terms of how fast it runs. But
none of my games were playable because they're
all cursor controlled. So it's like you can't
direct cursor key input into Flash on an Android
device. So you have to rebuild. Of course
the Flash people, they're all rebuilding their
stuff. But we're also rebuilding these JavaScript
games as well and so this is my little Asteroid
and I thought, well the Geometry Wars is a
great model for multi-touch. So I thought
I'd copy that in JavaScript. So the left one
touches. Wherever you touch it that just becomes
the central point, so you don't have to look
at what you're touching and then you can just
fly the little ship around. And then the right-hand
side it just does firing. So this is
just a very quick demo I knocked up,
while I think I was doing my training course
the other day. I mean obviously I was teaching
everyone really. I was doing this during..
But yeah I think that's kind of cool. I really
like the multi-touch stuff. And it's
probably worth investigating some more. So
now back to my computer for finishing up.
Oh, a bit of dead air again. It's fine.
Right.
Just keep it on, just in case. You never know.
Right, well there's some other.. Actually
there's one thing I wanted to show you which
is this little asteroids that I knocked together.
This was the, was this the one? This was the
one before Rob did it. The first time I did
creative JS, and this was when Remy Sharp
was there. I just did this little test to
see about making 3D asteroids in 3 dot JS.
And I live coded this there, so that's why
nothing blows up or anything. But it was kind
of a nice little first run at making a 3D
Asteroids game. And so you know I'm quite
critical about Canvas being very slow. But
if you can style what you're making to be
something that works in that medium, if you
can get away with very few polys,
if you want to have like a full 3D rendered
scene, then that's never going to work. But
if you're going to just do something really
simple and stylised then you might be able
to get away with it. Right so, so then you
might have a realistic chance of falling back
to Canvas if WebGL isn't implemented yet.
So just to finish off then. Now just skip
past, ah you missed the bit about Father Ted,
ah that was good. So this is just my little
warning to you right. Because now of course,
I think you're all. I assume you are mostly
open web developers, and I don't know why
but I just got this slight feeling that some
of you don't really like Flash very much.
And I sort of understand where you're coming
from because I think poor use of Flash is,
there's nothing more annoying than that right.
I think that you know we've all experienced
some really annoying stuff like, like you
know like cipher. You know a Flash object
for type. So now you're finding, now you
can do some of this stuff in browser. It's
really good. But the reasons you hate Flash
are because of its poor use of really annoying
banners that use up all of your processors.
So and now it's very easy to get excited by
all this new stuff. But pretty much everything
I've shown you today, it might have some
uses. But mostly it's just fluff that really
needs to be used tastefully. Otherwise, you're
just going to create these really horrible
user experiences that have been done in Flash
up until now. And then what's the point of
getting, what's the point of killing off Flash
if then you're just going to do the same old
shit in, not in Flash. So I'm being facetious
of course. But with great power, comes responsibility.
So here's an example of, well, possibly the
most magnificent use of Flash or I'm not
sure. But it's what can happen if you get
too excited by the technology. Here we have
K & K Mime. Can we plug the sound in or shall
I just put the speakers, just put the mic
there. So are you ready for this? It's pretty
awesome. Where is the speaker? I don't even know where it is.
>>Video: Before I formed them in the womb I knew them.
Before they were born I set them apart.
I appointed them as prophets to the nation.
The founders of Gospel Mime. The nation's
choice K & K Mime. Breaking through the barriers
of religion and tradition. They will electrify,
elevate and inspire you with quick reflexes
and a driving force from within. Allowing
them to carry out the purpose of God. You
will be inspired, enlightened and challenged.
To your high place in worship. As K & K's
dramatic depiction of the arts literally brings
the songs to life right before your very eyes.
So get ready to see the power of God. And
be catapulted to a new dimension in worship.
Ladies and gentlemen. Boys and girls.
Put your hands together and welcome the animated
ministry of K & K Mime.
>>Audience member: That was the one you won
the BAFTA for yeah?
[Audience laughs]
>>Seb Lee-Delisle: Yeah, I was just going
to say if there are any. It's pretty amazing
stuff isn't it. It's sharpereffects.com
who make all these kind of crazy intros.
And I was just thinking if there are any epileptics
in their congregation and then they really
would be catapulted into a new dimension of
worship. Although I'm not entirely sure that's
very good. I love also the way that forget
skip intro, we don't have a skip intro, why
would you ever want to skip this intro. All
there is is a replay button which I find particularly
amusing. So I'm so yes. That's the warning
you could do it in JavaScript. But it doesn't
mean that you have to alright. Just be careful,
that's all I'm saying. But if you just fill,
but if you make sparkles come off your mouse
yeah, don't blame me, right. Ok, because I've
warned you ok. That's all I'm saying. So yeah,
what I'm seeing though, what I'm loving about
the JavaScript community is that, you know,
it's a really fun time to play with this stuff.
People are, and whole new people are finding
and discovering the joy of visual programming
and all these techniques. And that's
why I'm really enjoying sharing them with
this whole new audience. Particularly with
any sort of web-based technology, the ability
to share your little discoveries is fantastic.
So I'm really happy to see that happening
and that's been happening more and more in
JavaScript over the last few years. So yeah
keep it up that's good. And of course, I'm
doing my workshops. I'm going away a few months
to America. I'm taking my workshops to San
Francisco, New York and Kansas City. Which
one of those is the odd one out? I don't know.
And maybe Boston if I can get enough people.
But I should be back in Brighton at the end
of summer, August, September. If you want
to come to one of my courses. Ask Rob if it
was any good. Was it any?
>>Rob: It was very good
>>Seb Lee-Delisle: It was very good. Rob,
thank you. And or just look back at the creativejs
hashtag. You'll see everyone tweets about
the course as they're doing it. So you'll
see firsthand what people thought. And they're
mostly pretty kind. Sometimes they say, Seb
has asked me to tweet about this course. Well
that's fine. So I'm back in Brighton in August,
September. Come down to the seaside in the
summer and learn some creative JavaScript
for 2 days. I mean that's pretty awesome.
Really small class sizes, 12 people, a really
nice venue and great to hang out in Brighton.
So if you go to my training page, it's seb.lee/training,
there's a, you know, a email thing. What do
you call those things? Those email things?
>>Audience: Mailto
>>Seb Lee-Delisle: A mail thing, mailing list.
I don't know. I don't really understand technology.
Ok so well that's kind of it, so my company
is pluginmedia.net, creativecodingpodcast.com,
don't forget. And there's my blog and twitter
ID at the bottom. So, thanks very much. 
[Applause]
Do you have time for questions?
>>MC: 3 or 4 questions
>>Seb Lee-Delisle: 3 or 4 questions. Yes
>>Audience member: Did you bring your BAFTA?
Can we see it?
>>Seb Lee-Delisle: I didn't bring it, no.
>>Audience member: You haven't got one, have you?
>>Seb Lee-Delisle: No, I just I totally made
it up. For some reason my business partners
have taken the BAFTAs home. I'm not
sure what all that's about. But you know what
it's really seriously heavy. It's like proper
solid granite. Anyway, yes.
>>Audience member: Do you have the barrel demo?
>>Seb Lee-Delisle: The barrel demo. I don't
know that I do. In fact I don't think that
I've got Unity on this machine, so sorry.
I did a demo at Full Frontal which was in
Unity. Unity3D is brilliant and I think it's
the future, especially now they've just announced
that.. I mean basically it's a middleware, right
It's a gaming engine in 3D if you haven't
heard of it. I'd recommend you have fun with
it. You program it in JavaScript, so it's
fantastic. And there's a web plugin for
it. But they're also going to be targeting
the new 3D hardware accelerator capabilities
of the Flash player and it's going to be by
far the easiest way to make a 3D game in Flash.
And they're also going to be looking at implementing
WebGL. So, I don't know about you guys
but I mean I've done a lot of 3D but I still
don't fancy making a game in WebGL, it's just insanely
complicated. So stuff like Unity is brilliant.
So check it out. And no, I don't have the
barrel demo, sorry. Any more questions? Yes.
>>Audience member: This is on kind of again
the middleware thing. A lot of the things that
you've done you can do in Flash, you can do
in JavaScript, you can do those maths based
things. Have you ever kind of been psycho
enough to like write some middleware so you
can develop it once and you know deploy it
many ways?
>>Seb Lee-Delisle: Did you all hear that question?
Can I repeat it? So the question was because
I know all these technologies have I ever
been tempted to make a middleware that
can just like write once and deploy anywhere?
Well I think that's kind of what people are
attempting to do with varying degrees of success.
For me, I prefer to actually learn every technology.
That's probably cos I'm a bit mental, but also just
because everything's slightly different. And
so for example, I know a lot of other Flash
people who are starting to play with JavaScript
and Canvas. But they're sort of like, I'm
not going to criticise this because it's
brilliant, but Grant Skinner, a really famous
Flash guy has made easel.js which is a Flash
display list. It's kind of similar to a Flash
display list, but made in Canvas. Which is
brilliant right. But I like to look at the
environment I'm working in and really understand
that. So I understand Canvas I know what it's
good at. And that's why I'm starting to look
at DOM elements for moving stuff around which
might be a better way of using it. Right so,
I'm not saying it's better or worse, but I
just prefer to really understand the technology
I'm working in to get the best out of that.
This kind of concept of create once and deploy
anywhere has been the sort of mantra of Flash
for ages as well. And I think it's a bit of
a misnomer. There's also that sort of stuff
with phone gap as well, and Titanium, stuff
like that. And I think, if you're on a really
tight budget, those sort of systems can be
good. But they'll never.. or it's very rare
that they're going to produce the absolute
best, most finely tuned, slickest, user experience
targeted to that particular platform. So if
you're if you're attempting, which I always
attempt, to do the very best thing that you
can do, then you might want to go native.
If your issue is budget and time then you
might want to use one of these things.
Of course, having said that, the exception is
Unity. Where they really have built an excellent
system. That makes iPhone apps, Android apps,
the web player, it makes MAC, PC apps. It also
publishes to Wii, PS3, Xbox. And gaming studios
now are starting to use that, just because
it's so easy to use, I mean it's ridiculously
easy to use. You spend a few hours and you've
made an FPS and you're like, "Did I just program
that?" I mean it really is amazing. So on
the whole, write once, deploy anywhere is
a myth. Except possibly with Unity, and of
course that is open to discussion. Anymore?
>>Audience member: Do you have an endorsement
deal with Unity yet?
>>Seb Lee-Delisle: I really don't, you know.
But I've, in fact I've only met them. I've
met them a few times but I've yet. I've only
done a couple of small projects in it. But
I really think it's brilliant so, yeah. If
anyone from Unity is watching this, I'll be
your evangelist for free. Yes Joe.
>>Joe: The composite mode. Presumably you
can't do that with HTML with the DOM.
>>Seb Lee-Delisle: That's right.
>>Joe: Ok, and therefore are there any other
major differences that you'd point out between
SVG, Canvas and the DOM?
>>Seb Lee-Delisle: Yeah, so the question was
you know Joe pointed out that you can't do
the Composite Operation in DOM elements. There's
other stuff you can't do in DOM elements as
well I think. But what other differences?
So I guess Canvas the choice is Canvas, Dom,
SVG. I actually really like Rafael dot js.
I haven't really used that very much, but
it's a brilliant SVG wrapper. It falls back
to VML. And I think for a lot of stuff that's
being done in Canvas, you'd be better off
doing it in Rafael because it's much more
compatible with even IE right. It goes back
to I think IE7. I'm not entirely sure. But
it's quite a mature library and you can
use mouse events on these SVG shapes which
you can't really do in Canvas. Canvas is just
a bitmap, so if you draw something on it,
it's there forever. You can't pick up mouse
events on that single thing. So I think everyone's
getting hung up on Canvas and I think a lot
of the time they should be looking at something
like Rafael or DOM objects so. But they're
all different. Canvas has got its own thing
that it's really good at like the additive
blending but sometimes you just want
a bitmap to play with. Ok, cool.
[Applause]
