A p5.js cheat sheet for beginners!

That took a bit of time but here is a version I’m fairly happy with: https://p5-cheat-sheet.surge.sh/

Besides being a web page, it can also be printed directly from the browser print dialog (fully tested with both Chrome and Firefox, and should work in both landscape and portrait although landscape should look better).

I haven’t tried seeing what translating it would look like but I hope it doesn’t mess up the layout too much. That’s to come.

The source code is here: https://github.com/limzykenneth/p5-cheat-sheet-html

@bmoren I’ll open an issue on github regarding how you would like me to contribute the source files back to your repo.

5 Likes

Hi Kenneth,

I sent a reply on github as well, but I’ve been so bust this has fallen back a bit, but I’m ready to pick back up, if you’d like to make a PR against the original repo, or if you want to transfer ownership of your or something along those likes I can get working.

a few things I’d like to do:

  • fix the desktop layout to better reflect the original sheet. (a single view)
  • add PDF versions for download (save to pdf from the print dialog)
  • unify the p5.js code so that all of the langs use one code and the lang objects are independent and are housed inside the respective HTML (so that everything is as unified as possible)
  • host on github pages (so it’s updates as quickly as possible)
  • get a domain name, for easy access!
1 Like

Introducing the new web based p5js cheat sheet!
Thank you very much to everyone involved, especially @limzykenneth for getting things off the ground! It’s now much easier to make translations and it can be printed or exported to PDF!

https://bmoren.github.io/p5js-cheat-sheet/

00%20PM

PDF versions are still available in the repository and at the links above. We’d love your help in making a translation, it’s as easy as ever, either send over edits as text or make a pull request against the repository

5 Likes

and will there be a link from the online editor to it? or from reference?

.p.s.
right bottom is a little space left, enough for FOR?

for ( let i = 0 ; i < limit; i++ ) { }

I don’t know about adding it to the editor or the reference, I’m sure you could open issues on the respective repositories to get that discussion going. Personally I’m interested in this as a printed resource for workshop settings, but I can see the merit of it being included elsewhere, but ultimately it’s not up to me to decide where it goes!

As for the for loop; there is loads of space now that its a website! But, the loop is not excluded due to a lack of space – it’s excluded due to the philosophy of the cheat sheet. This resource meant for absolute beginners, and loops are not a beginner topic (think about someone’s first day of writing code, that’s the target audience in mind). I do have ideas about how an intermediate sheet could be added into the mix and a for loop would be an excellent candidate for that level. Ideally it would be printed 2 sided with intermediate on one side and beginner on the other. Please join the conversation with your ideas over on the github repository: https://github.com/bmoren/p5js-cheat-sheet/issues/2

2 Likes

Well, for… loops were one of the first things I learned when I was a 12-years-old kid learning BASIC.
Also, repeat[] is one of the few logo promitives I know.

2 Likes

Hello Ben,

thank you for the P5 cheat sheet. I translated it to Slovak language now.

https://inspiro.club/p5/cheat-sheet/docs/sk.html

M

1 Like

amazing!
Are you familiar with git / github at all? if so, and you’d like to contribute via git, please check out the instructions here:

otherwise, I’m more than happy to pull your wonderful translation over and include it in the main site if that’s alright with you!