Building a digital painting studio from scratch with Processing

Published by Tim on Saturday June 18, 2022

Last modified on June 22nd, 2022 at 14:52

A few weeks ago I met the German artist Arno Beck, whose work I find absolutely great. Arno is a painter and deals with the transfer of digital phenomena into the physical world. Inspired by his painting I developed a digital painting software with Processing in this session.

Thanks to johnny_ctrl for the editing!

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

paintingstudio.pde

PImage[] images;

PGraphics source;
PGraphics target;
PGraphics result;

PGraphics comp;

PGraphics artboard;

PImage buffer;
PImage currImage;

int POSTER_W = 580;
int POSTER_H = 810;

float TILES_X = POSTER_W / 5;
float TILES_Y = POSTER_H / 5;

int sx, sy, sw, sh, dx, dy, dw, dh;

float scalar = 1;

float offsetX = 0;
float offsetY = 0;

float coutoutW = 30;

float threshold = 150;

void setup() {
  size(1740, 810);

  source = createGraphics(POSTER_W, POSTER_H);
  target = createGraphics(POSTER_W, POSTER_H);
  result = createGraphics(POSTER_W, POSTER_H);
  artboard = createGraphics(900, 900);

  comp = createGraphics(POSTER_W, POSTER_H);

  images = new PImage[9];

  images[0] = loadImage("1.jpg");
  images[1] = loadImage("2.jpg");
  images[2] = loadImage("3.jpg");
  images[3] = loadImage("4.jpg");
  images[4] = loadImage("5.jpg");
  images[5] = loadImage("6.jpg");
  images[6] = loadImage("7.jpg");
  images[7] = loadImage("8.jpg");
  images[8] = loadImage("9.jpg");

  currImage = images[int(random(images.length))];
}

