SS.1.03 Processing and p5.js: Maps and other Functions

As part of my efforts to widen my knowledge of code i’m learning Processing and JavaScript from Daniel Schiffman. Today I followed Coding Challenge 01:

This was fun and interesting, but really speedy! This is good though because its pushing me to get better and quicker and more comfortable with typing out the basics quickly and spending more energy on the important stuff.

Here’s my outcome.

The thing I took away from this short challenge was that I was a little behind on maps. I understand how they work but don’t remember that syntax and cannot write one myself. Soo THIS is what i’ll go over next.

Another part which was fairly new ground for me was the idea of multiple tabs within a sketch, and defining and running a function like he did. It seems to be written differently to how I remember writing functions in Codecademy, and I’d like to cover that again so I can completely understand.

OKAY SO. Map Function.

I found another Dan Schiffman tutorial on the Map() function for JavaScript. This is probably more useful for me as i’ll be writing my script in JS anyway. (I don’t really forsee a use for the map function at this point though, who knows). First, though i’ll watch this tutorial on the map function within processing, since its the only time i’ve used one and the syntax may be different for JavaScript.

I understand that, the first letter in the brackets is the property we are looking at, the next two are the max and min values to take from that property and the second two values are the max and min values to assign to the variable (in the example above, that’s x or y). I was able to understand what was going on here because I was also able to correct a mistake in the video. Where he assigned x and y to the position on the box and not mouseX, mouseY.

Right, on to p5.js now.

While Schiffman was explaining the basics of a map() function, I tried my hand at writing one in p5 using what I knew from processing. It didn’t work.


Originally put my map function up at the top before function setup but then I got an error message telling me to put it inside setup. I did but the effect still didn’t work. I thought it was probably a syntax difference between Processing and JS so I followed the rest of the video to see how he did it.

Turns out, that map functions in JavaScript are written the exact same way they are in Processing, I was however supposed to put my map function in the draw not the setup. Now it works!

Next up, Functions. Not the ones written like map() or line() but the ones that require curly brackets, and how to call them. In processing, they begin with ‘void’, and in JavaScript they seem to begin with ‘function’. I do vaguely remember a lesson in functions on Codecademy. So lets revisit that and then try to figure out how this translates to Processing.

The functions i’m working with in this lesson are a little different to the map function since it has steps to complete {inside the curly brackets}. This makes it feel a little more similar to the void functions i’ve seen in Processing, even though the void functions i’ve seen so far all leave the () brackets blank. They don’t seem to have any need for parameters just yet. Maybe that’s because i’ve never had to call these functions yet (except earlier in this post in the starfield challenge).

Calling a function in Javascript feels pretty different to calling one in Processing too. I’m pretty sure that they use . (dot) in the syntax for Processing. Maybe I should try writing the same functions in both, to identify the differences.

Yet again Daniel Schiffman has become super useful as he has a series of videos on Functions within Processing.

Screen Shot 2016-12-18 at 14.51.48.png

In this series, Schiffman introduces functions, explains the make up of them:

returnType name (parameters){block of code}

for instance:
void draw (){}
rect(30,30,50,50); and
int map(mouseX,0,600,0,255);

A quick refresher on return types. Void is used when a return type is not necessary, AND the function in being defined by you. Rect, Map, Line ect are all functions that were defined by Casey and Fry when they developed processing.


Using a made up function as an example – flower(); – he demonstrates how you can store a block of code in a function and use it in elsewhere in your code. The ‘flower’ was actually a red ellipse but after the tutorial, I went ahead and made an element that looked vaguely more like a flower.

Screen Shot 2016-12-18 at 14.39.23.png

This is extremely useful and I can already see where this could be used. Before progressing with this tutorial, I went back to the code from Processing Week 01 to alter the way I organised clouds as a repeating element.


In the next video, Schiffman shows how to call a function in Processing. It’s exactly the same as JavaScript (though this example requires no parameters). I still haven’t found out where the . (dot) comes into this. So I’ll complete the tutorial to find out.


I finished the tutorial and never found out the use for a . (dot) but now I know how to call a function in Processing I can translate the JS function I wrote in Codecademy to make it work in Processing.

I even made an interactive version where the user can input the length and width of the box with mousePressed. To aid understanding, I included visual feedback in the form of a rectangle drawn showing what the user inputted when they clicked the mouse and the calculated perimeter displayed on screen.


Author: Pip Williamson

Pip // Animator & Motion Designer

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s