Explore

Ideate

Make

Test

Share

We will meet on a weekly basis Mondays 9.30am – 12.30pm. For a breakdown of the weekly schedule, navigate downwards.

This session will focus on introducing the techniques, visual directions and experiments we want to explore over the course of the workshop.

We will take a look at the structure of a letter and its vertex points which can be accessed and manipulated in code.

In this session we will cover a series of technical topics on how to sculpt form, shapes, typography through code interactively and generatively.

Based on what we have covered and explored, participants will embark on their own code type challenge.

During this last session we will do a work in progress show and tell of progress made so far. The web-template will be introduced.

Shapes and Letters

Code Type Challenge

Vertex Points

Freestyle

Microsite

w1

w2

w3

w4

w5

This section gives an overview of basic coding concepts you should find useful to playfully explore activities and exercises for this workshop and creative coding in general.

Code, simply put, is a set of instructions for programming a computer. In Creative Coding, we use instructions to create computer-generated results. Often visual, they can be static, dynamic, poetic, interactive and they can appear on a screen or on paper, as objects among many other things.

In Creative Coding, we call a sketch a computer program. Why a sketch? In art or design, a sketch is a common term for a rough and unfinished drawing, here a coded sketch should be seen similarly, rough and unfinished, to illustrate a thought, to bring a creative idea to life.

An editor, or more precisely a code editor, is a text editor program designed for editing source code for computer programs. In our particular case this semester, we will use a browser-based editor at editor.p5js.org, a web editor for p5js. For demos and tutorials we will use p5live.

A function is simply a “chunk” of code that you can use over and over again, rather than writing it out multiple times. Functions enable programmers to break down or decompose a problem into smaller chunks, each of which performs a particular task.

Transformation  is a concept that initially leaves you scratching your head. Why? Transformations act on the coordinate system rather than on shapes, and transformations are accumulative. Allison Perish has written an extensive and useful tutorial with examples here. 

A for loop repeats one or more statements a given number of times.

A for loop repeats one or more statements a given number of times.

Computers can be programmed to make decisions, to do different things in different circumstances. Decisions take the form of an if-then format. They start with a condition, which is then evaluated as either True or False.

This session will focus on introducing the techniques, visual directions and experiments we want to explore over the course of the workshop.

Design by Numbers. John Maeda

Scriptographer. Juerg Lehni

Processing. Casey Reas, Ben Fry and Community

Generative Design. Benedikt Gross et al.

1990s

2002–2012

since 2001

2009 and 2018

Create an adaptation from one of the images on the right. Here look for patterns in the image and apply them in code, but first, analyse with pen and paper before you head over to the code editor.

You can work in pairs. The purpose is to analyse and understand the image in structure and then translate into code.

Using simple shapes, each participant will draw two  assigned letters in code using a canvas of size 540x540. Use black and white only.

continues on next page

For each of your assigned letters, create a coded poster with the coded letter in the foreground.

Support the foreground with a composition of basic shapes and colors arranged in the background.

Before you start: come up with a simple narrative–a fleeting moment–that your posters are based on.

600 x 850 pixels

primitive shapes

maximum 5 colors

coded

p5js sketch, png (svg if possible)

We will take a look at the structure of a letter and its vertex points which can be accessed and manipulated in code.

Shapes and Letters

Code Type Challenge

Vertex Points

Freestyle

Microsite

w1

w2

w3

w4

w5

In session 2 we will continue to look at simple shapes and then continue with manipulating vertex points of a letter. Outcomes here can be rendered as images or .svg files.

Furthermore, we will look at reading and loading fonts in p5js. Ideally the fonts are uploaded in ttf format into your sketch. For example, you can download a font from Google Fonts as a ttf file and then upload this file into your sketch. With the commands to the right you can control the font-settings of letters after a font has been loaded.

In session 2 we will continue to look at simple shapes and then continue with manipulating vertex points of a letter. Outcomes here can be rendered as images or .svg files.

Furthermore, we will look at reading and loading fonts in p5js. Ideally the fonts are uploaded in ttf format into your sketch. For example, you can download a font from Google Fonts as a ttf file and then upload this file into your sketch. With the commands to the right you can control the font-settings of letters after a font has been loaded.

Create a sketch that loads a font and displays the font in 2D and 3D. You can create two sketches here, one for 2D and one for 3D.

Use up to 5 words. Use the references and demos provided. For each sketch only use  black and white.

Select one out of the three reference images to the right and create a sketch that follows its particular style. If unsure, do a quick search on the designer and design style to view more examples for that particular period and style.

Using the vertex point details of a letter you are able to create a custom letterform by replacing and animating a vertex point's visual representation.

In this activity play with the number of vertex points and the visual representation of a point using different shapes, movement and color. The final letter should be saved as .svg and .png file. ​

Vertex points, or vectors, are the building blocks of a single letter of a typeface. Letters here can also be referred to as glyphs – the specific shape, design or representation of a character. In code we can access the vertex points of a glyph and manipulate and customise a glyph.

To what extend can we ________ so that the letter is still readable?

How can we ________ so that the process and outcome can be considered playful?

Build on Exercise 2 Static Text and create a 5 to 10-second animation. Use up to 5 words that describe one or more sounds or experiences, for example: broken glass or wrrroommhh or click clack. You can use multiple sketches and then edit them together in post-production.

From exercise 3 Letterforms and vertex points create an animation to your taste, it can last up to 20 seconds. If you want to use sound, use non-copyrighted tracks from freesound.org

540 x 540  or 1080 x 1080 pixels

shapes and fonts

