Introducing Creative Coding and ProcessingJS With Windows

Sign in to queue


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.

Generic Episode ImageGeneric Episode ImageGeneric Episode Image

ProcessingJS Sketchbooks on Codeplex - Open source starter projects for writing full screen apps using ProcessingJS. We've included a ProcessingJS implementation for Windows 8 in both C# and JavaScript and another for Windows Phone. ProcessingJS Template for Windows Phone - Want to write a Windows Phone app in ProcessingJS? Install this template and start as many ProcessingJS Windows Phone projects as you want.

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.

Creative Coding

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.

Topics covered

With ProcessingJS

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.

ProcessingJS Reference

ProcessingJS Source Github

For Windows (and Windows Phone)

These projects and apps are designed to take advantage of the Windows and Windows Phone platforms. Because of this, we've made a few updates to the ProcessingJS library. In the Windows Store app, the entire application is written in HTML5, so integrating a JavaScript library to that was no problem at all for most ProcessingJS sketches. But when it came time to implement multi-touch interactions, we found that we needed to add support for pointer events to ProcessingJS.

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.

The Discussion

Add Your 2 Cents