# Evaluating Functions in P5.JS

**URL:** <https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693>\
**Category:** Beginners\
**Created:** [September 3, 2023, 12:10am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693 "2023-09-03T00:10:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)\
**Post date:** [September 3, 2023, 12:10am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/1 "2023-09-03T00:10:43Z")

</div>

Hi there -

I’m new here. I think I’m in the right place!

I am trying to create a mathematical function in a P5.JS to return a number. I’ve simplified the code here, so that the function is simply a random number generator that is called back inside of a draw() function, with the idea of making the rectangle move continuously.

Is what I’m trying to do possible or am I misunderstanding something about Processing? Also, is there a way to read the “print” command in the Procesing IDE? It seems like it is necessary to find a way to open a console on the display webpage, which I am finding confusing.

Thanks!

```auto
function setup() {
createCanvas(720, 400);
background(0);
}

function draw() {
  fill(100, 90, 20);
  rect(rnum(), rnum(), 63, 63);
}

function rnum() {
let x = random(10);
x;
print(x);
}

```

---

<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 3, 2023, 12:19am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/2 "2023-09-03T00:19:59Z")

</div>

- [Linear](https://p5js.org/examples/motion-linear.html)
- [Animation](https://p5js.org/examples/hello-p5-animation.html)
- [Bounce](https://p5js.org/examples/motion-bounce.html)

---

<div class="post-metadata">

**Author:** ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)\
**Post date:** [September 3, 2023, 12:39am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/3 "2023-09-03T00:39:53Z")

</div>

Hi there, @GoToLoop -  
Yes, I understand that I can animate motion within the main draw function. I am curious about using an additional function to do more complex math processing and to see if it can return a number.  
Thanks!

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 3, 2023, 12:52am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/4 "2023-09-03T00:52:08Z")

</div>

rect() is expecting four float parameters: [https://processing.org/reference/rect\_.html](https://processing.org/reference/rect_.html)

In order to get your code to run, I had to define x at the top like this:

> let x;

Then call rnum() separately in draw(), before calling rect like this:

> rnum();  
> rect(x, x, 63, 63);

It does not work to substitute rnum() function calls in lieu of x, y float parameters.

Unfortunately, it looks like you will have to open the console for java script from the Develop menu for each run in the Processing editor if you want to see the output. This is not the case if you use p5.js Web Editor.

---

<div class="post-metadata">

**Author:** ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)\
**Post date:** [September 3, 2023, 1:17am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/5 "2023-09-03T01:17:26Z")

</div>

Hmm… so this worked for you?

```auto
let x;

function setup() {
createCanvas(720, 400);
background(0);
}

function draw() {
  rnum();
  fill(100, 90, 20);
  rect(x, x, 63, 63);
}

function rnum() {
let x = random(100);
}

```

---

<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 3, 2023, 1:29am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/6 "2023-09-03T01:29:12Z")

</div>

> [@looplider](#):
>
> ```auto
> function rnum() {
> let x = random(100);
> }
> 
> ```

```auto
function rnum() {
    x = random(100);
}

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 3, 2023, 2:12am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/7 "2023-09-03T02:12:43Z")

</div>

This is what worked for me:

```auto
let x;

function setup() {
  createCanvas(720, 400);
  background(0);
}

function draw() {
  fill(100, 90, 20);
  rnum();
  rect(x, x, 63, 63);
}

function rnum() {
  x = random(10);
  print(x);
}

```

If you have the function rnum() return a random number you can then substitute the function into rect() directly:

> function rnum(){  
> return random(10);  
> }

Better solution:

```auto
function setup() {
  createCanvas(720, 400);
  background(0);
}

function draw() {
  fill(100, 90, 20);
  rect(rnum(), rnum(), 63, 63);
}

function rnum() {
  return random(10);
}

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [September 3, 2023, 11:13am UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/8 "2023-09-03T11:13:31Z")

</div>

Think of a function that can accept values, use them to perform some calculation return the result of the calculation. Here are some examples

1. Given two sides of a right angle triangle calculate the hypotenuse

```auto
function hypotenuse(a, b){
  return Math.sqrt(a*a + b*b);
}

```

1. Given the radius of a sphere calculate its volume

```auto
function sphereVolume(radius){
  return 4 * Math.PI * radius * radius * radius / 3;
}

```

The returned values can be used directly or store in variables for later use

```auto
// After this statement is executed h = 5
let h = hypotenuse(3,4); 

// Volume of a sphere of radius 10
let v = sphereVolume(10);

```

For more complicated calculation your function might need local variables to hold intermediate values. These should be defined inside the function using `let`

Although the following code works it is really, really, really bad practice.

```auto
let x;

function rnum() {
    x = random(100);
}

```

Any code inside a function should _ **not** _ change or set the value stored in a global variable, it defeats the whole purpose of using functions !

To view the output from `print` and `println` in a web browser requires you to open the browser console. The way to do this depends on the browser, in Firefox right-click on the webpage and select ‘Inspect’ and in opened pane click on the ‘Console’ tab; you will probably have to refresh the webpage as well.

---

<div class="post-metadata">

**Author:** ![looplider](https://avatars.discourse-cdn.com/v4/letter/l/9fc29f/32.png) [@looplider](https://discourse.processing.org/u/looplider)\
**Post date:** [September 9, 2023, 3:44pm UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/11 "2023-09-09T15:44:20Z")

</div>

Thanks for this great response…  
I only had one quick follow-up question about the console window.  
If I’m using the Processing computer app, instead of the web editor, is there any way to use the console for debugging there?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [September 9, 2023, 3:51pm UTC](https://discourse.processing.org/t/evaluating-functions-in-p5-js/42693/12 "2023-09-09T15:51:22Z")

</div>

> [@looplider](#):
>
> If I’m using the Processing computer app, instead of the web editor, is there any way to use the console for debugging there?

I don’t think so, but someone else might know different 😃

AFAIK Processing is only responsible for launching the browser and supplying the source code. The p5.js source code is executed _in the browser_ so log and error messages are sent to the browser console window.