cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .container
  h3.header Magnificent Trigonometry


.container
  .row
    #container.col-sm-6
    
    #side.col-sm-6
    
      h3 Options
      
      .row
        .col-sm-12
          label.custom-control.custom-checkbox
            input(type="checkbox" id="ce").custom-control-input
            span.custom-control-indicator
            span.custom-control-description Show circles
      
      .row
        label(for="n").col-sm-4 Circles
        input(type="number" id="n" step="1").col-sm-8.form-control
        
      .row
        label(for="s").col-sm-4 Speed
        input(type="number" id="s" step="0.001").col-sm-4.form-control
        input(type="button" id="p" value="Pause").col-sm-4.form-control
        
      .row
        label(for="k").col-sm-4 Multiplier
        input(type="number" id="k" step="0.2").col-sm-8.form-control
        
      .row
        label(for="aki").col-sm-4 Auto-adder
        input(type="number" id="aki" step="0.001").col-sm-4.form-control
        .col-sm-4
          label.custom-control.custom-checkbox
            input(type="checkbox" id="ake").custom-control-input
            span.custom-control-indicator
            span.custom-control-description Enable
        
      .row
        label.col-sm-4 Align view
        .btn-group(id="a")
          input(type="button" id="at" value="Top").btn
          input(type="button" id="af" value="Front").btn
          input(type="button" id="as" value="Side").btn
          input(type="button" id="ad" value="Default").btn
      
  
  h3 A few interesting combinations
  p
    i Note: it is recommended that you disable "Show circles" and set the speed to a very low value when the circle count is high.
  table.table
    thead
      tr
        th Comment
        th Circles
        th Multiplier
        th Speed
        th Action
    tbody#cbs
  
  
  h3 How does this work?
  p Coming soon...


  h3 Notes
  p Patterns seem to be proper to a multiplier. However, this seems untrue for higher multipliers, where increasing the number of circles also changes the pattern. Maybe a stable pattern emerges only after a certain precision in the number of circles. To investigate.
  
  
  h3 About  
  p This is a new version of this 
    a(href="https://codepen.io/ninivert/pen/LWXZaR/") pen
    | , after I realized that I was limiting myself to one view, the top view.
  p Powered by three.js
  p Made with 💗 by 
    a(href="codepen.io/ninivert") ninivert
            
          
!
            
              html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  $base-font-size: 18px;
  $heading-scale: 8;
  @for $i from 1 through 6 {
    h#{$i} {
      margin: .5em 0;
      font-size: $base-font-size + $heading-scale * (6 - $i);
      color: #2c3e50;
    }
  }
  color: #34495e;
  
  .header {
    margin-top: .4em;
    padding: .4em 0;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 2em;
      height: 2px;
      background: #2980b9;
    }
    // border-bottom: 2px solid #2980b9;
  }
  
  .row {
    > #side {
      > .row {
        margin-bottom: .5em;
      }
    }
  }
  
  #container {
    // overflow: auto;
    > canvas {
      width: 100% !important;
      height: auto !important;
    }
  }
}


// * {
//   outline: 2px solid #aaa;
// }
            
          
!
            
              /**
 * THREE.JS
 * TODO
 * add plane to see only one part of the sphere
 * add proper explanation of the pen
 * show a few interesting combinations
 * add gif export
 * KNOWN BUGS
 * n must be multiple of 2... for some reason
 * "incomplete" circle bug --> the camera has depth
 */
console.clear();


let scene, camera, renderer, controls;
const width = 500,
      height = 500;


/**
 * Camera setup
 */
scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(
  10,
  width/height,
  1,
  1000
);
camera.position.set(0, 12, 10);
camera.lookAt(scene.position);



/**
 * Renderer setup
 */
renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

document.getElementById('container').appendChild(renderer.domElement);



/**
 * Controller setup
 */
controls = new THREE.OrbitControls(camera, document.getElementById('container'));
controls.rotateSpeed = 0.5;
controls.enableZoom = false;
controls.enablePan = false;
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.autoRotate = false;
controls.autoRotateSpeed = 1;



/**
 * UI objects
 */
