title: (Intergrate P5.js and Three.js) --- Create a ThreeJS scene with animations from P5.js library?
body: <p>Before we begin, you may want to read my previous post which lead to the creation of this question:</p>
  
  <p><a href="https://i.stack.imgur.com/f7rck.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f7rck.png" alt="enter image description here"></a>
  <a href="https://stackoverflow.com/questions/57117182/drawing-rendering-3d-objects-with-epicycles-and-fourier-transformations-animati">Drawing/Rendering 3D objects with epicycles and fourier transformations [Animation]</a></p>
  
  <p>Context:</p>
  
  <p>Using the P5.js library and following a tutorial from The Coding Train (Coding Challenge #130.1 --> #130.3) i was able to animate and recreate any parametric drawing using epicycles and fourier transforms. (Read the Previous Post, trust me, it will help)</p>
  
  <p>I am now looking to expand this to three Dimensions!</p>
  
  <p>A helpful community member suggested breaking the 3D drawing into two planes. This way, i dont have to write new code, and could use my preexisting 2D code! cool right!</p>
  
  <p>Another User suggested using the Three.JS library to create a 3D scene for this process. </p>
  
  <p>So Far i have created 3 planes. I would like to essentially use these planes as TV Screens. TV screens where i can then display my 2D version from written in P5js and project a new point in 3D space to generate/draw a new 3D drawing.</p>
  
  <p><a href="https://i.stack.imgur.com/059Tg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/059Tg.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Epicyclic Circles&lt;/title&gt;
      &lt;style&gt;
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"&gt;&lt;/script&gt;
      &lt;script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
        // Set up the basic scene, camera, and lights.
  
        var scene = new THREE.Scene();
        scene.background = new THREE.Color( 0xf0f0f0 );
  
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        scene.add(camera)
  
        var light = new THREE.PointLight( 0xffffff, 0.8 );
        camera.add( light );
  
        camera.position.z = 50;
  
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
  
        // Add the orbit controls to permit viewing the scene from different angles via the mouse.
  
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        controls.dampingFactor = 0.25;
        controls.screenSpacePanning = false;
        controls.minDistance = 0;
        controls.maxDistance = 500;
  
        // Create center and epicyclic circles, extruding them to give them some depth.
  
        var plane = new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 );
  var helper = new THREE.PlaneHelper( plane, 50, 0x696969 );
  scene.add( helper );
  
  
  var plane2 = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 );
  var helper2 = new THREE.PlaneHelper( plane2, 50, 0xE06666 );
  scene.add( helper2 );
  
  
  var plane3 = new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 0 );
  var helper3 = new THREE.PlaneHelper( plane3, 50, 0xD85C6 );
  scene.add( helper3 );
  
  var size = 10;
  var divisions = 10;
  
  var gridHelper = new THREE.GridHelper( size, divisions );
  scene.add( gridHelper );
  
  
  
  
  
  
        var animate = function () {
          requestAnimationFrame( animate );
  
          // During each animation frame, let's rotate the objects on their center axis,  
          // and also set the position of the epicyclic circle.
  
          renderer.render( scene, camera );
        };
  
        animate();
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any other suggestions/Methods are welcomed too! :D</p>
  
  <p>Recap:</p>
  
  <ul>
  <li>How do i display P5js animations in my ThreeJs screen</li>
  <li>How can i make them use the same coordinate system (p5 is using X and Y pixels)</li>
  </ul>