Programming Posters at Elisava 2023

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.

Explore the Curriculum

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.

Click here to open

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 ⏱️

Session	Contents	Homework
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 24	– for 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 14	– The 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 presentations	done! 🎉

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

Mockup Generator