Creative

Computation
for Visual

Communication
Design

WEEK 5 DAY 2

Leftover day!

Where to go
from here?

Continuing with p5:

Object-Oriented Programming

Autonomous agents, swarms, physics simulations

Reaction Diffusion algorithm

Cellular automata: Conway's Game of Life

Continuing with p5:

Images & video:

Pixel sorting, filters, glitch, image detection

Continuing with p5:

Recursion & fractals

Continuing with p5:

3D, WebGL and shaders

Continuing with p5:

Serial communication
(and physical computing)

Other JS libraries

• Three.js

  • WEBGL 3D graphics library

• Paper.js

  • Vector graphics library

Coding Workshop 5.2

Custom font in CSS

• Use custom fonts for HTML elements like buttons using the @font-face rule in CSS

Loading text files

• Reads the contents of a file and creates a String array of its individual lines
• Use inside the preload function
• Filename can also be a URL for external file hosted online
• Can read files up to size of 64MB

Exercise 1: Dada Poem

• Combine two different source texts randomly to create dadaist cut-up poetry!
• You can download books as text files from Gutenber Project

Exercise 2: Text to Points

VARIATION: Exercise 3: Input Button

Exercise 4: Noise

VARIATION: Exercise 5: Noise Circle

VARIATION: Exercise 6: Noise Terrain

Reverse
engineering challenge

Reverse engineering

"Reverse engineering is a process or method through which one attempts to understand through deductive reasoning how a previously made device, process, system, or piece of software accomplishes a task with very little (if any) insight into exactly how it does so. It is essentially the process of opening up or dissecting a system to see how it works, in order to duplicate or enhance it."

Exercise:
Reverse engineering

• Work in groups of 2-3

• Take a look at Saskia Freeke's daily creative coding sketches at sasj.tumblr.com

• Pick one "series" of similar artworks

  • What is similar in them?

  • What is different?

• Pick one of the artworks and try to reverse engineer it!
  • Break the artwork down to smaller parts
  • What do you see?
  • What does the artwork consist of?
  • What are the rules / logic?
  • What seems to be randomised?
  • Which programming structures might be used?
  • Proceed from smaller units to larger units!
• ​First write down your deductions in natural language and/or pseudocode
• In the end, you can try to duplicate the artwork or some aspects of it in p5!