Processing

An introduction

Przemysław::Kowalczyk

What it is?

Processing is a programming language, development environment, and online community. [...] Processing has promoted software literacy within the visual arts and visual literacy within technology.

What it is? cont’d

What it isn’t?

Processing flavors

Processing (Java)

p5.js & Processing.js

Processing.py

Just a library, no changes to language

What about Ruby?

https://github.com/jashkenas/ruby-processing
Needs Processing, java, jruby, but it's really cool!

Processing Development Environment (PDE)

Let’s start coding!

The setup method is used to setup the window & the environment. Called once when the program starts. You can use it load media, fonts etc.

def setup
  size(1024, 768)
  background(255)
  stroke(127, 255, 0)
  line(0, 0, width, height)
end

The draw method

Called to draw each frame (typically 60 fps).

def setup
  size(1024, 768)
  stroke color('#ABCDEF')
end

def draw
  background color('#123456')
  line(0, 0, frameCount % width, height)
end

Mouse events

You can define callbacks for all mouse related events: move, click, drag, wheel.

Mouse state can be read through variables: mouseX, mouseY, mouseButton, mousePressed.

def mousePressed
  line(mouseX, mouseY, width, height)
end

Keyboard events

You can define callbacks for keyboard related events: keyPressed, keyReleased, keyTyped.

Keyboard state can be read through variables: keyPressed, key, keyCode.

$step = 0
def draw
  line 0, 0,
       frameCount % width,
       height - $step
end
def keyPressed
  $step += 10 if key == 'r'
end

Saving pretty pictures

Just call save("name").

Append a file extension to the name of the file, to indicate the file format to be used: either TIFF (.tif), TARGA (.tga), JPEG (.jpg), or PNG (.png).

size(500, 500)
smooth
background color('#120930')
stroke color('#FFEECC'), 20
strokeWeight(3)
(0..width).step(7) do |i|
  line(0, i, i, height)
  line(0, i, width - i, 0)
  line(i, 0, width, i)
  line(i, height, width, height - i)
end
save("filename.jpg")

Saving a lot of pretty pictures

Just call saveFrame("name-####.ext").

Saves a numbered sequence of images, one image each time the function is run. You can specify the name of the sequence with the filename parameter, including hash marks (####), which will be replaced by the current frameCount value.

$rot = 36
$deltaRot = -0.4
def draw
  background(0x36465d)
  c = 0
  translate(width / 2, height / 2)
  (0..240).step(10).to_a.reverse.each do |size|
    fill(c = 255 - c)
    ellipse(-size,-size,size*2,size)
    rotate(PI / $rot)
  end
  $rot += $deltaRot
  if $rot < 12
    $deltaRot =  0.4
  elsif $rot > 36
    $deltaRot = -0.4
  end
  saveFrame("frame-####.png") if frameCount < 123
end

Pretty pics to animated GIF

Using existing images

Just call loadImage("name") (it needs to be preloaded when using JS).

You get a PImage object which has width, height, pixels.

attr_reader :photo, :starfield
def setup
  @photo = load_image(Dir.pwd + "/alpha.png")
  @starfield = loadImage(Dir.pwd + "/starfield.jpg")
  size(photo.width, photo.height)
end
def draw
  xoffset = frameCount % width
  yoffset = xoffset * height / width
  image(starfield, xoffset, yoffset)
  image(starfield, xoffset - width,
                   yoffset)
  image(starfield, xoffset,
                   yoffset - height)
  image(starfield, xoffset - width,
                   yoffset - height)
  image(photo, 0, 0)
end

Loading SVG files

Obama = ["HI","RI","CT","MA","ME"...]
McCain = ["AK","GA","AL","TN","WV"...]
def setup
  size(950, 600)
  @usa = loadShape( "http://upload.wikimedia.org/wikipedia/commons/3/32/Blank_US_Map.svg")
  shape(@usa, 0, 0)
  statesColoring(Obama, 0, 0, 255)
  statesColoring(McCain, 255, 0, 0)
end
def statesColoring(states, r, g, b)
  states.each do |id|
    state = @usa.getChild(id)
    state.disableStyle()
    fill(r, g, b)
    noStroke()
    shape(state, 0, 0)
  end
end

Let’s do it in 3D!

size(360, 640, P3D)
background(0)
lights()

noStroke()
pushMatrix()
translate(130, 80, 0)
rotateY(1.25)
rotateX(-0.4)
box(100)
popMatrix()

noFill()
stroke(255)
translate(200, height * 0.7, -200)
sphere(200)

ruby-processing goodies

What else is there?

What else is there (for 3D)?

Have fun!

← →

/