javascript - How can I create a graphic canvas with 2D objects animated in 3D space? -

i came across this site , fell in love background animation, particularly points connected each other, animating in 3d space. (the element in question is: <canvas id="bg" width="1920" height="995"></canvas>) new canvas animation, , research i've done far, not know path should start down achieve similar background animation project. far, have looked paper.js , plain canvas , js api.

here specifications have:

• ability make 'canvas' (not literally <canvas>, graphic canvas. not opposed particular graphic wrapper).
• ability make 'canvas' responsive
• round points (2d circles) navigating in 3d space (ability spin objects on axis plus, animating in helix plus.)
• instantiable modules of these round point sets
• ability animate these modules on specific events (click, hover, etc)

nice haves:

• vector graphics

something similar want achieve can viewed here.

i know of trying require pieces whole (js graphics library such paper.js, custom js classes, etc), know others have had success with.

thanks!

i did on whim. try not bite on questions "give me code" wanted see how long take it. cleaned up, name spaced, ect, may not you're looking @ effect turned out cool regardless.

note mouse events not included in example. question bit vague in terms of specifics provided very simple way started using 3d , canvas 2d element.

theres pretty decent code here example code , book exercises foundation html5 animation javascript has fantastic intro 3d examples using javascript , canvas. recommend checking out!

live demo

full screen

fiddle

var canvas = document.getelementbyid("canvas"),     ctx = canvas.getcontext("2d");  canvas.width = window.innerwidth; canvas.height = window.innerheight; ctx.linewidth = 4;  // color stuff not real important fluff var cycle = 0,     colors = {         r: 0,         g: 170,         b: 0     };  function colorcycle(inc) {     cycle += inc;     if (cycle > 100) {         cycle = 0;     }     colors.r = ~~ (math.sin(.3 * cycle + 0) * 127 + 128);     colors.g = ~~ (math.sin(.3 * cycle + 2) * 127 + 128);     colors.b = ~~ (math.sin(.3 * cycle + 4) * 127 + 128); }  // sections , points  function point(x, y, z, size) {     this.x = x;     this.y = y;     this.z = z;     this.xpos = 0;     this.ypos = 0;     this.size = 5;      rotatey(this,angle+=0.1); }  function section(x, y, z, width) {     this.x = x;     this.y = y;     this.z = z;     this.width = width;     this.points = [];     this.points.push(new point(this.x - this.width / 2, this.y, this.z, 20));     this.points.push(new point(this.x + this.width / 2, this.y, this.z, 20));      this.render = function (anglex, angley) {         ctx.beginpath();         (var p = 0; p < this.points.length; p++) {             var point = this.points[p];              rotatex(point, anglex);             rotatey(point, angley);             doperspective(point);              ctx.arc(point.xpos, point.ypos, point.size, 0, math.pi * 2, true);              if (p == 0) {                 ctx.moveto(this.points[0].xpos, this.points[0].ypos);             } else {                 ctx.lineto(point.xpos, point.ypos);             }         }          ctx.closepath();         ctx.stroke();         ctx.fill();     } }  // 3d functions rotation , perspective function rotatex(point, anglex) {     var cosx = math.cos(anglex),         sinx = math.sin(anglex),         y1 = point.y * cosx - point.z * sinx,         z1 = point.z * cosx + point.y * sinx;     point.y = y1;     point.z = z1; }  function rotatey(point, angley) {     var cosy = math.cos(angley),         siny = math.sin(angley),         x1 = point.x * cosy - point.z * siny,         z1 = point.z * cosy + point.x * siny;     point.x = x1;     point.z = z1; }  function doperspective(point) {     if (point.z > -fl) {         var scale = fl / (fl + point.z);         point.size = scale * 5;         point.xpos = vpx + point.x * scale;         point.ypos = vpy + point.y * scale;     } }  // init code var sections = [],     numsections = 50,     fl = 250,     vpx,     vpy,     angle = 0;  vpx = canvas.width / 2; vpy = canvas.height / 2;  // make sections (var = 0; < numsections; i++) {     sections.push(new section(0, -250 + (i * 10), 0, 50)); }  function render() {     ctx.clearrect(0, 0, canvas.width, canvas.height);     colorcycle(0.1);     ctx.fillstyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";     ctx.strokestyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";     (var = 0; < sections.length; i++) {         sections[i].render(0, 0.03);     }     requestanimationframe(render); } render();