Loading…

Level Up: Creative Coding with p5.js - parts 4 and 5

Article hero image

Part 4

In this session, we will make our p5.js sketches interactive! Together with Morgan, we will work on the Generative Art Creator project using the p5.js web editor! We will make a tool to create, control, and combine generative works of art inspired by early media artists, such as John Whitney and Vera Molnar. We will map different visualizations to be triggered by each key on the keyboard.

Here are some Stack Overflow questions related to the work we did in this session:

How to trigger key events in p5.js

How to make something happen when a key is held down in p5.js

How do I hold down a key in p5 instead of just pressing it repeatedly?

How do I save a p5.js canvas as a very large PNG?

If you enjoyed this lesson, you can catch up on the rest of the series on YouTube. If you’d like to watch a session live, follow the Codecademy YouTube channel.

Every Tuesday from now until April 27th, we’ll be streaming a new session at 4PM EST. You can set a reminder for the stream for April 6th here.

Finally, if you want even more Creative Coding with p5.js content, you can sign up for the interactive course this series was based on here. This course was developed by Jiwon and has many more quizzes, projects, and helpful articles that we can’t fit into our streams!

Part 5

In this session, we will learn how to display and manipulate images and videos in our p5.js sketches. Together, we will work on the Interactive Video Sculpture project using the p5.js web editor! We will create a digital video sculpture inspired by the artist Nam Jun Paik. Applying what we learned in our last session, we'll also add mouse interaction to dynamically change the videos displayed in the sculpture.

Here are some Stack Overflow questions related to the work we did in this session:

p5.js Play Video inside canvas

Stretch a video in p5.js?

If you enjoyed this lesson, you can catch up on the rest of the series on YouTube. If you’d like to watch a session live, follow the Codecademy YouTube channel.

Every Tuesday from now until April 27th, we’ll be streaming a new session at 4PM EST. You can set a reminder for the stream for April 13th here.

Finally, if you want even more Creative Coding with p5.js content, you can sign up for the interactive course this series was based on here. This course was developed by Jiwon and has many more quizzes, projects, and helpful articles that we can’t fit into our streams!

Login with your stackoverflow.com account to take part in the discussion.