maximum 5 colors

coded

For each challenge

1. a p5js sketch

2. png(s) or svg(s) (process)

3. a mp4

1

2

In this session we will cover a series of technical topics on how to load and use fonts with p5js, however, this will also depend on the progress we have made so far.

Demonstrating and understanding iteration. Click on a to f on the right to open code at different stages of a sketches' development process.

Easy right click into the canvas, then 'save image as ...'

Or, more challenging, use saveCanvas() on keyPressed in your code to save the canvas to image (this option is included in many of the sketch samples provided in this slide deck)

Use quicktime's screen recording option to record videos from a running sketch.

A buffer is equivalent to a layer in Photoshop or Illustrator. In p5js such a layer is created using the createGraphics command. We can then access this buffer and draw into it. Buffers can then be treated like images and we can apply filters using blendMode() or use them as textures applied to 3D objects. 

The examples provided in this section will demonstrate the following:

1 create a buffer with createGraphics()

2 draw into a buffer and render it using image()

3 apply buffers to texture()

4 draw buffer multiple times and use blendMode()

A buffer is equivalent to a layer in Photoshop or Illustrator. In p5js such a layer is created using the createGraphics command. We can then access this buffer and draw into it. Buffers can then be treated like images and we can apply filters using blendMode() or use them as textures applied to 3D objects. 

The examples provided in this section will demonstrate the following:

1 create a buffer with createGraphics()

2 draw into a buffer and render using image()

3 apply buffers to texture()

4 draw buffer multiple times and use blendMode()

A buffer is equivalent to a layer in Photoshop or Illustrator. In p5js such a layer is created using the createGraphics command. We can then access this buffer and draw into it. Buffers can then be treated like images and we can apply filters using blendMode() or use them as textures applied to 3D objects. 

The examples provided in this section will demonstrate the following:

1 create a buffer with createGraphics()

2 draw into a buffer and render using image()

3 apply buffers to texture()

4 draw buffer multiple times and use blendMode()

A buffer is equivalent to a layer in Photoshop or Illustrator. In p5js such a layer is created using the createGraphics command. We can then access this buffer and draw into it. Buffers can then be treated like images and we can apply filters using blendMode() or use them as textures applied to 3D objects. 

The examples provided in this section will demonstrate the following:

1 create a buffer with createGraphics()

2 draw into a buffer and render using image()

3 apply buffers to texture()

4 draw buffer multiple times and use blendMode()

A buffer is equivalent to a layer in Photoshop or Illustrator. In p5js such a layer is created using the createGraphics command. We can then access this buffer and draw into it. Buffers can then be treated like images and we can apply filters using blendMode() or use them as textures applied to 3D objects. 

The examples provided in this section will demonstrate the following:

1 create a buffer with createGraphics()

2 draw into a buffer and render using image()

3 apply buffers to texture()

4 draw buffer multiple times and use blendMode()

We can read sound input using the p5js sound library and then analyse it using the fft method. An fft analysis extracts the intensity for a range of frequencies which we can then use to manipulate visuals on the screen.

Both examples linked to on the right demonstrate how to read sound from the microphone and then read the intensity of frequencies as well as the sound level. 

Review the challenge from session 2 and improve on it as or if  necessary (optional)

Create a series of sketches that address one or more of the topics and code samples covered in this session. You can choose to work with one or more of the following options: Buffer, 2D, 3D, reactive. If you are using sound, use non-copyrighted soundtracks, for example from freesound.org

fullscreen

shapes and fonts

maximum 5 colors

coded

For challenge 2

1. one or more p5js sketch(es)

2. png(s) or svg(s) (process)

3. a video in .mp4

1

2

Based on what we have covered and explored, participants will embark on their own code type challenge which will accumulate in a series of web-based (and maybe printed) outcomes called AlgoNature.
 

Designed experiments and outcomes here revolve around the concepts of algorithms and nature.

many examples and references have been shared and shown in previous slides. Use those as a starting point and inspiration if you find them useful.

In this mini project you will extend and apply your typographic experiments to 1) or 2)

1) a mock-up of a spatial scenario, for example a poster, billboard, animation, exhibition design, virtual space or a combination of these

2) An interactive application, such as a camera- or sound-reactive application, a generative tool or similar that can be user-tested.

optionally you can combine 1) and 2)

1) can be achieved by overlaying coded experiments in a p5js sketch over a photograph.

2) can be achieved by testing and video recording an interactive sketch with one or more of your peers.

Start by sketching visual ideas on paper. Your approach can be purely visual or thematic.

A visual approach, for example, looks at a series of explorations into the representation of typographic elements where composition, complexity, iteration, movement and generativity are central to the experiments and outcomes.

A thematic approach, for example, focuses on the interpretation of an imaginary event such as a festival, conference or exhibition. Experiments and outcomes here can be derived and guided by visual interpretations of the theme. Outcomes should be static and animated, they can be interactive if applicable.

Work on a mockup of a spatial scenario OR an interactive application with focus on generative type.

Use a visual or thematic approach

Document your process from initial sketches on paper to a series of p5js sketches to images and videos.

Finished outcome

fullscreen (16x9) or square

shapes, words, letters

2D or 3D, max. 5 colours

frameCount, sin, tan, loop

1. pen on paper sketches

2. series of p5js sketches

3. final sketch

4. png(s) or svg(s) (process)

5. mp4

6. short description

1

2

3

4

During this last session we will do a show-and-tell of progress made so far. The web-template will be introduced.

Show and tell

present interactive and/or animations of your mini project on your laptop. Bring a series of prints.