code-for-a-living March 23, 2021

Level Up: creative coding with p5.js – part 2

In this session, we will turn our static drawings into animations!

In this session, we will turn our static drawings into animations! We will animate the positions of shapes using the draw() function by incrementing and decrementing values over time.

Together, we will work on the Bouncing Balls project on the Codecademy platform. Using p5.js animation techniques, arrays and for-loops, we will create an animation of circles bouncing around the canvas. We will also look at how to randomize the position, speed, size, and color of each bouncing ball using arrays.

Here are some Stack Overflow questions related to the work we did in today’s session:

Conditional statement not activated for bouncing ball in p5.js

P5 – bouncing ball from left to right and back

Using the random() function 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 March 23rd 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 17, 2021

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

During our second session, we learned how to transform arrays into Bouncing Balls. In this session, we will take the principles of loops and arrays we used to create 100 ellipses bouncing around the canvas and learn how to adapt them to fit within in an object-oriented approach. We will start from the basics and…
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…
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…