Tag Archive for: processing

P5.js + GitHub Tutorials (intro)

In addition to being an artist, I also am an educator. I feel passionate about sharing the methodologies, technical tools and conceptual pathways that I’ve developed over the years .

This semester, I’m teaching Interaction Design (2 sections) at the University of San Francisco, where I’m an adjunct professor. Rather than doing hardware, I’ll be focusing exclusively on software (not apps) interaction and networked experiences.

P5.js, which essentially is a JavaScript version of Processing helps with learning coding since its output is visual. Graphics create gratification as students can see their work as shapes, lines and text rather than in a printed output in a console window.

With remote learning, I’ve developed some videos that I want to share with folks. These are just some intro videos and include some simple GitHub tutorials for classroom use.

Key to teaching is making it easy for students and to provide both a straightforward and uniform experience with the tech. Then the conceptual aspects can blossom.

Daniel Shiffman has created many in-depth tutorials for P5 and Processing and he is animated, personable and thorough. These are an amazing resource. For a classroom environment, however, Shiffman’s vids are too much for my needs. For example, I’m asking all the students to use the same text editor (Sublime), mirror my work in the GitHub with a Hello World example and generally give them less of a universe of possibilities at the start.


P5.js Tutorials

Getting Started in P5.js, (3 min, 45 sec)

Hello World in P5.js, by Scott Kildall (3 min, 24 sec)

Intro to GitHub by Scott Kildall (10 min)

GitHub Tutorials

Cloning and Pulling from GitHub by Scott Kildall (4 min, 39 sec)

Using the JavasScript Console with P5.js by Scott Kildall (4 min, 39 sec)


A flowchart guide for my online tutorials (below)



3D Data Viz & SF Open Data

I’ve fallen a bit behind in my documentation and have a backlog of great stuff that I’ve been 3D-printing. These are a few of my early tests with my new project: Data Crystals. I am using various data sources, which I algorithmically transform data into 3D sculptures.

The source for these is the San Francisco Open Data Portal — which provides datasets about all sorts of interesting things such as housing permit data, locations of parking meters and more.

My custom algorithms transform this data into 3D sculptures. Legibility is still an issue, but initial tests show the wonderful work that algorithms can do.

This is a transformation of San Francisco Crime Data. It turns out that crime happens everywhere, so the data is in a giant block.


After running some crude data transformations, I “mined” this crystal: the location of San Francisco public art. Most public art is located in the downtown and city hall area. But there is a tail, which represents the San Francisco Airport.


More experiments: this is a test, based on the SF public art, where I played with varying the size of the cubes (this would be a suggested value of artwork, which I don’t have data for…yet). Now, I have a 4th axis for the data. Plus, there is a distinct aesthetic appeal of stacking differently-sized blocks as opposed to uniform ones.

Stay tuned, there is more to come!random_squares

Cracking the Code

After some several days of brainstorming on generating 3D models using simple coding tools, I started diving into Processing* using Marius Watz’s Modelbuilder Library (which is incredible). This is what I have going so far. Super-excited about the possibilities!algo_3d

Version 2 with “clustering” algorithm

* Technically speaking, I’m  using the Processing libs with Eclipse, which makes development far easier. This Instructable that I wrote shows you how to migrate your Processing projects to Eclipse.