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.…
Avatar for
Content Marketer

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 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…
Avatar for
Content Marketer
The Overflow Newsletter Banner
newsletter May 21, 2021

The Overflow #74: Behind the scenes at SpaceX

Welcome to ISSUE #74 of the Overflow! This newsletter is by developers, for developers, written and curated by the Stack Overflow team and Cassidy Williams at Netlify. This week: So long to a podcast co-host, it’s a good year to go to Mars, and neural networks doing the important work of making video games more realistic. From the…
Avatar for Ryan Donovan
Content Marketer
code-for-a-living June 12, 2021

Level Up: Linear Regression in Python – Part 4

In the fourth lesson of the series, we’ll talk about the matrix representation of the linear regression problem. In the process, we’ll discuss the basics of matrix multiplication. We’ll also see how this mathematical understanding can prepare us to make sense of error messages that we might encounter when fitting a model in Python. Here…
Avatar for
Content Marketer
Level up: SwiftUI quiz
code-for-a-living September 4, 2021

Level Up: Build a Quiz App with SwiftUI – Part 4

In the fourth and final lesson of the series, we’ll learn how to use SwiftUI navigation to present different views to the user. We’ll build a welcome screen with instructions for the user as well as a final screen with their results to the quiz. A user will also have the option to re-take the…
Avatar for
Content Marketer