void draw() {
  background(#00ff00);
  drawSource();
  drawTarget();
  drawResult();


  image(source, 0, 0);
  image(target, POSTER_W, 0);
  image(result, POSTER_W + POSTER_W, 0);
  noFill();
  stroke(#00ff00);
  strokeWeight(3);
  drawArtboard();

  rect(mouseX, mouseY, sw, sh);
  rect(mouseX + POSTER_W, mouseY, sw, sh);

  render();
}

artboard.pde

void drawArtboard() {
  artboard.beginDraw();
  artboard.background(0);
  artboard.imageMode(CENTER);
  PImage buffer = target.get();
  artboard.image(buffer,artboard.width/2,artboard.height/2);
  artboard.endDraw();
}

randomComposition.pde

void randomComposition() {
  
  int padding = 50;
  
  comp.beginDraw();
  comp.background(255);

  float diameter = random(300);

  comp.fill(0);
  comp.noStroke();
  comp.ellipse(random(padding,POSTER_W-padding), random(padding,POSTER_H-padding), diameter, diameter);
  comp.stroke(0);
  comp.strokeWeight(8);
  comp.strokeCap(RECT);
  comp.line(random(padding,POSTER_W-padding), random(padding,POSTER_H-padding), random(padding,POSTER_W-padding), random(padding,POSTER_H-padding));
  comp.endDraw();
}

render.pde

void render() {
  if (frameCount % 10 == 0) {
    artboard.save("out/" + nf(frameCount, 6) + ".png");
  }
}

result.pde

void drawResult() {

  float tileW = result.width / TILES_X;
  float tileH = result.height / TILES_Y;

  PImage buffer = target.get();

  result.beginDraw();
  result.background(#f1f1f1);

  result.noStroke();

  for (int x = 0; x < TILES_X; x++) {
    for (int y = 0; y < TILES_Y; y++) {

      int px = int(x*tileW);
      int py = int(y*tileH);
      color c = buffer.get(px, py);
      float b = brightness(c);

      if (b < threshold) {
        result.fill(0);
      } else {
        result.fill(#f1f1f1);
      }

      result.push();
      result.translate(x*tileW, y*tileH);
      result.rect(0, 0, tileW, tileH);
      result.pop();
    }
  }

  result.endDraw();
}

source.pde

void drawSource(){
  source.beginDraw();
  source.background(0);
  source.imageMode(CENTER);
  source.push();
  source.translate(source.width/2 + offsetX, source.height/2 + offsetY);
  source.scale(scalar);
  source.image(currImage,0,0);
  source.pop();
  source.endDraw();
}

target.pde

void drawTarget() {
  target.beginDraw();

  buffer = source.get();

  if (frameCount == 1) {
    target.background(#ffffff);
  }

  sx = mouseX;
  sy = mouseY;
  sw = int(coutoutW);
  sh = int(coutoutW);

  dx = mouseX;
  dy = mouseY;
  dw = int(coutoutW);
  dh = int(coutoutW);

  if (mousePressed) {
    target.copy(buffer, sx, sy, sw, sh, dx, dy, dw, dh);
  }


  target.endDraw();
}

ui.pde

void keyReleased() {
  if (key == '1') {
    currImage=images[0];
  }
  if (key == '2') {
    currImage=images[1];
  }
  if (key == '3') {
    currImage=images[2];
  }
  if (key == '4') {
    currImage=images[3];
  }
  if (key == '5') {
    currImage=images[4];
  }
  if (key == '6') {
    currImage=images[5];
  }
  if (key == '7') {
    currImage=images[6];
  }
  if (key == '8') {
    currImage=images[7];
  }
  if (key == '9') {
    currImage=images[8];
  }

  if (key == 'r') {
    scalar = random(1, 5);
    offsetX = random(-800, 800);
    offsetY = random(-800, 800);
  }

  if (key == 't') {
    randomComposition();
    currImage = comp.get();
  }
  if (key == 'e') {
    scalar = 1;
    offsetX = 0;
    offsetY = 0;
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  coutoutW += e*10;
}

Related links

Related

Programming Posters at Elisava

In October 2023 I will conduct a seminar at Elisava in Barcelona and I am really looking forward to it. […]

I’ve updated my Mockup Generator

For my students at Elisava, I have updated my mockup generator. Now its possible to load animations in the .gif […]

How I built myself a Digital Garden

It was a red hot day in July 2023 when I met Alex Muñoz for breakfast in the morning at […]

Stream: trustTheProcess(2) – Time in Space

In this livestream from June 22, 2023, I used Processing to develop an interactive, three-dimensional timeline of exemplary historical data […]

New work for the New York Times

Once again, I had the honor of illustrating an article for the New York Times that I myself am very […]

Ksawery Kirklewski on his Symphony in Acid

For me, it’s by far the most inspiring project of the last few years: “Symphony in Acid”, a collaboration between […]

Thoughts on Artificial Intelligence

Photo: Vyběr Socky What a ride! I’m sitting in the room of a luxury hotel in Prague, once again packing […]

A conversation with Francisca Torres / Elisava

In March 2023 I taught for a month at the renowned design school Elisava in Barcelona. This was a unique […]

Monica Losada on Overcoming Interfaces

She is super young, incredibly sympathic and insanely creative. In her work as a graphic designer, she experimentally explores the […]

Workshop “Collision” at Abk Stuttgart

In April 2023 I held a workshop at the AbK Stuttgart, which worked super well and was great fun. I […]

Marcus Aurelius Meditations

Since the beginning of the Corona crisis, I have been more and more interested in the history of ancient philosophy. […]

A conversation with Soyun Park

I met Soyun, a creative technologist from South Korea at a party hosted by Vera van de Seyp in Rotterdam, […]

Stream: Vera Molnar Reconstructed

In February and March 2023 I recorded a three-part live stream series in which I reconstruct selected works by the […]

A conversation with Yannick Gregoire

About a year ago I stumbled upon Yannick Gregoire’s profile on Instagram and was immediately fascinated by his work. Later, […]

Lena Weber on Ambiguous Aesthetics

In this post I’d like to introduce you to Lena Weber, who has helped me tremendously with the translation of […]

Martin Lorenz on the intersection of Creative Coding and Flexible Visual Systems

About two years ago I invited one of my early design heros, Martin Lorenz, for an online talk. Since that […]

DEMO Festival 2022 was a blast

This year I had the honor to be part of the DEMO Festival as a curator. It was a super […]

Key visual for Slate + Ash’s new software instrument

Together with Lena Weber I created the promo video for Slate + Ash’s brand new software synth called Choreographs. The […]

Generative portraits for IBM

Some of you may know that I have a split relationship with Instagram. Still, even though I often find myself […]

Llum Negra / La Luz Negra / Black Light

Custom design-software for CCCB Barcelona

Creative Coding as a School of Thought

Our world is changing at a breathtaking pace. Technological progress is continuously leading to significant transformations. It is high time […]

What is Creative Coding?

Note: This article is also available in German language. The world’s largest computer museum in provincial Paderborn sends hundreds of […]

Creative Coding as an Experience

Note: This article is also available in German. In 2014, my friends Lukas Schlaffke, Patrik Hübner and I packed a […]

Workshop at International Assembly

Last week (June 2022) I gave a three-day workshop at International Assembly and it was really really cool. The organization […]

An ode to the Gif

I’m pretty unhappy with the social media we creatives use today. The big platforms give us very convenient tools to […]

Curating the DESIGN IN MOTION Festival 2022

Imagine if the majority of all outdoor displays in public spaces were broadcasting the best of design and moving image […]

A conversation with Yehwan Song

Yehwan Song‘s mindblowing ex­peri­mental web­sites move between art and design and con­sis­tent­ly break familiar patterns in the inter­action and functionality […]

We need a sustainable perspective on life with technology

A short but beautiful text titled The universe gives me everything? on a friends blog made me think of what […]

2021 was my year of liberation

Dear Patreon-community, 2021 started with tremendous challenges. Besides my job as a web developer, where a massive project for an […]

The best programming language for Creative Coding in 2022

Yesterday I got a message from a very nice person named Julia who is interested in my courses, but is […]

I challenged Daniel Shiffman and here’s his response

This year I donated $700 to the Processing Foundation to support people who care about the development of the projects. […]

A mockup-design-tool built with Processing

Mockups can be used to effectively simulate and visualize graphic design applications. i’ve been using this technique for years to […]

Processing Community Day 2021 Recap

It was a sunny day in June 2021 when I got a message from Casey Reas on Instagram asking if […]

“The Infinite Layout Machine” by Michael Kreß

This is the case study of a project by Michael Kreß, a student from one of my courses in the […]

Q&A with Casey Reas

A few months ago I dreamed of talking to Casey Reas, one of the two masterminds behind Processing, about the […]

PCD2021 – Vera van de Seyp

In my perception, Vera plays a key role in the Creative Coding scene. On the one hand, her work is […]

Two Perspectives – Episode 3

Hello friends! Not only from my own experience, but also from years of teaching at different universities, I know how […]

Processing-Tutorial: A Grid of Arcs

In this tutorial, you’ll learn how to create a grid-based, flexible visual system of quarter circles in Processing. I’ll show […]

Processing-Tutorial: Exploring Wave-Figures

In this spontaneous Processing coding-session, I solve one of the assignments from my online course “Bauhaus Coding Workshop” available on […]

Stream: Interactive Grid System

Hey! In this recording of my very first YouTube-livestream i explain how to create an interactive visual system with Processing. […]

The Hidden Benefits of Learning to Code

I have chosen a very focused path for myself in the last few years and have concentrated fully on learning […]

My Story (part 2 – told at Taaalks Conference 2020)

This is a recording of my presentation at the TAAALKS conference. The yearly event covers the intersection of design and […]

New Course: Bauhaus Coding Workshop

I am very happy to be able to publish my new course “Bauhaus Coding Workshop” today! This course is a […]

Learnings from the Bauhaus about Art and Technology

We live in an unbelievable time: never before have there been so many innovations in such a short period of […]

Constants & Variables

A few months ago, Philip Jursch and Dogu Kaya interviewed me for their Master Thesis titled “Constants & Variables” at […]

My Story (Part 1)

My personal journey from a design-student to a creative coder.

Processing-Tutorial: Rasterize 3D

In this tutorial I show you how to create abstract 3D portraits from any image file. Here you will learn […]

Processing-Tutorial: Image-Rasterizer

Level: Beginner & intermediate In this tutorial i’ll guide you through all the necessary steps to rasterize an image with […]

p5studio

A prototype for a browser-based design-application, built with p5.js and vue.js.

Lifeline

A time in space-experience

Processing-Tutorial: Kinetic Typography 1

In the last years i’ve observed a new tendency in typography and graphic design which has been made possible by […]

My 10 favorite Processing-libraries

So called “libraries” extend the functionality of the software-development-enviroment Processing. Please handle those extensions with care: If you are a […]

4 alternative, free and well-curated resources for images, fonts and data

I passionately collect a special kind of media in a huge dropbox-folder: Resources that are free to use, not copyrighted […]

Processing or p5.js? My opinions

In this video i share my opinions about the benefits of p5.js and Processing. I also talk about how i’ve […]

Programming Posters

Creative Coding in the realms of Graphic Design

Instagram-Live with Lena Weber

I met Lena Weber at a workshop at International Assembly, after that we became friends and she helped me over […]

Digital Impact @ Disseny Hub

A few days ago, I visited the Disseny Hub in Barcelona to see the exhibition “Digital Impact”. On the website, […]

Stream: trustTheProcess(4) – Data Stream

2023-08-03 In this episode I have been looking at String Methods in p5.js, or rather in Javascript. Originally I wanted […]

A conversation with Raphaël de Courville

A few weeks ago I had the honor to meet Raphaël de Courville in person at the audivisual jam at […]

Stream: trustTheProcess(3) – ASCII Blobs

2023-07-20 Today I share the edit of the third episode of my trustTheProcess() livestreams with you. In it I rebuilt […]