Programming Posters at Elisava 2023

Vimeo

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

Load video

The Teaser

Creative Coding in the realms of Graphic Design 💾

Hi and welcome everyone! I am thrilled to be back at Elisava and work together with you in this elective! Together we will explore Creative Coding in the realms of Graphic Design together. For this you can use the javascript-based programming language p5.js or Processing to develop interactive and animated poster motifs as representatives for a system-based, flexible visual system. In doing so, we limit ourselves to a narrow selection of colors and a few fonts, just like in a real client project, to keep the output of the group nice and coherent.

Thematically, however, the whole thing remains open, you can simply come up with a fictitious project (for example, for a museum, concert hall, theater or record label) or choose a purely formal topic that can be named with an abstract term like “tension”, “contrast”, “spatiality”, or “kinetic typography”. However, the brief of this project is to create animations that follow the formal attributes of posters.

Basically, the goal of the elective is that you find your way into the thinking of programmed, system-based design. The languages Processing and p5.js are ideal for this, because they are specifically tailored to the needs of artists and designers. Throughout the course you will get access to my online-curriculum where you’ll will find many different video courses explaining Creative Coding from zero to hero.

Styleguide: Colors 🌈

The color scheme is basically intended as an orientation and starting point, but can be remixed and changed with good justification.

// Green
color GREEN = #1fa81f;

Styleguide: Fonts ✍🏻

Styleguide: Format 🖼️

Please create all your sketches in the format 650*800

Processing

void setup() {
  size(650, 800);
}

void draw() {
  
}

p5.js

function setup() {
  createCanvas(650, 800);
}

function draw() {
  
}

Dropbox folder

In this Dropbox folder, I’ll share resources with you that you can access during the course of the elective.

Final project submission 👀

For the submission of your final project I expect the following:

  • animations in mp4 or gif format or static images in jpg or png format.
  • mockups of your work showing the animations in public space.
  • a detailed text that is formulated as if you were presenting the final project on your portfolio to a wide audience or potential work or clients. This text should contain at least 200 words. In it, you should elaborate on your idea, your implementation and, if you wish, your learning process and motivation.

Schedule ⏱️

SessionContentsHomework
oct 10– introduction
– course presentation
what is Creative Coding?
a guided tour through timrodenbroeker.de
– setting up the student accounts
– develop a project idea based on the brief
– create a PDF presentation explaining that idea
– Fotosafari: Take 3-10 photos of posters and out of home displays for mockups
upload your work to this dropbox folder
oct 17– an introduction to p5.js
random Compositions
push() and pop(), translate()
– presentation of the project ideas
– define a set of 3-5 distinct geometric components
– generate 300 random compositions of these elements
– curate the output
– create a PDF presentation explaining your results, thoughts and process
upload your work to this dropbox folder (zip-file)
oct 24for loops
grids
– Waves: sin() and cos(), tan()
– Perfect Loops
– Gif Export in p5.js
map()
– develop eight sketches with different lissajours curves
– export these lissajours-curves as a perfect loop in gif-format
– create a PDF presentation explaining your process
upload your work to this dropbox folder (zip-file)
oct 31– Typography
using fonts
textSize() and textLeading()
textAlign()
images
copy()
– select a poster from Stig Møller Hansens Pinterest board (link)
– recreate the poster with p5.js
– create variations and remixes
– export five static images or animates gifs of your tweaks
upload your work to this dropbox folder (zip-file)
nov 14The Third Dimension
– 3D / WEBGL in p5.js
3D geometry: spheres and boxes
– textures
lights
– background
– create an interactive three-dimensional scene made of textures boxes and spheres
– record a gif of your scene
upload your work to this dropbox folder (zip-file)
nov 21– Working with layers and offscreen buffers
createGraphics()
– Feedback sessions
– project work
nov 28– Feedback sessions– finish your final project
upload it to this dropbox folder (see specs above!)
dec 5– Final presentationsdone! 🎉

Internal Links 📖

External Links

Resources

FFMPEG: Black Passepartout

ffmpeg -i gifscanner_commandline_matgit01.gif_50x10.mp4 -vf "pad=width=1000:height=1000:x=200:y=75:color=black" output.mp4