Introduction to p5.js

through contemporary art

Introduction to contemporary art through p5.js?

Follow along at slides.com/amandacheung/
intro-to-p5

Hi, I’m Amanda

User Experience Developer

@acacheung

A bit about me

• Painting

• Graphic design

• Web design

• User experience development

• Ruby on Rails bootcamp

Some of my old paintings

Back to about me

• Painting

• Graphic design

• Web design

• User experience development

• Ruby on Rails bootcamp

What is p5.js?

p5.js is a JavaScript library that starts
with the original goal of Processing,
to make coding accessible for artists, designers, educators, and beginners,
and reinterprets this for today’s web.

Art + Coding

Why p5.js?

• Fantastic community

• Low barrier to entry

• Fun!

How I started learning

Spazio Ad Attivazione Cinetica 6B

Marina Apollonio

Optical-Kinetic

Struttura grafica

Senza Titolo

Dinamica Circolare 5e

ellipse(x,y,w,[h])

Yayoi Kusama

Pop art / Minimalism / 
Feminist art /  Environmental art

Infinity Mirrored Room—The Souls of Millions of Light Years Away

Kusama with Pumpkin

Obliteration Wall

Sol Lewitt

Conceptual Art / Minimalism

Wall Drawing 56

Wall Drawing #1128

Wall Drawing 118

line(x1,y1,x2,y2)

Add to CodePen 
Settings > JavaScript

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js

Read through more complex p5.js Codepens

• Val Head’s Fun with Colorful Particles

• Sunday’s Illusion

• Confetti! 

Resources

• Coding for Visual Learners by Engin Arslan

• p5.js reference

• Introduction to Programming for the Visual Arts with p5.js on Kadenze

Inspiration

• Sasj

• Bees & bombs

• Charlie Deck

Processing
Community Day

• October 21, 2017

• MIT Media Lab in Cambridge, MA

• $20!

Thank you!

@acacheung