Marko Řeháček & Megi Kejstová
rehacek@mail.muni.cz
Transformations
Week 2
GENERATIVE DESIGN PROGRAMMING
colors
background(color)
clear()
fill(color)
noFill()
fill(120); //gray: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //color string
fill('#ccc'); //3-digit hex
fill('#222222'); //6-digit hex fill
const mycolor = color(0, 0, 255);
//p5.Color object
stroke(color)
strokeWeight(weight: number)
noStroke()
colorMode(MODE) // HSB, RGB
colorMode(MODE, maxValue: number)
// default for HSB
colorMode(HSB, 360, 100, 100, 1.0)
// change default for RGB
colorMode(RGB, 100)
// HSB is preferred
// RGB used for specific calculations
JS
let empty_arr = [];
const empty_object = {};
Recap
program structure
// runs once when program starts
function setup(){
createCanvas(800, 600); // width, height in pixels
// can use windowWidth, windowHeight
// switch to full screen anytime (also in draw())
fullscreen(boolean)
}
// run continuously after setup
function draw(){
// rendering loop
}
globals
windowWidth / windowHeight // of browser window
width / height // of canvas
mouseX / mouseY
// current horizontal / vertical mouse position
non-visual feedback
print();
console.log(msg, …);
geometry
point(x, y)
line(x1, y1, x2, y2)
circle(x, y, radius)
ellipse(x, y, width, height)
square(x, y, side_length)
rect(x, y, width, height)
rectMode(MODE) // CENTER, CORNERS
arc(x, y, width, height, start, stop)
triangle(x1, y1, x2, y2, x3, y3)
p5.js docs
https://coolors.co/
GENERATIVE DESIGN PROGRAMMING
Map()
INTRODUCTION TO P5
Convert (/transform/map) number from one range to another.
Example
Use height of the mouse to control the color of a shape.
height
0
255
0
new_color = map( mouseY, 0, height, 0, 255 );
canvas
GENERATIVE DESIGN PROGRAMMING
Map() cont.
INTRODUCTION TO P5
height
0
255
0
withinBounds: false
(Default)
withinBounds: true
mouseX, mouseY
36
22.95*
*where height == 400
GENERATIVE DESIGN PROGRAMMING
map(value, start1, stop1, start2, stop2,[withinBounds])
Map() recap.
INTRODUCTION TO P5
Take any number and scale it to a new number that is more useful.
Example
Use mouse position to control the size or color of a shape.
Set HSB color mode, and map mouseX values in interval 0-width to 0-360 (hue).
fill( map( mouseX, 0, width, 0, 360 ) );
value: number; the number to be converted
start1: number; lower bound of the number’s current range
stop1: number; upper bound of the number’s current range
start2: number; lower bound of the number’s target range
stop2: number; upper bound of the number’s target range
withinBounds: boolean; constrain the number to the newly mapped range (Optional)
p5 reference
GENERATIVE DESIGN PROGRAMMING
millis()
Simple animation
INTRODUCTION TO P5
Returns the number of milliseconds since a sketch started running.
sin(x)
p5 reference
Can also try to combine it with sinus for constrained motion:
GENERATIVE DESIGN PROGRAMMING
How tf I draw this?
→ we decompose
using functionsand this??
GENERATIVE DESIGN PROGRAMMING
Transformations
GENERATIVE DESIGN PROGRAMMING
Translate
TRANSFORMATIONS
Move square 60 pixels
down and right?
GENERATIVE DESIGN PROGRAMMING
Translate
TRANSFORMATIONS
Move square 60 pixels
down and right?
GENERATIVE DESIGN PROGRAMMING
Translate
TRANSFORMATIONS
Built in function that shifts origin (point 0,0) of coordinate system
translate(number, number)
It is cumulative:
translate(10, -10);
translate(0, 50);
is the same as
translate(10, 40);
Resets each draw cycle.
GENERATIVE DESIGN PROGRAMMING
Rotate coordinate system by an angle
- always rotates around origin (0,0)
- expects angle in radians
- positive numbers rotate objects in a clockwise direction
- accumulates as translate()
rotate( angle_radians )
rotate( PI ) // HALF_PI
the angle of rotation, specified in radians or degrees, depending on current angleMode
angleMode( DEGREES ) // RADIANS, DEGREES
rotate( 180 )
rotate( radians( degrees ) ) // also possibility
Rotate
TRANSFORMATIONS
GENERATIVE DESIGN PROGRAMMINGTRANSFORMATIONS
Translation (60, 60) Rotation 90°
Order matters
GENERATIVE DESIGN PROGRAMMING
1. Draw a square in the middle of canvas, by drawing it at origin (point 0,0) and moving it towards
center using transformation.
2. Make it rotate. Try function millis() which returns number of milliseconds from start of sketch.
3. Switch: first rotate then translate, or first translate then rotate.
4. Make it slower, make it faster, make it stronger, make it better.
5. Play with framerate().
6. Try sin(x) together with map().
#6 Move it
TRANSFORMATIONS
Finished example
GENERATIVE DESIGN PROGRAMMING
Stretches or shrinks coordinate system
scale( float )
Scale
TRANSFORMATIONS
GENERATIVE DESIGN PROGRAMMING
The push() function saves the current drawing style
settings and transformations, while pop() restores
these settings.
When a new state is started with push(), it builds on
the current style and transform information.
Push & pop
TRANSFORMATIONS
GENERATIVE DESIGN PROGRAMMING
#7: Moroccan night
Draw an object consisting of circles, recursing. Use function
to draw the object.
Choose it nice color palette (coolors), I will use:
'#924234', '#A64839', '#D37E5C', '#DFB281', '#DEE5CC', '#2F3170'
Position the objects in grid to repeat as pattern. Use
transformations for positioning (function should start
drawing in origin.
Sprinkle in some stars.
INTRODUCTION TO P5
GENERATIVE DESIGN PROGRAMMING
Recreate Vera Molnar’s (Des)Ordres (1974) using transformations and recursion.
(Des)Ordres
TRANSFORMATIONS
When done
● try different shapes
● experiment with color – handpick
a nice color scheme or generate it
● use random() for shape positions,
rotations, colors, and more
● don’t stop here omg!
Hints
1. create a recursive function to draw a
single element from the grid
2. use for loops to create a grid, then use
transformations to draw the element
where desired using the function; do
not use push(), pop() or translate()
more than once
GENERATIVE DESIGN PROGRAMMING
Interactive example
https://github.com/mrehacek/p5-examples-grid
GENERATIVE DESIGN PROGRAMMING
Recursion art
Bloom, Holger Lippmann
GENERATIVE DESIGN PROGRAMMING
Sketch as HTML/JS file
GENERATIVE DESIGN PROGRAMMING
Install extensions:
1. samplavigne.p5-vscode
2. zsakowitz.p5-resources
Create project:
Command palette: CTRL+Shift+P
→ search for “p5 create project”
Open preview (must select index.html):
Useful extension: Github Copilot (free for education, but need apply)
Using VS Code
GENERATIVE DESIGN PROGRAMMING
Look at options: https://p5js.org/libraries/.
Let’s try https://github.com/bitcraftlab/p5.gui!
Using libraries
GENERATIVE DESIGN PROGRAMMING
Add UI elements using p5.gui:
1. download library source code to your project files, add in index.html
2. use
UI
TRANSFORMATIONS
https://mrehacek.github.io/p5-examples-grid/
GENERATIVE DESIGN PROGRAMMING
Save to image
keyPressed ( ) {
if (key === “s”) {
save();
}
…
}
Check keyCode for special keys (LEFT_ARROW, BACKSPACE, ESC, … see more):
if (keyCode === RETURN) …
Use keyTyped() if you want to distinguish between lower and uppercase letters…
INTRODUCTION TO P5
GENERATIVE DESIGN PROGRAMMING
Homework 1: Geometric patterns
HW1
Your task is to create a sketch that generates a set of
artworks of geometric pattern (for example, for a new
desktop background). The emphasis of this project lies
on the generative creation, i.e. your sketch is expected to
create multiple artworks. This can be achieved by using
randomness, input data, mathematical functions or user
interaction such as mouse movement. There is no
limitation to your ideas. Do not use libraries specialized
for patterns.
To export your artwork, use function save(). In case you
are interested in artwork postprocessing, you can try
vector format (SVG).
Technical information regarding the submission and
deadline are in interactive syllabus in IS.
GENERATIVE DESIGN PROGRAMMING
Tell me, what to do.
Examples
HW1
GENERATIVE DESIGN PROGRAMMING
Give me nice colors.
Examples
HW1
GENERATIVE DESIGN PROGRAMMING
You can be a little bit fuzzy about it. I do like randomness.
Examples
HW1
GENERATIVE DESIGN PROGRAMMING
Or you can try just lines.
Examples
HW1
GENERATIVE DESIGN PROGRAMMING
You can do a lot with me. A lot.
Examples
HW1
GENERATIVE DESIGN PROGRAMMING
Draw a shape.
Maybe try it multiple times.
In a grid.
Or randomly?
Assign it color, or multiple of them.
Again randomly?
Or parametrically?
You say based on position?
Sure. Also the size sounds cool!
Sure, they can overlap.
Yeah, go along and tweak it.
Maybe redraw it with a new shape?
Or just copy from your classmate.
But you can also just ask anyone to give you a tip.
Examples
HW1
And now it’s you
and geometric patterns
GENERATIVE DESIGN PROGRAMMING
We will have a competition for the best homework!!!
The winner gets a large print of his artwork.
Voting will be anonymous and held at the beginning
of the following class through discord. You will have
2 votes, and each teacher will have 4.
Have fun creating your sketches!
PS
HW1