Individualize functions in P5.js

[josephh]

Hi @Kevincroos,

First of all one thing about your code:

You shouldn’t put the drawBall() function (and others) inside the draw() function because it’s not optimized and it’s not needed in the current configuration since the function will always be the same. As stated in the following website:

Unlike other types of values, functions typically don’t change; a function is created to perform a specific task. So it doesn’t make much sense to waste CPU cycles recreating a somewhat static value over and over again.

Stop Nesting Functions! (But Not All of Them) | Envato Tuts+

@Kevincroos

But now, i need individualize those balls, i have an random variable to display the ball in random locations, but calling two or more balls then do not appears in diferents locations, its the same place of the first ball

Aah! this is exactly the purpose of Object-oriented programming: being able to represent your data as units of data (called objects).

Check a previous thread I did on the subject (with balls but in Java, it shouldn’t be too hard to do it in JS):

Problems with my mini game

Hi, Welcome to the community! Before trying to solve your problem, you are facing a well known problem where the structure of your code is actually describing object oriented programming : So object oriented programming is a way to structure your code by using objects to model the data that your are manipulating. In this special case, your are creating Balls, and a Ball is described as : a position (x and y coordinates on the screen) a speed (described as a vector, xDir and y…

Also see MDN’s documentation on the subject:

Classes in JavaScript - Learn web development | MDN