Software

Processing

Processing

Processing is a beginner-friendly programming language and environment that makes it easy to create visual, interactive, and generative glitch art with code. It abstracts away much of Java’s complexity so you can focus on drawing, animation, and experimentation.

What Processing Is

Processing is:

  • An open-source programming language built on Java, designed for artists, designers, and creative coders.
  • A development environment (PDE) with a simple editor, Run button, and live preview focused on visual output rather than general software engineering.
  • A visual sketchbook: each file is called a “sketch,” emphasizing rapid iteration and experimentation over heavy architecture.

Processing provides built-in functions for drawing shapes, working with color, animation, interaction, images, video, typography, and more, making it ideal for glitch workflows and creative coding.

How Processing Works

A basic Processing sketch is structured around two core functions:

void setup() {
  size(800, 800);   // runs once
}

void draw() {
  background(0);    // runs every frame
  // draw / animate here
}

Key ideas:

  • setup() runs once at the beginning: define canvas size, load images, set modes.
  • draw() loops at a default of 60 frames per second: perfect for real-time generative and glitch processes.
  • The coordinate system starts at the top-left (0, 0).
  • Built-in functions like line(), rect(), ellipse(), image(), and text() give you direct access to the pixels on screen.
  • You can respond to input via variables like mouseX, mouseY, and functions like keyPressed(), enabling interactive glitch systems.

Because Processing is Java-based, you can also use Java libraries or create your own classes when you need more complexity.

Core Techniques for Glitch Art in Processing

1. Pixel-level Manipulation

Processing lets you access and overwrite individual pixels on the canvas or in an image:

PImage img;

void setup() {
  img = loadImage("photo.jpg");
  size(img.width, img.height);
}

void draw() {
  img.loadPixels();
  for (int i = 0; i < img.pixels.length; i += 5) {
    color c = img.pixels[i];
    img.pixels[i] = color(255 - red(c), green(c), blue(c)); // invert red channel
  }
  img.updatePixels();
  image(img, 0, 0);
}

Concepts:

  • loadPixels() / updatePixels() open a gateway for direct glitching.
  • Manipulating indices (skipping, swapping, or shuffling) creates fragmentation, smearing, and broken scanline effects.
  • Randomness via random() is central to organic glitch textures.

2. Feedback and Iteration

Visual feedback loops are glitch gold:

  • Draw the previous frame back onto itself with transformations or reduced alpha.
  • Slightly translate, rotate, or scale the previous frame each draw cycle.
  • Combine this with pixel corruption for evolving, unstable visuals.

Example strategy:

  • Use PGraphics as an off-screen buffer, draw into it, then redraw it each frame with offsets or blending modes.

3. Noise-based Distortion

Perlin noise (noise()) in Processing offers smooth randomness:

  • Distort coordinates using noise to create wavy glitches.
  • Animate the noise input over time for flowing, video-like artifacts.
  • Use noise to modulate color channels, displacement amount, or transparency.

4. Image and Data Bending

Even staying inside Processing, you can simulate databending:

  • Load an image, then systematically corrupt specific pixel ranges, rows, or channels.
  • Sort pixels or lines by brightness, hue, or position to create glitch-sort aesthetics.
  • Slice an image into bands and offset each band horizontally or vertically.

Practical Tips for Creative Coding with Processing

Start With Simple Sketches

  • Begin with static graphics, then add motion and interaction.
  • Use the built-in Examples in the IDE as templates and mutate them into glitch pieces.

Embrace Parameter Play

  • Expose important numbers as variables: speeds, offsets, noise scales, color ranges.
  • Map those variables to mouseX, mouseY, or frameCount for live control.
  • Small changes to a single parameter often produce entirely new glitch behaviors.

Iterate Rapidly

  • Keep sketches short and focused; duplicate a working sketch and break it on purpose.
  • Develop multiple quick variations instead of polishing a single “perfect” piece.
  • Save interesting output using saveFrame() to capture stills or sequences.

Work With Libraries

Explore Processing’s ecosystem for glitch and creative coding workflows:

  • Video input for live camera distortion.
  • Sound libraries for audio-reactive glitch visuals.
  • OSC / MIDI for connecting to controllers and external software.

Document Your Experiments

  • Comment your code so you can reconstruct how you achieved specific artifacts.
  • Save parameter sets and random seeds to reproduce or evolve promising results.
  • Export both source code and rendered images/gifs for future remixing.

Glitch Mindset in Processing

For glitch art, Processing is not just a language but a lab:

  • Treat each sketch as an experiment.
  • Use code to intentionally break visual expectations: overflows, extreme values, noisy inputs, and feedback.
  • Combine determinism (algorithms) with chaos (randomness and feedback) to craft controlled accidents.

Processing’s tight feedback loop, visual orientation, and approachable syntax make it an ideal foundation for a glitch-focused creative coding practice.