JSFiddle - React, Tailwind, and code Playground

by jmchen

JavaScript

var camera, scene, renderer;
var mesh, border;
var clock = new THREE.Clock();

var m = 1, k = 5, c = .51;
var x = [];

function reset() {
	x[0] = 20, x[1] = 0;
}

function deriv (x) {
	var ff = [];
    ff.push (x[1]);                  // x_dot = v;
    ff.push (-(c*x[1] + k*x[0])/m);  // v_dot = 1/m *(-cx_dot -kx)
    return ff;
}

function ODESolver (dt) {
    /*
	var n = x.length;
    var f = deriv (x);
    
    for (var i = 0; i < n; i++) {
        x[i] += f[i]*dt;
    }
    */
    
    // fake version
    // let x[0] be a sine function
    
    this.time = this.time + dt || 0;
    x[0] = 20*Math.sin(5*this.time);  // fake....
}

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
    camera.position.z = 10;
    scene.add(camera);

    mesh = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    scene.add(mesh);

    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });

    var geometry = new THREE.BufferGeometry();
    var points = [];
    points.push(
    new THREE.Vector3(-40, -0, 0),
    new THREE.Vector3(40, 0, 0));
    geometry.setFromPoints (points);
    
    var border = new THREE.Line(geometry, material);
    scene.add(border);
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    document.body.appendChild(renderer.domElement);
    
	// INITIIALIZE ODE
    x.push (20);
    x.push (0);
    
}

function animate() {
    var dt = clock.getDelta();
    ODESolver (dt);
    
    mesh.position.setX (x[0]);
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}