Port more Examples to p5.js

[REAS]

Some of the examples on the website have still images instead of live code. Try to port these to p5.js and run them as code on the site. These include:

• Lights/Directional
• Lights/Mixture
• Lights/Mixture Grid
• Lights/On Off
• Lights/Reflection
• Lights/Spot
• Transform/Rotate Push Pop
• Transform/Rotate X Y

I don't think it's possible to load SVGs and OBJs directly in p5.js right now? If that's true, we'll need to leave all of the examples in the Shape category as image placeholders.

[SableRaf]

p5.js can load OBJs directly using the loadModel() function

p5.js doesn't support svg loading natively but it can be done using p5.js-svg (https://github.com/zenozeng/p5.js-svg)
Question: should interactive examples be allowed to use additional js libraries if needed to emulate Processing (Java) behavior?

Happy to take care of those

[trikaphundo]

I took on all the examples @REAS listed and I have just issued a PR. The only one that I did not manage to get to work is the Spot example.

[REAS]

Thank you @trikaphundo! @SableRaf you'll have full admin privileges for this repo to accept this PR when you accept the invite :)

[SableRaf]

I merged @trikaphundo's fixes (thanks!) and edited the original issue to add tasks for the Shapes section.

[trikaphundo]

Hello @SableRaf, you have marked the example Lights/Spot as work done in your edit of the initial comment; but my PR #309 didn't fix it.
I have just checked the main branch to see whether, maybe, some other person fixed it, but the example's folder was last modified a year ago.

Therefore, Lights/Spot should be set back to TODO work.
Greetings.

[SableRaf]

Good catch! That was a mistake. Back in the TODOs \o

[SableRaf]

I moved the SVG discussion to a separate issue: #314

Closing this as the examples mentioned in the original issue have been ported. Thanks!