Digital Painting with Coded Brushes

Workshop by

​

​

Kahani Ploessl

https://linktr.ee/kahoogie

she/her

New media artist and creative technologist specializing in generative, installation, and video game art

digital spiritualism

the glitch

playful hybrid reality

oil concept art

1. The Interface

​

• Introduce Web Painter
• Functions and Brush Types
• My Art!
• Activity 1: Draw a picture

​

3. The Code

​

• Guide to code
• How to add brushes
• Activity 2: Code a Brush

​

2. p5 Snapshot

​

• What is p5.js
• Create and Style Shapes
• Adding Generative Code

Agenda

1.

​

Get a fun new painting tool!

3.

​

A guide to customizing the painting tool

​

2.

​

A glimpse into p5 and the code art medium

Goals

The Interface

The Interface

WEB EDITOR

FULLSCREEN

Playful web painter that combines pixelation, generative computation, and their inherent low-brow digital stylization with human movement, figuration, and error

The Interface

The Interface

• Features:
• Background: Refresh canvas with a background color or uploaded reference image
• Brushes:
• Select a shape, image, or generative brush by clicking a button
• Colors: 1-Fill, 2-Stroke, 3-TBD
• Size Slider: set overall scale of brush
• Stroke Slider: set outline thickness
• Download button saves current canvas
• Spacebar clears drawing
• Notes:
• No undo! Recommended to save frequently
• Transparency is buggy

WEB EDITOR

FULLSCREEN

Playful web painter that combines pixelation, generative computation, and their inherent low-brow digital stylization with human movement, figuration, and error

The Interface

The Interface

Playful web painter that combines pixelation, generative computation, and their inherent low-brow digital stylization with human movement, figuration, and error

• A customizable skeleton interface
• Dry UI makes simpler code
• digital DIY
• No undo and relatively lower resolution keeps code lightweight

​

• Other fun web painters:
• https://kidpix.app/
• https://internet-janitor.itch.io/wigglypaint

​

WEB EDITOR

FULLSCREEN

Art by

Doodle overtop a photo of yourself

Upload a sketch to trace

Use a series of live capture brushes

Create a drawing and reupload as a brush

Draw your favourite animal

Create an abstract piece

Explore each brush

Activity 1

The Interface

p5 Snapshot

Comfort with Math?

Coding Experience?

• Snapshot not a formal introduction

​

• Overview of p5 relevant to creating brushes
• Focus on shapes, styling, and linking mouse data

​

• Copy and paste friendly end activity
• Explore how a specific project template can accessible demonstrate how code works

​

The Interface

p5 Snapshot

BLANK WEB EDITOR

DOCUMENTATION

• Javascript is the main coding language of web based interactions
• p5 is a Javascript Library - a functional addon

​

• A tool for coding interactive web art
• Uses geometry and math to draw a composition of shapes
• Code interactivity: inputs (mouse, keyboard, webcam), events, time, randomness
• Includes a convenient web editor workflow

​

WEBSITE

Canvas

• p5’s drawing space
• Uses a grid system
• Origin is top left
• Can be set to specific pixel size or fullscreen
• Use grid to track mouse position

(0,0)

(3,3)

createCanvas(3, 3);

(1,2)

x

y

Canvas

• p5’s drawing space
• Uses a grid system
• Origin is top left
• Can be fullscreen or a set pixel size
• Use grid to track mouse position

The Interface

(0,0)

width

height

(width,height)

