For Ignite NYC, I made a five minute presentation demonstrating basic programming concepts, as illustrated in Processing. The point: basic code literacy is as important today as basic arithmetic knowledge, and there’s no reason to be afraid — by working with code visually, you can learn to program, even with “advanced” concepts like object oriented code.

I’ll elaborate on this more for those not there, but if you did make the presentation, these additional code examples should be helpful (in case you missed some of what I was saying in the 15 seconds allotted each slide!)

Referenced Code Examples

Putting something on the screen: Using commands like “line” means everything you do can give you immediate visual response. Line does what it sounds like it does, and takes four simple arguments: x and y coordinates for the start point and end point.

line(0,0,200,200);

An interactive line: Add a draw() loop, and the line you draw becomes interactive, working with the mouse.

void setup() {
  size(400,400);
}
void draw() {
  background(255); //try moving this line to setup and watch what happens!
  line(0,0,mouseX,mouseY);
}

Make values visible: The numbers can also be meaningful values — in this case, from the internal clock.

void setup() {
  size(400,400);
  strokeWeight(50);
  strokeCap(SQUARE);
}

void draw() {
  smooth();
  background(255);
  line(100,0,100,(hour()/24.0)*height);
  line(200,0,200,(minute()/60.0)*height);
  line(300,0,300,(second()/60.0)*height);
}

Variables: Using variables in place of fixed number values allows you to adjust that value — over time for animation, to transform the value aesthetically, and to experiment with how code works.

In fact, the best way to start to figure out code — even before you’re sure how it works — is often to start messing around with values. Sometimes “breaking” code you don’t understand can be a great learning experience. For instance, see what happens when students start to “mess up” the game Breakout to transform it aesthetically and make new art.

Changing values can also help create surprise. You don’t have to hook up variables the way someone would expect. Watch what happens when you move mouseX and mouseY with our interactive line:

void setup() {
  size(400,400);
}

void draw() {
  background(200);
  line(mouseY,height/2,width/2,mouseX);
}

Loops: Seeing a loop happen — even a simple one — illustrates the way the process of iteration can work in more complex problems.

int numOfLines = 10;
int distance = 10;

size(200,200);
background(0);
stroke(255);
strokeWeight(3);

int yPos = 20;
for(int i=0; i<numOfLines; i++) {
  line(20,yPos,width-20,yPos);
  yPos += distance;
}

//bonus!
/*
int yPos = 20;
for(int i=0; i<numOfLines; i++) {
  line(20,yPos,width-20,yPos);
  yPos += distance;
  distance += 2;
}
*/

Loops and arrays: Using arrays (lists) with loops can help to simplify code, even in a simple example — loops and lists are a natural match for one another, since the former lets you iterate through the latter.

int[] circles = {170,113,78,30,13};
size(400,400);
background(150);
noStroke();
smooth();

for (int i=0;i<circles.length;i++){
  fill(random(0,255),random(0,255),random(0,255));
  ellipse(width/2,height/2,circles[i],circles[i]);
}

Loops within loops: You can also place a loop inside a loop. What’s that mean? It helps to see the result.

int[] circles = {170,113,78,30,13};
size(400,400);
background(150);
noStroke();
smooth();

for (int j=0;j<4;j++) {
  for (int i=0;i<circles.length;i++){
    fill(random(0,255),random(0,255),random(0,255));
    ellipse((width/4)*j,(height/4)*j,circles[i],circles[i]);
  }
}

You can extend the loops within loops concept to more involved iteration, such as iterating through columns, then rows — essential to processing the individual pixels in an image.

Java is quick enough for doing this with smaller images and even video, though for better performance, it’s also possible to perform some tasks using shaders on the GPU, thanks to Processing’s support for OpenGL. (Image processing, video processing, and OpenGL are best left to a separate discussion!)

Functions can be understood as recipes. In pseudo-code:

makes cake "Cakemaker" (eggs, flour, ingredients, etc...) {
  step 1
  step 2
  step 3
  return cake, serves 8
}

Objects: Object-oriented programming may seem mystical, but it’s really just a way to better organize code functions. For instance, in the case of the cake, we might consider what the attributes of a cake are, what can be done to it (make a cake, eat a cake, throw a cake at someone’s face), and then organize it relative to smaller categories of related things (cupcakes) and bigger categories of things (dessert).

In visual terms, that allows us to create fast, readable, powerful systems for visual expression, like particle systems. In the included Processing example Topics > Simulate > MultipleParticleSystem, for instance, you’ll see particles and systems of particles defined as objects.

Code for Making the Presentation

For Ignite, I wrote a quick Processing sketch that allowed me to quickly generate the slides I would use. The event needed a PowerPoint file, but I could at least output images to drop into another program for PPT export (hence the saveFrame() function, which saves image files). And for my own purposes, I don’t even need PowerPoint.

Note that in addition to the Processing file, the data folder contains:

• image assets
• fonts (generated in Processing with Tools > Create font…
• a text file with the text for the slides

To create the text file, I simply separated bullets with the “@” character and put a tab between titles and body text. The split() command in Processing then divides up that text into necessary Strings. So, for instance, the first slide looks like this:
visual code literacy Code literacy == math literacy @Technologists, artists (non-specialists)

What this means is that very little code is needed for the presentation — and it’d basically work for any presentation of this template. I saved time versus working in PowerPoint.

You need some Java classes, listed at top, for this to work.

import java.util.*;
import java.text.*;

String[] slides;

PFont font;
int currSlide = 0;

void setup() {
  size(800,600);
  slides = loadStrings("p5_5slides.txt");
  background(0);
  font = loadFont("TimesNewRomanPSMT-14.vlw");
}

void draw() {
  String[] headerString = split(slides[currSlide], TAB);
  String[] bullets = split(headerString[1], '*');
  println("Header: " + headerString[0]);
  for (int i=0;i<bullets.length;i++) {
    println("Bullet: " + bullets[i]);
  }
  saveFrame();
  if(currSlide < slides.length-1) {
  currSlide++;
  }
  else {
    //currSlide = 0;
    stop();
  }
}

Image Credits

In the presentation…

Dinner check by Jim Reynolds:
http://flickr.com/photos/revjim5000/2445394705/

LOGO-generated image graphic created by remi, logo source code created by Arbol01, via Wikimedia:
http://en.wikipedia.org/wiki/Image:Remi_turtlegrafik.png

Apple II image by Florian Eckerstorfer
http://flickr.com/photos/florianeckerstorfer/1870727397/

Breakout art, as featured in Create Digital Motion:
http://createdigitalmotion.com/2007/04/17/breakout-hacked-into-art-in-processing/
See also Game Mod:
http://www.trsp.net/teaching/gamemod/

NOAA climate information from the National Weather Service:
http://www.weather.gov/climate/

Vintage cookbooks by Patrick Q:
http://flickr.com/photos/patrick_q/199986515/

All other images by the author