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

HOW TO CREATE MULTIPLE OBJECTS INTERACTING WITH EACH OTHER? 

Reaction Diffusion algorithm

Cellular automata: Conway's Game of Life

Continuing with p5:

Images & video:

Pixel sorting, filters, glitch, image detection

HOW TO USE IMAGES AND VIDEO AS A SOURCE MATERIAL? 

Continuing with p5:

Recursion & fractals

A FUNCTION REPEATING ITSELF

Continuing with p5:

3D, WebGL and shaders

MAKING GRAPHICS FASTER WITH SHADERS

CREATING 3D ENVIRONMENTS

Continuing with p5:

Serial communication
(and physical computing)

HOW TO MAKE YOUR P5 SKETCH COMMUNICATE WITH CONTROLLERS, SENSORS AND OTHER PROGRAMS?

Other JS libraries

CHECK OUT MANY OTHER COOL CREATIVE CODING TOOLS AND RESOURCES HERE!

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

loadStrings(filename, [callback], [errorCallback])
  • 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
let myText = loadStrings("textFile.txt");

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!