3D Curves

by WolfeSVK

CSS

* {margin: 0; padding: 0;}
canvas {display: block;}
body {background: black;}

JavaScript

window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();


    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    //    canvas.width = 400;
    //    canvas.height = 400;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    window.addEventListener("mousemove", onMouseMove, false);
    canvas.addEventListener("mousedown", onMouseDown, false);
    window.addEventListener("mouseup", onMouseUp, false);


    ////////////////////////////////////////////////////////////

    var cWidth = canvas.width;
    var cHeight = canvas.height;
    var cSmall = (cWidth < cHeight) ? cWidth : cHeight;

    var mouse = [];

    var walls3d;
    var balls3Dpos, balls3Dvel;


    var point2d, point3d;
    var dotsPerSide;
    var balls;
    var rotation = [];

    function Point2D(x, y, color, size) {
        this.x = x;
        this.y = y;
        this.color = color || "rgba(255,255,255,1)";
        this.size = size || 1;

        // if (this.color === undefined) {
        //     this.color = "rgba(255,255,255,1)";
        // }

        // if (this.size === undefined) {
        //     this.size = 1;
        // }

    }

    function Point3D(x, y, z, color, size) {
        this.x = x;
        this.y = y;
        this.z = z;

        this.color = color || "rgba(255,255,255,1)";
        this.size = size || 1;

        // if (this.color === undefined) {
        //     this.color = "rgba(255,255,255,1)";
        // }

        // if (this.size === undefined) {
        //     this.size = 1;
        // }

        this.rotX = 0;
        this.rotY = 0;
        this.rotZ = 0;

        //rotate and transform to 2d
  ...