Creative Making: Design and Coding Visuals

Instructor: Irene Fubara-Manuel
Week 1

TODO

  • Introductions to each other and the course
  • A cursory history of new media art
  • Introduce p5.js and Lauren McCarthy
  • Principles of design in ‘sketching with code’
  • Workshop introducing p5
  • Assignment and next week’s class

Introductions

  • Name & pronouns?
  • Have you coded before?
  • What are your interests in coding?

Syllabus Overview

  • Module Outline
  • Contact Hours
  • Brief + Assessment
  • Assigning weeks for presentations
  • Class format
  • Dates (TBA)

Rules of Engagement

How can we make/keep this environment
safe and productive for everyone?

projects that make use of emerging media technologies and are concerned with the cultural, political, and aesthetic possibilities of these tools.
— Jana and Tribe (2006, p.6)

New Media is

  • Digital art
  • Electronic Art
  • Video Art
  • Net Art
  • Game Art
  • Performance Art…
The Dada Art Movement - Kinectic Art
Rotary Glass Plates (Precision Optics), Marcel Duchamp (1920)
The Dada Art Movement - Kinectic Art
Rotorelief No. 3 – Lanterne Chinoise – Modèle Déposé,
Marcel Duchamp (1935)
The Bahaus Design Movement - Kinectic Art
Light Space Modulator, László Moholy-Nagy (1930)
The Bahaus Design Movement - Kinectic Art
Kinectic Sculpture, László Moholy-Nagy (1933)
Early Computer-Generated Art
Sine Curve Man, Charles Csuri (1967)
Early Computer-Generated Art
A la Recherche de Paul Klee (Searching for Paul Klee) (detail).,
Vera Molnar (1971)
Early Computer-Generated Art
Vera Molnar’s plotter with a pen attached
Still from Pixillation, Lillian Schwartz, (1971)
Computer-Aided Design/Drawing on Computers
Sketchpad, Ivan Sutherland (1963)
Computer-Aided Design & Home Computers
Andy Warhol (1985) painted Debbie Harry with
Propaint software on the Commodore Amiga 1000
Computer-Aided Design & Home Computers
Adobe Illustrator (1987) & PhotoShop (1990)

New Media Art as a movement

  • A response to the information technology revolution (Jana & Tribe, 2006)
Blackness for Sale, Mendi and Keith Obadike (2001)
rent-a-negro, Damali Ayo (2003)

p5.js Accessibility in Coding

Magnetic Field, Emily Xie, 2018
A sketch by Sarah Groff-Palermo, p5.js contributor
Geometric Animations, Saskia Freeke, p5.js contributor
p5.js by Lauren McCarthy (2013)

Principles of Design

with p5.js

Framing

createCanvas(x, y);

Grids

Point, Line, Plane

Making shapes p5.js reference

Color and Transparency

Color Theory in Design
Color in p5

Layers

function draw() {
     fill('tomato');
     rect(150, 150, 100, 100);
     fill('seagreen');
     rect(150, 150, 50, 50);
}

Make a hand-drawn self portrait using basic shapes
and create a p5 sketch using what we have just learned

Prepare…

for next week’s class

  • Complete assignments on self-portraits and readings
  • Come prepared to talk about the readings