(Intergrate P5.js and Three.js) — Create a ThreeJS scene with animations from P5.js library?

Question

Before we begin, you may want to read my previous post which lead to the creation of this question:

Drawing/Rendering 3D objects with epicycles and fourier transfor

Answer 1

Dabbled a bit more with what I think is your basic concept. Believe it or not, more than 50% of the effort involved working around dithering issues associated with overlapping transparent objects in motion, an area where three.js is a bit weak. But, after a bit of searching, one can mitigate the dithering issues with adjustments to the Z alignment of the objects and the renderOrder.

In any event, take a look at the code below, which extends your effort, introducing 5 randomly sized and rotating transparent circles. For drawing lines, take a look at the following link https://threejs.org/docs/#manual/en/introduction/How-to-update-things .

This might look better full screen rather than in the small viewport within Stackoverflow.

Hope this helps you along your way.