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

Article hero image

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 talk about what an object is and how it can be applied to create dynamic visualizations with p5.js. By the end of this session, we'll have a Ball class that has its own attributes and methods.

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

JavaScript pattern for multiple constructors

Class keyword in JavaScript

p5js - can't create more than 1 object in draw()

My for loop to create objects isn't working in .js with P5

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 20th 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.