// Options
let opts = {
  ce: true, // Circle enable
  n: 16, // Number of circles & dots
  s: 0.02, // Speed
  p: false, // Pause/Unpause
  k: 1, // Multiplier, full amplitude
  aki: 0.01, // Auto multiplier incrementation
  ake: false, // Auto multiplier enable
  at: [0, 16, 0], // Align view to top
  af: [16, 0, 0], // Align view to front
  as: [0, 0, 16], // Align view to side
  ad: [0, 12, 10], // Align view to default
  ENDOFOPTIONS: null, // Placeholder
  t: 0, // Time
  elmts: {
    ce: document.getElementById('ce'),
    n: document.getElementById('n'),
    s: document.getElementById('s'),
    p: document.getElementById('p'),
    k: document.getElementById('k'),
    aki: document.getElementById('aki'),
    ake: document.getElementById('ake'),
    at: document.getElementById('at'),
    af: document.getElementById('af'),
    as: document.getElementById('as'),
    ad: document.getElementById('ad')
  },
  handlers: {
    ce: function() {
      // Set the visibility of all circles
      opts.ce = this.checked;
      for (let i=0; i<circles.length; i++) {
        circles[i].visible = opts.ce;
      }
    },
    n: function() {
      let value = parseInt(this.value);
      // Set minimum value for k
      value = Math.max(1, Math.min(value, 10000));
      // Apply the value
      generateMeshes(value, opts.n);
      // Set the value
      opts.n = value;
      this.value = value;
    },
    s: function() {
      // Pause comes before speed modification
      if (opts.p === true) return;
      
      let value = parseFloat(this.value);
      // Clamp the value between 0.01 and 1
      value = Math.max(0.001, Math.min(1, value));
      // Set the value
      opts.s = value;
      this.value = value;
    },
    p: function() {
      // Toggle pause state
      opts.p = !opts.p;
      // Apply pause
      if (opts.p) {
        opts.s = 0;
        this.value = 'Unpause';
      } else {
        // Update the speed value
        // Call the event handler for the speed input with context
        opts.handlers.s.call(opts.elmts.s);
        this.value = 'Pause';
      }
    },
    k: function() {
      let value = parseFloat(this.value);
      // Set minimum value for k
      value = Math.max(0, value);
      // Set the value
      opts.k = value;
      this.value = value;
    },
    aki: function() {
      let value = parseFloat(this.value);
      // Set minimum value for k
      value = Math.max(0, Math.min(value, 1));
      // Set the value
      opts.aki = value;
      this.value = value;
    },
    ake: function() {
      opts.ake = this.checked;
    },
    at: function() {
      camera.position.set(...opts.at);
    },
    af: function() {
      camera.position.set(...opts.af);
    },
    as: function() {
      camera.position.set(...opts.as);
    },
    ad: function() {
      camera.position.set(...opts.ad);
    }
  },
  init: function() {
    let keys = Object.keys(this),
        elmt, type;
    
    for (let i of keys) {
      // Stop when you arrive at the end of the option list
      if (i === 'ENDOFOPTIONS') break;

      elmt = this.elmts[i];
      type = elmt.type;
      
      if (type === 'checkbox' || type === 'button') {
        elmt.checked = this[i];
        elmt.onclick = this.handlers[i];
      }
      if (type === 'number') {
        elmt.value = this[i];
        elmt.onchange = this.handlers[i];
      }
    }
  }
};

opts.init();

