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…

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 of a sound file. We also talk about how to analyze sound with Fast Fourier Transform (FFT) and we can use the amplitude values along the frequency spectrum to create an audio visualization.

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

How to get frequency value in JavaScript?

Creating a Sound Wave using P5.js

( p5.js ) FFT report lower frequencies “too loud” and higher frequencies “mute”?

If you enjoyed this lesson, you can catch up on the rest of the series on YouTube.

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