Evaluating Functions in P5.JS

p5.js Beginners
1

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!

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);
}
2
1 Like
3

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!

4

rect() is expecting four float parameters: 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.

5

Hmm… so this worked for you?

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);
}
6 
function rnum() {
    x = random(100);
}
7

This is what worked for me:

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:

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

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

function rnum() {
  return random(10);
}
1 Like
8

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
function  hypotenuse(a, b){
  return Math.sqrt(a*a + b*b);
}
  1. Given the radius of a sphere calculate its volume
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

// 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.

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.

3 Likes
11

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?

12

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

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.

1 Like