Introducing Creative Coding and ProcessingJS With Windows
Welcome to Creative Coding with ProcessingJS for Windows! In this series, our goal is to introduce people to the basics of using code to unleash their creative mind and give them the tools to create beautiful things with code. To this end, we've created some great tools and projects.
Creative Coding video series - a creative coding lesson plan taught by Rick Barraza and Matthias Shapiro (links below).
ProcessingJS for Windows - a micro-IDE in the Windows Store that allows users to write, view and export ProcessingJS sketches.
ProcessingJS Reader for Windows Phone - view your ProcessingJS sketches on your Windows Phone. Share sketches by emailing them or sharing them via NFC. Available in the Windows Phone Marketplace.
As an introduction to the series, we'll break it down into three parts before walking through all the tools we're releasing to help you create your own unique visuals.
Have you ever looked at some beautiful programmatic animation, visualization, or interaction and wondered how it was done (or wished you could do that yourself)? This is the drive behind the Creative Coding series.
We've put together a set of 10 videos that will walk you through some of the essential skills and techniques necessary to create responsive and beautiful interactive visuals. The videos build upon one another so watch them in order to get the most out of the series.
- Getting Started in ProcessingJS - programming a bouncing ball
- Simple Particles - random motion
- Jelly Blobs - easing and elastic motion
- Simple Emitter - animation queues and life cycles
- Fibonacci Flowers - trigonometry in design
- Direction and Rotation - tangents and rotation
- Mouse, Pen, Fingers - multi touch interactions
- Collision and Bounce - programming angled collisions
- Working with Images - loading graphics and recursion
- ProcessingJS and Windows Phone - getting your sketch on your Windows Phone
For our coding environment, we wanted to use a technology that would make our projects as accessible as possible. We ultimately decided to use ProcessingJS, which is a web-compatible implementation of the Processing visual programming language. ProcessingJS is a simple but powerful library for visual programming that uses the HTML5 canvas as the drawing board for data visualizations, digital art, interactive animations and even games.
ProcessingJS sketches can get people started with a single line of code. For example:
ellipse(100,100, 20, 20);
is a valid ProcessingJS sketch that draws a 20 pixel diameter ellipse at the (100,100) x,y coordinate on a default sketch canvas.
But we can also write sketches that use a draw loop to create iterative visuals. Or we could write event based sketches that update or react base on interactive events (like mouse or touch). By combining these programming and visual elements, we can create some beautiful sketches by just layering these simple concepts. This makes ProcessingJS perfect as platform for learning creative coding.
For Windows (and Windows Phone)
Pointer events are what Internet Explorer 10 uses to detect any pointer interaction, which covers mouse, stylus and touch interaction. It is currently (as of March 21, 2013) a W3C working draft an intended to become the W3C recommendations for touch interaction standards. But the nicest thing about (at least for this project) is that IE10 in on both Windows 8 and Windows Phone 8 so we can take the same pointer-enabled ProcessingJS library, do nothing to it and know that our sketches will work in Windows Phone.
And we've designed for this. If you're building a ProcessingJS sketch in the Windows Store app, you can export it as a file and simply attach it in an email and you or your friends can launch that sketch in directly from the email app in your Windows Phone (Windows Phone 8 is required). This way you can create and share apps across Windows 8 and Windows Phone 8 using apps freely available in the Stores.
If you want to move beyond that and use ProcessingJS to create full Windows 8 and Windows Phone 8 apps, go to our ProcessingJS Codeplex and download the projects and templates there. Using these projects and templates, you can build full-screen ProcessingJS apps for both platforms. We even have a Windows Phone 8 template that you can install and just have a ProcessingJS enabled project ready to go anytime.