# Individualize functions in P5.js

**URL:** <https://discourse.processing.org/t/individualize-functions-in-p5-js/32051>\
**Category:** Coding Questions\
**Created:** [September 1, 2021, 3:27pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051 "2021-09-01T15:27:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kevincroos](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevincroos/32/13292_2.png) [@Kevincroos](https://discourse.processing.org/u/Kevincroos)\
**Post date:** [September 1, 2021, 3:27pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051/1 "2021-09-01T15:27:42Z")

</div>

> [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hello programmers i have a question about my program, i created a program who draw a ball, add animation to her and a text. I only need call one function to make all it. 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 ☹

I need help to individualize those balls, but i dont know how i start. Can you help me?

```auto
let ballX = 40;
let ballY;
let speed = 5;
function setup() {
  createCanvas(490, 465);
  ballY = random(50, 390);
}
function draw() {
  background(210);
  function drawBall() {
     function displayText() {
       fill('black')
       textSize(25)
       text("A ball is run now", ballX + 25, ballY - 25);
     };
     function form() {
       noStroke()
       fill('red')
       ellipse(ballX, ballY, 50, 50);
     };
    ballX += speed
    if (ballX >= 445) {
      speed = -5;
    };
    if (ballX <= 40) {
          speed = 5;
        };
    displayText()
    form()
  };
    drawBall()
};

```

Thanks by your atencion, i will put screenshots or a video later.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 1, 2021, 3:40pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051/2 "2021-09-01T15:40:20Z")

</div>

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+](https://code.tutsplus.com/stop-nesting-functions-but-not-all-of-them--net-22315t)**
>
> JavaScript is over fifteen years old; nevertheless, the language is still misunderstood by what is perhaps the majority of developers and designers using the language. One of the most powerful,...

> [@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](https://en.wikipedia.org/wiki/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](https://discourse.processing.org/t/problems-with-my-mini-game/21949/2):
>
> Hi, Welcome to the community! slight_smile 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](https://en.wikipedia.org/wiki/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](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript)**
>
> In this article, we've gone through the main tools available in JavaScript for writing object-oriented programs. We haven't covered everything here, but this should be enough to get you started. Our article on Classes is a good place to learn more.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 1, 2021, 3:48pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051/3 "2021-09-01T15:48:12Z")

</div>

> [@Kevincroos](#):
>
> I need help to individualize those balls, but i dont know how i start.

Although written for Processing’s Java Mode these 2 OOP articles can be easily applied to any Processing flavor:

1. [From several variables to arrays - Processing 2.x and 3.x Forum](http://forum.Processing.org/two/discussion/8082/from-several-variables-to-arrays.html)
2. [From several arrays to classes - Processing 2.x and 3.x Forum](http://forum.Processing.org/two/discussion/8081/from-several-arrays-to-classes.html)

This is how we create classes in JS btW:

> **[class - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)**
>
> The class declaration creates a binding of a new class to a given name.

---

<div class="post-metadata">

**Author:** ![Kevincroos](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevincroos/32/13292_2.png) [@Kevincroos](https://discourse.processing.org/u/Kevincroos)\
**Post date:** [September 7, 2021, 3:31pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051/4 "2021-09-07T15:31:54Z")

</div>

Hello again Joseph, thank you i will read these articles. Yours explanations its very good.

---

<div class="post-metadata">

**Author:** ![Kevincroos](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevincroos/32/13292_2.png) [@Kevincroos](https://discourse.processing.org/u/Kevincroos)\
**Post date:** [September 7, 2021, 3:32pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051/5 "2021-09-07T15:32:33Z")

</div>

Hello, thanks by your help too, i will read your articles.

---

<div class="post-metadata">

**Author:** ![Kevincroos](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevincroos/32/13292_2.png) [@Kevincroos](https://discourse.processing.org/u/Kevincroos)\
**Post date:** [September 9, 2021, 2:46pm UTC](https://discourse.processing.org/t/individualize-functions-in-p5-js/32051/6 "2021-09-09T14:46:15Z")

</div>

I was able to solve this problem using the examples written in Java. Thanks a lot