code-for-a-living April 13, 2021

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

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.…

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!

Tags: , , ,
Podcast logo The Stack Overflow Podcast is a weekly conversation about working in software development, learning to code, and the art and culture of computer programming.

Related

series of stacked circles
code-for-a-living April 27, 2021

Level Up: Creative Coding with p5.js – part 7

Machine learning might sound complicated, but with the help of p5.js, we can make interactive visualizations to help wrap our head around these algorithms. In this session, we make a visualization of the popular K-Nearest Neighbor algorithm. Join us as we discuss how this algorithm can be applied to real data and track down bugs…
series of stacked circles
code-for-a-living May 8, 2021

Level Up: Creative Coding with p5.js – part 8

In our last session, we will learn how to create audio visualizations with the p5.sound.js library. We will start by learning how to upload and play a sound file in the p5.js web editor. We will first talk about what amplitude is and how we can program a p5.js sketch to react to the amplitude…