Existing p5.js code I should learn from?

[bodomo]

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

[GoToLoop]

@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

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. It works great for my purposes, but for one weird thing: it creates duplicates of all the points 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

For an additional completeness’ sake, here’s the PyScript + p5*js version: https://PyScript.com/@gotoloop/ramer-douglas-peucker https://GoToloop.PyScriptApps.com/ramer-douglas-peucker https://GoToloop.PyScriptApps.com/ramer-douglas-peucker/latest/js.html

[bodomo]

@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

[glv]

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

Open the p5.js editor > File > Examples and it will take you to this:
https://editor.p5js.org/p5/sketches

Processing IDE:

Download Processing

Add p5,js mode and peruse the examples:

Happy Coding:

p5.js Tutorials

I am confident there is more out there…

:)

[quark]

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 (most require keyboard and mouse so not suitable for touchscreen devices). BTW my favourite is Rebellion on Pern 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 and on github.

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.

[bodomo]

@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

[bodomo]

@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