Creative

Computation
for Visual

Communication
Design

 

WEEK 3 DAY 1

Design = Program

“To describe the problem is part of the solution. This implies: not to make creative decisions as prompted by feeling but by intellectual criteria. The more exact and complete these criteria are, the more creative the work becomes. The creative process is to be reduced to an act of selection. Designing means: to pick out determining elements and combine them.”

Karl Gerstner: Designing Programmes (1964)

“In stead of solutions for problems, programmes for solutions”

Karl Gerstner: Designing Programmes (1964)

a:11,21,33

b:14,22

c:12,22,33,41

d:11,22,31,43

Rules = program

Irma Boom: Architecture of the book (2013)

Chermayeff & Geismar: Environmental Protection Agency (EPA) identity (1977)

Identity = program

Helsinki City visual identity by Werklig (2017)

No rules = rule = program

Baltic Circle International Theatre festival identity by GRMMXI (2015)

 

Series = program

Fontana Modern Masters series published by Fontana books 1970-1995,
first cover design based on a painting by Oliver Bevan

Grid = program

Josef Müller-Brockmann: Grid Systems in Graphic Design (1980)

Grid = program

Josef Müller-Brockmann: Grid Systems in Graphic Design (1980)

“There are various reasons for using the grid as an aid in the organization of text and illustration: economic reasons: a problem can be solved in less time and at lower cost. rational reasons: both simple and complex problems can be solved in a uniform and characteristic style. mental attitude: the systematic presentation of facts, of sequences of events, and of solutions to problems should, for social and educational reasons, be a constructive contribution to the cultural state of society and an expression of our sense and responsibility.”

Grid = program?

Typeface = program

1920’s geometric sans typefaces in the article “Zweifel” (doubt) by Heinrich Jost in Klimschs Jahrbuch, vol. 21, Frankfurt/Main 1928

Typeface = program

Jurrijaan Schrofer: sketches and typefaces from 1960-1970

 

Typeface = program

Wim Crouvel: New Alphabet (1967)

 

Wim Crouvel: Claes Oldenburg (1970)

 

Typeface = program

Joshua Koomen: New Alphabet tool (2015)

 

Typeface = program

Donald Knuth: Metafont language (1977)

 

"Asking an artist to become enough of a mathematician to understand how to write a font with 60 parameters is too much."

Donald Knuth

 

Typeface = program

Alexis Reigel & Marco Müller: Metaflop font generator

Variations = program

Broadgate identity and the "Kinetic B" logo by dn&co (2018)

Variations = program?

Customisation = program

Nike by You: Air Force I (2019)

Parameters = program

MODULAR

FLUID

Parameters = program

Fontsmith variable fonts showcase (2019)

Parameters = program

PARAMETER =
A quantity whose value is selected for the particular circumstances and in relation to which other variable quantities may be expressed.

Antoni Gaudí’s force model of La Sagrada Família (1920s)

Optimisation = program

"The software explores all the possible permutations of a solution, quickly generating design alternatives. It tests and learns from each iteration what works and what doesn’t."

Autodesk generative design tools

Optimisation = program

