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?

Demos

Your turn!

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!

What is p5.js?

Demos

Your turn!

Marina Apollonio

Optical-Kinetic

Struttura grafica

Senza Titolo

Dinamica Circolare 5e

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

Yayoi Kusama

Pop art / Minimalism / 
F
eminist art /  Environmental art

Sol Lewitt

Conceptual Art / Minimalism

Wall Drawing 118

line(x1,y1,x2,y2)

What is p5.js?

Demos

Your turn!

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

What is p5.js?

Demos

Your turn!

Processing
Community Day

  • October 21, 2017
  • MIT Media Lab in Cambridge, MA

  • $20!

Thank you!

@acacheung

Introduction to p5.js

By Amanda Cheung

Introduction to p5.js

CodePen Boston September Meetup

  • 1,022
Loading comments...

More from Amanda Cheung