Shape Shifter

.metadata.json

{
  "origin": "dartlab.org",
  "url": "http://dartlab.org/#:gistId",
  "history": [
    "748b5ddae625d7a32717",
    "f1d62ffbd26a13d6ac6e",
    "a1f5000fcf39c4b06623"
  ]
}

body.html

<div class="wrap">
  <canvas id="canv" width="450" height="450"></canvas>
  <div>
    <label for="rbtn0"><input name="mode" type="radio" value="10" id="rbtn0" />Extra Blur</label> 
    <label for="rbtn1"><input name="mode" type="radio" value="20" id="rbtn1" />Medium Blur</label> 
    <label for="rbtn2"><input name="mode" type="radio" value="30" id="rbtn2" />No Blur</label>
  </div>
  <br><br>
  <h3>Click Directly On The Object To Change Shapes<br>
  Mouse Over Object To Play With Rotation<br>
  Use Buttons To Adjust Motion Blur (default is high blur)</h3>
</div>

main.dart

import 'dart:async';
import 'dart:html';
import 'dart:math' as Math;

main() {
  window.onLoad.listen((_) {
    window.requestAnimationFrame((_) => go());
  });

  querySelector("input#rbtn0").onClick.listen((_) => blurR(0.15));
  querySelector("input#rbtn1").onClick.listen((_) => blurR(0.5));
  querySelector("input#rbtn2").onClick.listen((_) => blurR(1));
}

CanvasElement c; //canvas
var $; //context
var w = 450; //width
var h = 450; //height
var x = w / 2; //x pos
var y = h / 2; //y pos
var max_z = 500; //max z pos
List<Coordinates> arr = []; //Coordinates array
var msX = 0; //mouse x
var msY = 0; //mouse y
var curr = 0; //current (object)
var rot_x = 0; //x rotation
var rot_y = 0; //y rotation
var motblur = 0.2; //motion blur
var update = 0; //color update

class Coordinates {
  num x, y, z, rx, ry, rz;
}

go() {
  c = document.getElementById('canv');
  $ = c.getContext('2d');

  c.onMouseDown.listen(msdn);
  c.onMouseMove.listen(msmv);
  // calls
  obj();
  change(0);
  set();
  //radio btn set / get
  var rbtn = document.getElementById('rbtn0');
  rbtn.checked = true;
}

obj() {
  for (var i = 0; i < 27; i++) {
    var obj = new Coordinates();
    obj.x = 0;
    obj.y = 0;
    obj.z = 0;
    obj.rx = 0;
    obj.ry = 0;
    obj.rz = 0;
    arr.add(obj);
  }
}

set([_]) {
  draw(_);
  new Timer(const Duration(milliseconds: 50), () => window.requestAnimationFrame(set));
}

draw(_) {
  $.beginPath();
  $.fillStyle = "hsla(0,0%,0%,1)";
  $.globalAlpha = motblur;
  $.fillRect(0, 0, w, h);

  rot_x += (msX - w / 2) / 20;
  rot_y += (msY - h / 2) / 20;

  for (var i = 0; i < arr.length; i++) {
    //update color as it draws > other random color option is commented out below in the change();
    update -= 0.5;
    //point array rotation & current positions
    arr[i].rx = rot_x;
    arr[i].ry = rot_y;
    var rotX = arr[i].rx * Math.PI / 180;
    var rotY = arr[i].ry * Math.PI / 180;
    var rotZ = arr[i].rz * Math.PI / 180;
    var curX = arr[i].x;
    var curY = arr[i].y;
    var curZ = arr[i].z;
    //new positions
    var newX;
    var newY;
    var newZ;
    newX = curX;
    newZ = curZ;
    curX = newX * Math.cos(rotX) - newZ * Math.sin(rotX);
    curZ = newZ * Math.cos(rotX) + newX * Math.sin(rotX);

    newZ = curZ;
    newY = curY;
    curZ = newZ * Math.cos(rotY) - newY * Math.sin(rotY);
    curY = newY * Math.cos(rotY) + newZ * Math.sin(rotY);

    newX = curX;
    newY = curY;
    curX = newX * Math.cos(rotZ) - newY * Math.sin(rotZ);
    curY = newX * Math.sin(rotZ) + newY * Math.cos(rotZ);

    newZ = max_z / (max_z - curZ);
    newZ = newZ > 0 ? newZ : 0;
    var X = curX * newZ + x;
    var Y = curY * newZ + y;
    var S = 10 * newZ;

    $.beginPath();
    $.fillStyle = "hsla(${update % 360},100%,50%,0.75)";
    $.globalAlpha = 1;
    $.arc(X, Y, S, 0, Math.PI * 2, false);
    $.fill();
  }
}
//shape changes
change(n) {
  for (var j = 0; j < arr.length; j++) {
    //update-=0.5;  //update color only on click / new color per new shape
    var r = 360 / arr.length * j;
    if (n == 0) {
      arr[j].x = Math.cos(r * Math.PI / 180) * 150;
      arr[j].y = 0;
      arr[j].z = Math.sin(r * Math.PI / 180) * 150;
    } else if (n == 1) {
      arr[j].x = Math.cos(r * 3 * Math.PI / 180) * 50;
      arr[j].y = Math.sin(r * 3 * Math.PI / 180) * 50;
      arr[j].z = j * 10 - 150;
    } else if (n == 2) {
      arr[j].x = ((j ~/ 3) - (j ~/ 9) * 3) * 100 - 100;
      arr[j].x += 10;
      arr[j].y = j % 3 * 100 - 100;
      arr[j].y += 10;
      arr[j].z = (j ~/ 9) * 100 - 100;
    }
  }
}
//mousedown
msdn(e) {
  curr++;
  if (curr >= 3) curr = 0;
  change(curr);
}
//mousemove
msmv(MouseEvent e) {
  var rect = e.target.getBoundingClientRect();
  msX = e.client.x - rect.left;
  msY = e.client.y - rect.top;
}
//change blur based on user select
blurR(n) {
  motblur = n;
}

style.css

@import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
body{
  width:100%; 
  margin:0;
  overflow:hidden;
  color:hsla(255,255%,255%,1);
  background:hsla(0, 0%, 0%, 1);
  font-family:bitter;
}
.wrap{
  width:100%; 
  text-align:center;
}
canvas{
  margin-top:0;
  vertical-align:middle;
  margin-bottom:1em;
}
input{
  vertical-align:middle;
  display:none;
  width:10vw;
}
label:active{
  border:2px dashed hsla(255,255%,255%,1);
}
label{
  padding:1em;
  background:hsla(203, 95%, 25%, 1);
  color:hsla(255,255%,255%,1);
  font-size:1.2em;
  border-radius:4px;
}
h3{
  line-height:1.6em;
}