# A p5.js cheat sheet for beginners!

**URL:** <https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236>\
**Category:** Teaching\
**Created:** [February 9, 2019, 5:13am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236 "2019-02-09T05:13:33Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [February 9, 2019, 5:13am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/1 "2019-02-09T05:13:33Z")

</div>

I’ve made a cheat sheet for beginners for my workshop at PCD @ Minneapolis tomorrow. I figured some folks here might like to see it / use it too!

[Download PDF here!](https://github.com/bmoren/p5js-cheat-sheet/raw/master/p5cheatsheet.pdf)

 ![p5cheatsheet](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b58e64b98b15abad32f91eb652e441f27c7eeca9.png)

> **[bmoren/p5js-cheat-sheet](https://github.com/bmoren/p5js-cheat-sheet/tree/master)**
>
> a p5js cheat sheet for beginners! Contribute to bmoren/p5js-cheat-sheet development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 9, 2019, 6:28am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/2 "2019-02-09T06:28:48Z")

</div>

nice, but could you squeeze in the

```auto
for ( int i = start; i < stop; i++ ) {statements}

```

and possibly on the grid system picture  
indicate the

> width  
> height

and for the  
if then also the

```auto
if ( true ) { } 
else { }

```

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [February 9, 2019, 7:53am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/3 "2019-02-09T07:53:51Z")

</div>

Looks great! I might take a few of these to PCD@Denver tomorrow. Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [February 9, 2019, 1:45pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/4 "2019-02-09T13:45:53Z")

</div>

I’m not going to squeeze in a for loop, this is intended for a day 1 beginners workshop, it’s not meant to be comprehensive. At some point I’d like to add an intermediate sheet that could be printed on the back side and that would absolutely include a for loop example. Feel free to modify, the indesign files are on the github repo.

I do want to also add that this is a simplified and redesigned version of Ryo Sakai’s original more expansive cheat sheet which can be found here (this has a forloop): [https://twitter.com/ryodejaneiro/status/827314983948210176?lang=en](https://twitter.com/ryodejaneiro/status/827314983948210176?lang=en)

else is tricky since I’d need to really make a more complex diagram, but it could be added without the diagram, I’ll think about it, again, feel free to mod in the short term.

The height and width is a good idea for day-1 beginners.

I wont be able to modify anything until next week, so if you need the changes you’d like sooner, you’ll have to boot up indesign and have a go at it!

thanks for the suggestions~

b.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 9, 2019, 2:16pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/5 "2019-02-09T14:16:49Z")

</div>

actually it would be good if it would be a intro page for the  
[https://p5js.org/reference/](https://p5js.org/reference/)  
or a online editor menu point under [help and feedback] like the shortcuts…  
or add it

> **[processing/p5.js](https://github.com/processing/p5.js/wiki/p5.js-overview)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

so possibly open a issue at

> **[processing/p5.js](https://github.com/processing/p5.js/issues)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

  
as a improvement.  
( but also read  

> <https://github.com/processing/p5.js/issues/1036>

  
even it is not same style )

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [March 3, 2019, 3:59pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/6 "2019-03-03T15:59:57Z")

</div>

There is now a French Translation and I’m seeking more translations for the beginner sheet! Specifically looking for Spanish and Chinese, but all translations welcome!

[Get the PDF](https://github.com/bmoren/p5js-cheat-sheet/blob/master/p5cheatsheet-FR.pdf)

 ![p5cheatsheet-FR](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0f431a0b0681cffec23155eb3ebe39633e1bbb05.png)

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [July 31, 2019, 2:21am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/7 "2019-07-31T02:21:04Z")

</div>

There is now a Japanese translation of the cheat sheet thanks to Takawo Shunsuke!

[Get the PDF](https://github.com/bmoren/p5js-cheat-sheet/raw/master/p5cheatsheet-JA.pdf)

[![](https://raw.githubusercontent.com/bmoren/p5js-cheat-sheet/master/png/p5cheatsheet-JA.png) ](https://raw.githubusercontent.com/bmoren/p5js-cheat-sheet/master/png/p5cheatsheet-JA.png)

I’m still looking for assistance in translations to  
[Spanish](https://github.com/bmoren/p5js-cheat-sheet/issues/6)  
[Chinese](https://github.com/bmoren/p5js-cheat-sheet/issues/7)  
[Hindi](https://github.com/bmoren/p5js-cheat-sheet/issues/8)  
[Arabic](https://github.com/bmoren/p5js-cheat-sheet/issues/9)  
[Russian](https://github.com/bmoren/p5js-cheat-sheet/issues/11)  
[Portuguese](https://github.com/bmoren/p5js-cheat-sheet/issues/10)

(or really any other languages! – but these ones are high priority for p5.js users!)

I’m also likely going to be making the intermediate cheat sheet soon, so please [give some feedback and ideas in the github repo](https://github.com/bmoren/p5js-cheat-sheet/issues/2)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [July 31, 2019, 5:29am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/8 "2019-07-31T05:29:03Z")

</div>

please take a look at that processing versions too

> [@Documentación en español](https://discourse.processing.org/t/documentacion-en-espanol/13012/3):
>
> See [https://forum.processing.org/two/discussion/27987/spanish-cheatsheet-for-processing](https://forum.processing.org/two/discussion/27987/spanish-cheatsheet-for-processing) See [https://github.com/acdean/Processing-Cheat-Sheet](https://github.com/acdean/Processing-Cheat-Sheet)

just to get more ideas

* * *

also a PDF file has advantages ( offline )  
how about a multi language HTML ( website ) version

---

<div class="post-metadata">

**Author:** ![philipplehmann](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/philipplehmann/32/4111_2.png) [@philipplehmann](https://discourse.processing.org/u/philipplehmann)\
**Post date:** [July 31, 2019, 11:18am UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/9 "2019-07-31T11:18:02Z")

</div>

I could add a german version.

Are the comments saved here? [https://www.dropbox.com/s/w5dxxozxnsazjjn/p5cheatsheet-de.pdf?dl=0](https://www.dropbox.com/s/w5dxxozxnsazjjn/p5cheatsheet-de.pdf?dl=0)

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [July 31, 2019, 1:43pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/10 "2019-07-31T13:43:28Z")

</div>

This looks great, thanks for this work. I’ll get a preliminary sheet together and private message you for a review/confirmation that I got everything in the correct places.

Thanks!

---

<div class="post-metadata">

**Author:** ![kirkjerk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kirkjerk/32/2107_2.png) [@kirkjerk](https://discourse.processing.org/u/kirkjerk)\
**Post date:** [August 7, 2019, 10:09pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/11 "2019-08-07T22:09:11Z")

</div>

That is great!  
Not knowing of this PDF, I decide to make a (ultimately rather similar) blog entry page - [http://kirkdev.blogspot.com/2019/08/p5-reference-good-parts-edition.html](http://kirkdev.blogspot.com/2019/08/p5-reference-good-parts-edition.html) - just covering that subset of the (possibly overwhelming) p5.js official reference that I’ve found most useful over the past 15 years… your approach is probably better in most ways tho 😃

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [August 7, 2019, 11:49pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/12 "2019-08-07T23:49:16Z")

</div>

Hey this post is great! a good extended supplement to the beginners cheatsheet!

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [August 16, 2019, 1:33pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/13 "2019-08-16T13:33:02Z")

</div>

There is now a German translation of the beginner cheat sheet! Thanks to @philipplehmann for the translation work!

[Get the PDF](https://github.com/bmoren/p5js-cheat-sheet/raw/master/p5cheatsheet-DE.pdf)

[![](https://raw.githubusercontent.com/bmoren/p5js-cheat-sheet/master/png/p5cheatsheet-DE.png) ](https://raw.githubusercontent.com/bmoren/p5js-cheat-sheet/master/png/p5cheatsheet-DE.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [August 16, 2019, 1:42pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/14 "2019-08-16T13:42:14Z")

</div>

-a- german version:  
noStroke()

delete “schlaganfall” use “umrandung”

-b- all versions:  
fill(color)  
change “set the fill color” to “set the fill or text color”

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [August 16, 2019, 1:49pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/15 "2019-08-16T13:49:06Z")

</div>

whoops! uploaded an old version, fixed now!

---

<div class="post-metadata">

**Author:** ![limzykenneth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/limzykenneth/32/1449_2.png) [@limzykenneth](https://discourse.processing.org/u/limzykenneth)\
**Post date:** [August 16, 2019, 3:35pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/16 "2019-08-16T15:35:34Z")

</div>

Hey @bmoren, I’m currently at p5.js contributor’s conference and as part of the p5.js Global track, we are interested in further exploring the possibilities of the cheat sheet.

One specific idea we have is to convert the cheat sheet from an inDesign document into a p5.js sketch that can be generated and translated even from the web editor itself. One of the main reason to do this is to remove the requirements of needing inDesign to do a translation and also as a way to be able to distribute the template in more diverse way.

Do you have any thoughts on this? I’m only just starting to look at the possibilities around this but I look forward to hearing your opinion.

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [August 16, 2019, 3:52pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/17 "2019-08-16T15:52:21Z")

</div>

That sounds like a really great idea. I love the idea of getting rid of the dependency on inDesign, and it shouldn’t be too difficult to re-make the sheet using p5. I’m all for it.

I’m glad this is coming up at the contributors conference. Bummed to miss it. it seems like these things always get planned to close to the start of the semester for me to attend. I hope it’s going well!

---

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [August 16, 2019, 5:12pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/18 "2019-08-16T17:12:57Z")

</div>

after thinking about this for a second, it seems that one downside to the sketch (I think the positives outweigh this) is that it would not be plain text on export since p5 cannot export a pdf or svg. It would have to exist as a jpg/png only which could be a determent to screen readers or folks who want to highlight the text. From a printed sheet standpoint, this is a non-issue and it’s typically how I use this sheet in my classes.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 16, 2019, 6:00pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/19 "2019-08-16T18:00:40Z")

</div>

Could the text be p5.dom text elements, and then printing happen via browser? Browsers can export to pdf, and layout could be managed via CSS.

---

<div class="post-metadata">

**Author:** ![limzykenneth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/limzykenneth/32/1449_2.png) [@limzykenneth](https://discourse.processing.org/u/limzykenneth)\
**Post date:** [August 16, 2019, 6:25pm UTC](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236/20 "2019-08-16T18:25:49Z")

</div>

Yes, we’re also thinking about the accessibility side of it and decided that as a HTML canvas sketch it would not meet several of our requirements (screen reader accessibility being the biggest one). I’m also thinking of making it more of a regular HTML based website and also rethinking the layout. A layout of three columns currently is very defaulted to the printed page but it isn’t very intuitive as a web page.

One thing I’m considering is to build this web page cheat sheet first as an accessible web based thing then making sure there is functionality to export it as an image and also to print it out to one piece of paper easily.

[Next page](https://discourse.processing.org/t/a-p5-js-cheat-sheet-for-beginners/8236.md?page=2)