6.1: Introduction to Object-Oriented Programming with ES6 - p5.js Tutorial

The Coding Train · 107K views · 2017 · 1:58

Open on YouTube

Creative coding & generative artPython, Ruby & scripting languagesEducation & learningtutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering p5.js and Processing questions where the asker should restructure code around objects or classes and needs a gentle OOP starting point.

Recommended by 3 people across 3 different months, 2018 to 2021.

What it is

A short introduction from The Coding Train to a series on object-oriented programming in JavaScript, using ES6 classes with the p5.js library. It is the opening video of the series and sets up the topic before the following videos build objects and classes in code.

What people said

Recommends cdrom · 2018-05 · Stack Overflow · on “Change color of sequential ellipse in a loop”

In your code there is only one monster . This is an object with attributes ( x position, y position, color ,... ) What you need is an array of monsters . In setup , instead of doing monster = { x: 0, y: 20, size: 30, spacing: 50, speed: 1, color: color(75, 198, 98), message: "Moving", }; you should do something like monsters = [] spacing = 50 for(var i=0; i < 8; i++) { monsters[i] = { // each positions will be different x: spacing * i, y: 20, size: 30, speed: 1, // each colors will be different color: color(random(255), random(255), random(255)), message: "Moving", }; } now you have yours differents monsters and in draw you do what you was doing for your monster object for each monster in yo

Recommends Kartik Soneji · 2019-03 · Stack Overflow · on “How could I achieve the effect of "lava" leaving traces”

Your game is quite well made, but I have a few suggestions: Please, please don't use prototypes to add functions to Objects. It makes is very difficult for someone not familiar with the code to follow. A better way is to put all the member functions in the same object, so they are grouped together. It makes the code (in my opinion) way easier to read and understand. For example: function Flood(pos, ch){ this.pos = pos; //other assignments this.act = function(){ //code } //other functions } Keeping all your functions in one class also makes it easier to find a function rather than hunting through the whole file to find it. Even though most of the game is already written, it might be worthwhil

Recommends KamielDev · 2021-10 · Stack Overflow · on “in Processing, how to hover over mouse to make numbers of rectangles change color?”

Use inheritence. As in YOUSFI's answer, your nest net would be to build a rectangle class and write it's own mouse over function in there. Then, you can make an instance of that object in your main program and call it's mouseover function. Instead of blindly copy pasting the code YOUSFI provided, my suggestion would be to read up on Object Oriented Programming or watch this introductory video series: [this video]