Building a digital painting studio from scratch with Processing




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!
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Yehwan Song‘s mindblowing experimental websites move between art and design and consistently break familiar patterns in the interaction and functionality […]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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