If you’ve been following the podcast or my recent posts, you’ll know that I’m passionate about encouraging creative people to start programming – often once they get past the hump of incomprehension they can often be the best coders. At the very least you’ll be able to communicate with the programmers you work with better!
Every thing we do has a visual counterpart on an HTML5 canvas element. So you can see straight away the effects of your actions. It’s how I learned to code all those years ago…
Tickets go on sale tomorrow, more information and booking on my training page – sign up for the newsletter to hear about courses near you.
[UPDATE] Here are the files if you want to have a play for yourself!
[UPDATE 2] only 2 tickets left!
[UPDATE 3] Sold out! Sign up to hear about the new courses.
18 replies on “Learn to code in 2012 – the visual way”
Funny yet inspiring 🙂
This is a very nice video !
Here is the missing code (must be put in a function called after page load or directly in a script tag just before the end of the html tag) :
// Get the canvas element
var elt = document.getElementById(‘idOfYourCanvas’);
// Get the canvas context used in the video
var c = elt.getContext(‘2d’);
// Now you can play
Haha I never thought of that! Actually that’s not quite all there is to it – you can see the full code here – http://seblee.me/demos/LearnToCode/ the index.html has all the set up code in it – you can play with http://seblee.me/demos/LearnToCode/LearnToCode.js which is the file in the demo.
This is, and you are, bloody fantastic!
Haha, count me in for some point this year 🙂
Thanks Naomi! You’re way too kind, but I look forward to seeing you later in the year 🙂
what a great post. This can transform designers to coders.
This video is well made, quick, inspiring and best of all not intimidating. way to go!
that’s great to hear – thanks Ian!
Thank you! I have adapted the code and applied interactivity, as well as the requestAnimFrame method. http://goo.GL/C23jd
I hope to be able to take part at your workshop in Cologne. After over a decade of Flash I’m doing more and more with HTML5/JS. Best wishes.
Definitely the best way how a quick How-To-Video should be. Great!
What editor are you using? I saw something similar in this video: http://vimeo.com/36579366 and I fell in love.
Yeah that video has done the rounds! But no mention anywhere of what he’s using or whether it’ll be available :/ I just used TextMate with a browser. And some careful editing 🙂
This is great, I was wondering if you could make some tutorials so those of us that can’t afford to fly to one of your training seminars, can learn from you as well ?
I am a designer that really wants to learn to code 🙂
this was totally the plan but my year is incredibly hectic so far. To be honest, I’m not even sure when I’ll be able to set up some more real-life courses!
Keep checking though, maybe I’ll magically have some time at some point 🙂
Inspired from all WebGL playgrounds and online editors out there, I’ve built up a small canvas playground where you can write down the animation code directly in the browser window. Maybe it’s useful for some of you:
It’s nothing special but it could save some time switching between editor and browser 😉
Keep on the great work and the impressive ideas!
Greetings from Germany
Hey Seb and Matthias, they are both great tools!
I just posted a quick demo vid that uses LiveReload to update the browser immediately – it might be useful in your toolbox. http://zdam.posterous.com/livereload-magic
Your Vimeo video on coding was fantastic are there any more coming, or any courses I could do online as I live in Australia and would love to learn java script.