// Interesting combinations
let cbs = {
  values: [
    ['One synced arc', 16, 0, 0.02],
    ['Nearly a spiral', 16, 0.5, 0.02],
    ['Repulsive circle', 16, 43, 0.02],
    ['2 dancing arcs', 16, 47.8, 0.02],
    ['3 dancing arcs', 16, 42.8, 0.02],
    ['2 rotating circles', 32, 33, 0.02],
    ['Clover', 32, 34, 0.02],
    ['Rotor, 3 blades', 128, 3, 0.02],
    ['Rotor, 5 blades', 256, 5, 0.02],
    ['Rotating flower', 800, 43, 0.01],
    ['Rotating flower with waves', 800, 53, 0.01],
    ['Switching halves', 800, 64, 0.01],
    ['Glitchy flower, 4 petals', 800, 79.8, 0.01],
    ['Glitchy flower, 5 petals', 1000, 105, 0.01],
    ['Tripping flower', 1000, 33, 0.005]
  ],
  handler: function() {
    let i = this.i;
    opts.elmts.n.value = cbs.values[i][1];
    opts.elmts.k.value = cbs.values[i][2];
    opts.elmts.s.value = cbs.values[i][3];
    opts.handlers.n.call(opts.elmts.n);
    opts.handlers.k.call(opts.elmts.k);
    opts.handlers.s.call(opts.elmts.s);
  },
  init: function() {
    let tbody = document.getElementById('cbs');
    
    let value, tr, td, btn;
    for (let i=0; i<cbs.values.length; i++) {
      // Values
      value = cbs.values[i];
      tr = document.createElement('tr');
      for (let j=0; j<value.length; j++) {
        td = document.createElement('td');
        td.innerHTML = value[j];
        tr.appendChild(td);
      }
      // Button
      td = document.createElement('td');
      btn = document.createElement('button');
      btn.classList.add('btn');
      btn.innerHTML = 'Load';
      btn.i = i;
      btn.onclick = cbs.handler;
      td.appendChild(btn);
      tr.appendChild(td)
      // Append
      tbody.appendChild(tr);
    }
  }
};

cbs.init();



/**
 * Meshes
 */
// Global variables for the meshes
let dots = [], circles = [];
function generateMeshes(newN = 0, oldN = 0) {
  // Return if no changes have happened
  if (newN === oldN) return;
  
  // Construction variables
  let c = {}, d = {};
  c.material = new THREE.LineBasicMaterial({color: 0xcccccc});
  c.geometry = new THREE.CircleGeometry(1, 64);
  c.geometry.vertices.shift(); // Remove center vertex
  
  d.material = new THREE.MeshBasicMaterial({color: 0x000000});
  d.geometry = new THREE.SphereGeometry(.02, 8, 8);
  
  // Check if meshes need to be added or removed
  if (newN > oldN) {
    // Meshes need to be added
    let diff = newN - oldN; // # to be added
    
    for (let i=0; i<diff; i++) {
      c.mesh = new THREE.Line(c.geometry, c.material);
      c.mesh.visible = opts.ce; // Set visibility (while adding circles live)
      circles.push(c.mesh);
      scene.add(c.mesh);
    
      d.mesh = new THREE.Mesh(d.geometry, d.material);
      dots.push(d.mesh);
      scene.add(d.mesh);
    }
  } else {
    // Meshes need to be removed
    let diff = oldN - newN; // # to be removed
    
    let circle, dot;
    for (let i=0; i<diff; i++) {
      // Last elements of the arrays
      circle = circles[oldN-i-1];
      dot = dots[oldN-i-1];
      
      // Clean memory and remove meshes
      circle.material.dispose();
      circle.geometry.dispose();
      circles.pop();
      scene.remove(circle);
      dot.material.dispose();
      dot.geometry.dispose();
      dots.pop();
      scene.remove(dot);
    }
  }
  
  // Changes have been made, so we need to update the rotation
  for (let i=0, rot; i<newN; i++) {
    rot = i/newN*Math.PI;
    
    circles[i].rotation.y = rot;
    dots[i].delay = rot; // The dot's delay and rotation
  }
}
generateMeshes(opts.n, 0);



/**
 * Rendering
 */
let nextframe;
function loop() {
  opts.t += opts.s;
  
  let _time, _rot, _dot;
  for (let i=0; i<dots.length; i++) {
    _dot = dots[i]; // The current dot
    
    _time = opts.t + _dot.delay*opts.k; // The actual time for the dot
    _rot = _dot.delay; // The actual rotation of the dot
    
    _dot.position.x = Math.sin(_rot)*Math.sin(_time);
    _dot.position.y = Math.cos(_time);
    _dot.position.z = Math.cos(_rot)*Math.sin(_time);
  }
  
  if (opts.ake) {
    opts.k += opts.aki;
    opts.k = Math.round(opts.k*1000)/1000; // Because of rounding imprecisions
    opts.elmts.k.value = opts.k;
  }
  
  
  controls.update();
  renderer.render(scene, camera);
  
  nextframe = requestAnimationFrame(loop);
}

loop();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console