(mouseX,mouseY

​

createCanvas(windowWidth, windowHeight);

Creating Shapes: Format

shapeName(data, data, data, data …);

Midpoint and dimensions: shapeName(midPoint X, midPoint Y, dimensions …);

Vertex: shapeName(vertex0 X, vertex0 Y, vertex1 X, vertex1 Y, vertex2 X, vertex2 Y …);

Creating Shapes: Midpoint and Dimensions

*Easiest to make into a brush

square(x, y, length);

rect(x, y, lengthX, lengthY);

Creating Shapes: Midpoint and Dimensions

*Easiest to make into a brush

circle(x, y, radius);

ellipse(x, y, radiusX, radiusY);

Creating Shapes: Vertex Shapes

*Requires some math

point(x, y);

line(x0, y0, x1, y1);

Creating Shapes: Vertices

*Requires some math

triangle(x0, y0, x1, y1, x2, y2);

quad(x0, y0, x1, y1, x2, y2, x3, y3);

Shapes Summary

• point(x, y);
• circle(x, y, radius);
• square(x, y, length);
• ellipse(x, y, radiusX, radiusY);
• rect(x, y, lengthX, lengthY);
• line(x0, y0, x1, y1);
• triangle(x0, y0, x1, y1, x2, y2);
• quad(x0, y0, x1, y1, x2, y2, x3, y3);

Making Shapes a Brush

• point(mouseX, mouseY);
• circle(mouseX, mouseY, radius);
• square(mouseX, mouseY, length);
• ellipse(mouseX, mouseY, radiusX, radiusY);
• rect(mouseX,mouseY, lengthX, lengthY);

​

Making Brushes Scalable

• point(mouseX, mouseY);
• circle(mouseX, mouseY, size);
• square(mouseX, mouseY, size);
• ellipse(mouseX, mouseY, size, size/2);
• rect(mouseX,mouseY, size, size/2);

​

Making Brushes Scalable

• line(mouseX - size, mouseY - size,

mouseY + size, mouseY + size);

• triangle(mouseX, mouseY - size,

mouseX - size, mouseY + size,

mouseX + size, mouseY + size);

• quad(mouseX, mouseY - size,

mouseX + size, mouseY,

mouseX, mouseY + size,

mouseX - size, mouseY);

Making Brushes Generative (Bonus)

Randomization

• random(min,max), Returns a random number between set range

circle(mouseX + random(-10,10),

mouseY + random(-10,10),

size)

Making Brushes Generative (Bonus)

Timebased

• frameCount, Returns current frame number
• I divide by 10 to slow down its effect
• Oscillation:
• sin(frameCount/10)
• cos(frameCount/10)

circle(mouseX, mouseY, size * sin(frameCount/10));

Stylization

• Strokes:
• stroke(r,g,b);
• strokeWeight(value);
• noStroke();
• Fill:
• fill(r,g,b);
• noFill();
• Colors can be expressed as RGB, Hexcode
• colourSelect1.color();

​

​

Stylization

• Style code is applied to all objects after it

fill(0,0,255);

stroke(255,0,255);

strokeWeight(12);

circle(5, 5, 5);

​

fill(0,255,0);

circle(10, 1, 1);

Break

Optional:

Create a p5 Account

The Code

WEB EDITOR

Bonus!

Step 4. Add custom stylization

Step 5 Make brush generative

Step 1. Make new brush button

Step 2. Locate brushes code

Step 3. Create brush

Guide to Adding a Brush

Step 1. Make new brush button

• Locate const brushNames
• Add title of brush in single quotes, with each brush separated by a comma

• Locate function mouseDragged(){}
• UI values are applied at the beginning of this function
• Locate switch (toolMode) {}
• Each brush is a different case block inside switch (toolMode) { brushes }
• Create a new case block with your brush name spelled exactly as your button

Step 2. Locate brush code

• Use geometry functions to create brushes
• (point, line, circle, ellipse, square, rect, triangle, or quad)
• Try copy and pasting code of other brushes as a starting point
• Use size variable for length, radius, etc.

Step 3. Create brush code

• The first two colour pickers are assigned to fill and stroke respectively, but this can be overwritten in each brush’s case
• A third swatch can be applied to any additional feature:
• fill(colorSelect3.color()); or stroke(colorSelect3.color());

Step 4. Add custom style

• Experiment with adding randomization and oscillation effects to your code
• random(min,max)
• sin(frameCount)

Step 5. Make brush generative

Experiment with adding generative code

Create a new brush using multiple shapes

Try adding the code from the brush guide

Activity 2

Send me your art!

kahani.ploessl@gmail.com

I would love love love to see what can be made with this tool and to share in future workshops. Shoot my an email with your art if comfortable. All art sent will be credited.