Friday, May 29, 2015

Creative Coding

It's been a minute since I've posted here... I have some new projects underway - but for now I will just share what I've been working on for the past four months.

I recently re-wrote a course at my university - formerly titled "Principles of Interactive Media" - to accommodate an influx of students who are pursuing interdisciplinary study between art, computer science and education.  The new course, tentatively titled "Intro to Creative Coding", now centers around the Processing environment and programming language.


I decided, since I'd be teaching it, I would dive deep into Processing myself.  So I've spent the last few months buffing my programming skills - and in turn getting really excited about visual programming and front-end development.

Processing is a great platform for this - Not only is the language identical to that of Arduino (which all of my robotics and installation work is written in) - but it is an excellent primer for Java, Javascript, and C++.  All incredibly useful languages to know if you like making stuff (and I sorta do...)

Anyway, over the course of the semester, I created over 40 original Processing sketches from scratch.  Most of them (the ones that work inside the Processing.js java script wrapper) are hosted online at openprocessing.com.  Here are some of my favorites:



Fly Kitty - my first attempt at a "2.5-D" interactive animation.  This sketch also utilizes a simple custom particle class in the cat's tail.



Hypno Kitty - another exploration of a particle class for creating dynamic curves.  A lot of these sketches are cat themed...



Sid the Squid - An interactive animation.  Sid's tentacles are uniquely generated each time the sketch is ran - and utilize once again a particle class.  Mostly an exercise in drawing more complex designs in processing.



Fishy - an array of interactive objects. Each instance of my fish class in born with a unique size and color.



Baller - My first attempt at a realistic physics system.  I also incorporated inheritance in this sketch (as practice for a lecture I gave the next day) but the sub-classes weren't working properly in Java Script, so I ended up rewriting this sketch so each ball is it's own class.



Cat Generator - This really was a demonstration of Processing's ArrayList class. A simple UI which allows you to set a few variables with sliders, then generate new cat objects with those properties by pressing the green button. 



Vortex - Playing with the sine() and cosine() functions. Click to move the vortex on the y-axis.



Walking Doodle - My attempt at creating a class for walking limbs.



Red Button - a bit of fun with the noCursor() function.



Bezier Noodle - My first look at the bezier() functions.  An interactive "drag-able" bezier curve!



Whoa wow wow! - My tribute to "The Dress" viral phenomenon.  Is it blue and black, or white and gold??



Noise() Pong - Play a Pong-like game against the noise() function.



Vector Snake - My first look at the PVector class. Also around the time I started reading The Nature of Code by Dan Shiffman - an awesome book on creating "natural" systems in Processing.



Car - I had a lot of fun with this sketch.  Here I used the PVector class to create a mouse-driven interactive car.



Sky Writer - My first look at utilizing the PShape class for drawing separate "layers" in Processing.



Infinite Scrolling Landscape - An infinite scrolling landscape.  A (very) buggy sketch that utilizes one of my favorite 2.5-D tricks, found in lots of classic side-scrollers like Super Mario World.



Bean in Space - My first look at the P3D engine for 3D graphics.



Voxel Ship - Another exploration in 3D graphics.  Processing.js does not yet support imported 3D models, so I decided to build one with simple cubes instead.


And that's pretty much where I stopped uploading sketches, mainly because everything I've created since uses functions, classes and libraries that are not yet supported in the Processing.js wrapper.  Keep your eyes peeled for more updates to my openprocessing.org portfolio!

No comments:

Post a Comment