Introduction to p5.js
through contemporary art
Introduction to contemporary art through p5.js?
Follow along at slides.com/amandacheung/
intro-to-p5
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!
Optical-Kinetic
Struttura grafica
Senza Titolo
ellipse(x,y,w,[h])
Pop art / Minimalism /
Feminist art / Environmental art
Conceptual Art / Minimalism
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!
Resources
- Coding for Visual Learners by Engin Arslan
-
Introduction to Programming for the Visual Arts with p5.js on Kadenze
Inspiration
Processing
Community Day
- October 21, 2017
-
MIT Media Lab in Cambridge, MA
-
$20!
Thank you!
@acacheung