Lessons: 9Length: 48 minutes
- Overview
- Transcript
1.1 What Is p5.js?
Welcome to How to Program Interactive Art With p5.js. This course will teach you how to create interesting pieces of art in the browser using the p5.js library. To start, I’ll tell you about the p5.js library and its origins in the Processing language. I’ll also give you a little tour of the interactive animation that you’ll be creating.
Related Links
1.Introduction
1.1What Is p5.js?01:34
1.2Your First Sketch03:42
2.Drawing and Animation
2.1Setup and the Draw Loop06:39
2.2Draw a Bubble07:06
2.3Make That Bubble Move08:48
2.4Bubbles Everywhere07:00
3.User Interaction
3.1Listening for User Input05:09
3.2Text and Transparency06:10
4.Conclusion
4.1Summary01:35
1.1 What Is p5.js?
Hello, and welcome to Interactive Art with p5.Js, a tuts+ tutorial with me, Stuart Memo. In this course we'll be learning the p5, the client side library for creating interactive graphics and artwork in the browser. You'll learn the fundamental structure of a p5 project, or sketch, as they're known in p5 land. Learn how to draw and handle user inputs. And as we go along we'll be building up an instracted piece of art in the browser. The p5.Js is heavily inspired by the program language processing, which reversed itself as a flexible software sketchbook. Processing was created in 2001 with the purpose of teaching non-programmers how to code. But since then, it has become the language of choice for tens of thousands of artists, designers, and students to create artistic works and prototypes. P5.Js, however, is different. p5 brings processing to the browser, and with that it uses JavaScript. Don't worry if you don't have much experience with JavaScript, as the code we're writing will hopefully be clear enough for you to understand what's going on. Speaking of which, when you're watching this course, you can either follow along with what I write on screen, pausing the video to write the commands as I do, or you can sit back and take in what's going on and download the code from GitHub afterwards. Okay got the picture? Good, let's get started.