Zaha Hadid Architects x Melissa shoes (2015

Maurice Conti TED talk: The incredible inventions of intuitive AI (2016): Drone and flying squirrel skeleton

Optimisation = program

Wix ADI

Adobe Sensei

Adobe Firefly

Optimisation = program

Netflix Tech Blog: Artwork Personalization at Netflix (2017)

Optimisation = program?

“For no problem (so to speak) is there an absolute solution. Reason: the possibilities cannot be delimited absolutely. There is always a group of solutions, one of which is the best under certain conditions.”

Karl Gerstner: Designing Programmes (1964)

Weekly Reading III

  1. Eryk Salvaggio (2023) "How to Read an AI Image"

  2. Jiang et. al (2023) "AI Art and its Impact on Artists"

Produce an AI-generated image using eg. Stable Diffusion and a prompt of your choice. Post the image on week 3 forum. Following Salvaggio's methodology, describe briefly some of the signals, biases and stereotypes you notice in the generated image. Also reply to someone else's post.

Coding Workshop 3.1

Computational Typography

Judson Rosebush: Letter Field (1978)

Computational Typography

“The struggle that I often have with students who are interested in creating algorithmic design projects is that they just don’t know what the content should be. They don’t know what to say. There could be shapes and colors on the wall, and a person waves her hands and it changes, but who cares? Working with typography helps, because type is a conduit to communication.”

Ellen Lupton

Graphic Magazine #37 (2016)

Computational Typography

Tim Rodenbröker

John Burgess

HOW TO MAKE TYPOGRAPHIC ANIMATIONS AND COMPOSITIONS WITH CODE?

Text Art

Beetroot studio: Romeo and Juliet poster (2010)

HOW TO PROCESS TEXT AS SOURCE MATERIAL?

Computational Lettering

Fábio Pereira: Experiments on Generative Type Design (2019)

HOW TO CONSTRUCT LETTERFORMS COMPUTATIONALLY?

Bettina Chou: Computational Type

Computational Type Editors

Kiel D. Mutschelknaus: Space Type Generator

Alexis Reigel & Marco Müller: Metaflop font generator

HOW TO CONTROL THE VARIABLES IN COMPUTATIONAL TYPOGRAPHY AND TYPE DESIGN?

Concrete poetry

Mary Ellen Solt: Forsythia (1966)

Augusto de Campos: Lygia Fingers (1953)

HOW TO ARRANGE TEXT WITH A GENERATIVE PROCESS?

Generative poetry

Oulipo snowball method

Allison Parrish: Compasses (2019)

HOW TO GENERATE SEMANTIC MEANING?

Generative narrative

John Pound: Code Cartooning (1993)

Worldwalker Games (2021) Wildermyth

HOW TO GENERATE SEMANTIC MEANING?

Drawing text

text(str, x, y, [w], [h]);
text("Hello world!", 100, 200);
const myString = "Hello World!"
text(myString, 100, 200);
  • The text function draws rasterised text on the canvas

string of text

coordinates of text box

optional width and height of text box

Styling text

textSize(30); // set text size (px)
textAlign(RIGHT); // set horizontal text align
//use LEFT, RIGHT, CENTER
// second parameter sets vertical text align
// use TOP, BOTTOM, CENTER, or BASELINE
textAlign(CENTER, CENTER);
rectMode(CENTER); //set text box coordinates
//use CORNER, CENTER
textLeading(30); //set line height
textFont("Arial"); // set font
fill(0); //set text colour
stroke(255,0,0); //set text stroke colour
strokeWeight(3);  //set text stroke thickness
textStyle(ITALIC); // set text style (only for system fonts!)
//use NORMAL, ITALIC, BOLD

REMEMBER: STYLING AFFECTS ALL FOLLOWING COMMANDS

More text functions

textAscent(); //returns the ascent height of current font
textDescent(); //returns the descent height of current font
//returns the bounding box of text as a rect object
textBounds(line, x, y, [fontSize], [options]);
//computes an array of points following the path for specified text
textToPoints(txt, x, y, fontSize, [options]);

MORE OF THESE LATER!

Loading fonts

let myFont = loadFont("fontName.filetype");

  • Use loadFont function to use non-system fonts

    • Accepts .otf and .ttf formats

  • Best practice is to load fonts in the preload function

    • Guarantees that the load operation will have completed before setup and draw are called.

  • Different font styles (italic, bold, etc.) have to be loaded separately

Loading fonts

  • Upload the font file in the web editor

Exercise 1: Text

VARIATION: Exercise 2: Stretch Type

VARIATION: Exercise 3:

Stretch Type Loop

//This example combines the simple animation exercise from week 1, better for loop exercise from week 2 and stretch type exercise from week 3.

let num = 30; //number of letters
//variable for animating the scaling
let scaling = 0;
let myFont;

//load the font in preload function and store it to myFont variable

function setup(){
  createCanvas(500,500);
  //set myFont as font
  //center text vertically
  //set font size so that num amount of letters fit to the width of canvas
  fill(0);
}
function draw(){
  background(255,0,0);
  //calculate stepSize (the distance between each letter)
  let stepSize = width/(num-1);
  for(let i=0; i<num; i++){
    //ellipse(i*stepSize,height/2,20);
    //In stead of drawing the ellipse, translate to the coordinates. 
    //Scale the y-axis so that each letter is different height than the previous.
    //Also make the scaling change in each frame.
    //Think of which existing variables you can use to achieve this.
    //Use text() to draw a letter "A" at new origin point.
    //Remember to use push and pop each time loop is repeated!
  } 
  //increase the scaling variable in each frame by 0.1
  //if scaling variable exeeds the number of letters, set scaling back to zero
}

Strings

let name = "Mickey Mouse";
let name = 'Mickey Mouse';
let str = 'That was a so-called "joke"';
let street = "Sesame Street";
let number = 45;
let address = street + number; //"Sesame Street 45"

  • String is a data type that is used to
    store and manipulate text

  • Strings consist of characters

  • Strings are defined with quotes

    • You can use double or single quotes

    • To use quotes inside a string, make sure they don't match with the outer quotes!

  • ​Strings and variables can be joined together

BE CAREFUL WITH QUOTES WHEN COPY-PASTING TEXT!

Strings

  • There are multiple ways to process and modify strings of text eg.

    • Searching or replacing patterns

    • Splitting or joining strings

    • Extracting characters

  • Check out JavaScript String Methods reference

  • The string methods do not modify the string on it’s own but return the modified string!

Strings

let myString = "I love pizza"

//get the length of the string
myString.length //returns 12

// replace pattern (only replaces the first instance!)
myString.replace("love","hate"); // returns “I hate pizza”

// returns the character at given index
myString.charAt(5); // returns "e"

// returns the character code at given index
myString.charCodeAt(5); // returns 101 (unicode for e)

// convert string to uppercase
myString.toUpperCase(); // returns “I LOVE PIZZA”

//char() converts unicode decimal number to its string representation
text(char(65),0,0); //displays letter A

Regular expressions

// MODIFIERS
g //perform a global match (not stopping after the first match)
i //perform case-insensitive matching

//replaces all the letters V with an emoji
str.replace(/V/g,"✌️");
//replaces all lower and uppercase vowels with %
str.replace(/[aeiou]/gi,"%");
//replaces every non-whitespace character with a smiley
str.replace(/[\S]/g,":)");

  • Describes a pattern of characters

  • Can be used with functions that perform a search in a string of text, eg. search(), replace() and match()

  • Syntax: pattern/modifiers/

    • NOTE: NO QUOTATION MARKS!

VARIATION: Exercise 4: Character walk

Exercise 5: Replace text

Recap

text(str, x, y, [w], [h]);
//string, x-coordinate, y-coordinate, width and height of text box
textSize(30); // set text size (px)
textAlign(RIGHT); // set horizontal text align (LEFT, RIGHT, CENTER)
// second parameter sets vertical text align
// use TOP, BOTTOM, CENTER, or BASELINE
textAlign(CENTER, CENTER);
textLeading(30); //space between lines
textFont("Arial"); // set font
fill(0); //set text colour
stroke(255,0,0); //set text stroke colour
strokeWeight(3);  //set text stroke thickness
textStyle(ITALIC); // set text style (only for system fonts!)
//Load assets like fonts inside the preload function
function preload() {
    myFont = loadFont("path/to/font");
}
myString.replace(pattern,replace); // replace pattern
myString.charAt(5); // returns the character at given index
myString.charCodeAt(5); // returns the character code at given index
myString.toUpperCase(); // convert string to uppercase
char(33); //convert uncode number to a character

To do

  • Make something creative using the text function!

    • Share your creation on the week 3 Showcase forum!

  • Weekly Reading III

CC_w3_d1

By eevirutanen

CC_w3_d1

  • 220

More from eevirutanen