# Existing p5.js code I should learn from?

**URL:** https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941
**Category:** Teaching
**Created:** [February 19, 2024, 12:50am UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941 "2024-02-19T00:50:08Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![bodomo](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bodomo](https://discourse.processing.org/u/bodomo)
#### Post date: [February 19, 2024, 12:50am UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/1 "2024-02-19T00:50:08Z")

</div>

Hello, I just went through “Getting started with p5.js”, an excellent resource. Although I found it very easy to understand (I have extensive experience programming in other languages, not so much in JS), I’m aware of the fact that I know next to nothing about idioms, tried-and-true ways of doing things, and advanced topics.

Which code would you recommend I understand to improve my knowledge? There’s much out there, but much of that is not an example to follow, having been written by programmers who were young and/or new to programming… and just cared about making it work no matter how.

I’d really appreciate advice from whomever can point me in the direction of codebases I should be going through.

Much obliged,  
–bodomo

---

<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: [February 19, 2024, 4:42am UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/2 "2024-02-19T04:42:09Z")

</div>

> [@bodomo](#):
>
> (I have extensive experience programming in other languages, not so much in JS),

So, which 1s do you already know?

> [@bodomo](#):
>
> Which code would you recommend I understand to improve my knowledge?

Maybe this “Ramer–Douglas–Peucker Algorithm” sketch from this topic below which I’ve converted to many versions in different Processing language flavors, including Java Mode, p5js, Python Mode and recently PyScript + p5js:

> [@Reducing points in polygon](https://discourse.processing.org/t/reducing-points-in-polygon/13590):
>
> I’ve been working with this example code over on the old forum, which reduces the number of points in a polygon using the [Ramer-Douglas-Peucker algorithm](https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm). It works great for my purposes, but for one weird thing: it creates duplicates of all the points frowning Here’s my demo code; simplification functions below with a few notes: int numPoints = 12; // reduce to this many points float[][] pointsArray = { { 1687, 1667 }, { 1684, 1708 }, { 1663, 1948 }, { 1662, 1955 }, { 1642, 2030 }, {…

This is my most recent post there, w/ links to both PyScript & p5js versions:

> [@Reducing points in polygon](https://discourse.processing.org/t/reducing-points-in-polygon/13590/7):
>
> For an additional completeness’ sake, here’s the [PyScript](https://pyscript.net) + p5\*js version: snake[https://PyScript.com/@gotoloop/ramer-douglas-peucker](https://PyScript.com/@gotoloop/ramer-douglas-peucker)[https://GoToloop.PyScriptApps.com/ramer-douglas-peucker](https://GoToloop.PyScriptApps.com/ramer-douglas-peucker)[https://GoToloop.PyScriptApps.com/ramer-douglas-peucker/latest/js.html](https://GoToloop.PyScriptApps.com/ramer-douglas-peucker/latest/js.html)

---

<div class="post-metadata">

### Author: ![bodomo](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bodomo](https://discourse.processing.org/u/bodomo)
#### Post date: [February 19, 2024, 7:00pm UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/3 "2024-02-19T19:00:59Z")

</div>

> [@GoToLoop](#):
>
> > [@bodomo](#):
> >
> > (I have extensive experience programming in other languages, not so much in JS),
> 
> So, which 1s do you already know?

It’s a long and pointless enumeration, but given that you ask… C, Pascal, Prolog, Standard ML, Scheme, Snap!, Basic, Python, Java (medium fluency, def not a professional developer), and several more for toy projects.

Thanks for suggesting that implementation of Ramer-Douglas-Peucker. I’d seen that alg applied to time series.

In any case, my original post was more about finding a body of code I could go through. For some languages, understanding the sources to their standard library is good practice; for others, there’s some book or writeup with good code, and so on. I don’t know where to find that for p5

Cheers

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [February 22, 2024, 10:57pm UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/4 "2024-02-22T22:57:59Z")

</div>

> [@bodomo](#):
>
> In any case, my original post was more about finding a body of code I could go through.

Hello @bodomo,

P5,js website:  
[https://p5js.org/](https://p5js.org/)

Open the _p5.js editor \> File \> Examples_ and it will take you to this:  
[https://editor.p5js.org/p5/sketches](https://editor.p5js.org/p5/sketches)

Processing IDE:

> **[Download Processing](https://processing.org/download/)**
>
> Processing is open source and is available for macOS, Windows, and Linux. Projects created with Processing are also cross-platform, and can be used on macOS, Windows, Android, Raspberry Pi, and many o…

Add p5,js mode and peruse the examples:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/5/f54164591687c8d6151a8d5fbd71dbfae329dfb1.png)

Happy Coding:

> **[p5.js Tutorials](https://happycoding.io/tutorials/p5js/)**
>
> Learn how to create p5.js sketches!

I am confident there is more out 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: [February 23, 2024, 11:45am UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/5 "2024-02-23T11:45:38Z")

</div>

Hi bodomo welcome to the forum.

> [@bodomo](#):
>
> I have extensive experience programming in other languages, not so much in JS

I have a similar background and I have been learning and using JS seriously for almost 2 years now.

> [@bodomo](#):
>
> Which code would you recommend I understand to improve my knowledge? There’s much out there, but much of that is not an example to follow

One of the problems with example code (even well written code) is that it might _demonstrate_ some useful JS feature but does not discuss it in any detail. For instance the syntax of a many JS features for example, OO (object orientation), closures, methods, are all large and complex topics that even tutorial sites fall to cover in depth.

Different people have different learning preferences but my approach has always been to _ **write code** _ and then look at examples and reference material when I got stuck or if something didn’t work.

So 2 years ago I decided to learn p5js and JavaScript. After getting used to the code structure for p5js sketches e.g. `preload`, `setup`, `draw` and writing simple 2D and 3D sketches I practiced by converting some of my Java sketches to use p5js. You can see some of my sketches [here](http://www.lagers.org.uk/gallery/index.html) (most require keyboard and mouse so not suitable for touchscreen devices). BTW my favourite is [Rebellion on Pern](http://www.lagers.org.uk/gallery/gy-rop/gy-index.html) being the most complex p5js sketch I have created 🙂

Once I was comfortable with p5js I decided to create canvasGUI, a p5js library that provides on canvas GUI controls e…g. buttons, checkboxes, sliders etc. This library is freely available for others to use and more info can be found [here](http://www.lagers.org.uk/canvasgui/index.html) and on [github](https://github.com/quarks/canvasGUI/wiki).

I could never have got this far so quickly by simply examining sample code and tutorial websites, it was by writing code, more code and even more code - learning by repetition. Some of the techniques I used required a broad and deep understanding of JavaScript not easily found on the web so I have a secret to share…

My secret is something from the dark ages - a book 🤓 yes that’s right a book, not just any book but

> “JavaScript The Definitive Guide” Seventh Edition by David Flannagan

I cannot recommend this book highly enough, I always keep it beside me when I am programming. I still research particular topics on the web but then use this book as reference when I come to implement them.

I know I have rambled on a bit but I hope you find my JavaScript journey interesting. If you decide to get this book make sure it is the seventh edition and not an earlier one.

---

<div class="post-metadata">

### Author: ![bodomo](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bodomo](https://discourse.processing.org/u/bodomo)
#### Post date: [February 23, 2024, 8:55pm UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/6 "2024-02-23T20:55:22Z")

</div>

@quark , thanks for the thoughtful and comprehensive reply. The “good” examples seem right on target. Your site has interesting materials; I look forward to getting to a level at which I develop a need for them and/or I can understand how they work. I’ll also make my way through Flanagan’s book on an as-needed basis, since it looks like a substantial investment.  
Cheers

---

<div class="post-metadata">

### Author: ![bodomo](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@bodomo](https://discourse.processing.org/u/bodomo)
#### Post date: [February 23, 2024, 8:58pm UTC](https://discourse.processing.org/t/existing-p5-js-code-i-should-learn-from/43941/7 "2024-02-23T20:58:17Z")

</div>

@glv , thanks much for the information; repositories like the three you pointed me at are exactly what I was looking for. Now, to go through all those snippets to keep learning.  
Cheers
