JSFiddle - React, Tailwind, and code Playground

by gautamadude

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <p id="alternContent">Hello World</p>
</body>
</html>

JavaScript

/*
First design the interface, then code the details. (or in other words, first decide how you want values to be changed then how it actually happens)
    ToDo (old): 
      - Make animation between two trees work.
      - We need to populate values with duplicates like we did in the old code, else it's hard to change values to individual spheres and pieces. (because it leaves undefined values which result in strange outcomes).
      - First design the interface, then code the details. (or in other words, first decide how you want values to be changed then how it actually happens)
        - Like should the number of spheres and pieces be a number you change or does it happen according to values you put in?
        new Tol (default values)

    ToDo (new):
        - Display should not animate when adding pices
        - Make sure animate animates pieces and the rest.

svg/canvas/flash + Display/Animate.
Change global.
Change local.
Inherit order: this, global, default.

var tol = new TOL("alternContent");

tol.render("svg", "display");
tol.render("svg", "animate");
tol.render("canvas", "display");
tol.render("canvas", "animate");
tol.render("flash", "display");
tol.render("flash", "animate");

tol.s.number_of_circles = 2;
tol.s1.number_of_circles = 3;

tol.s.number_of_pieces = 2;
tol.s1.number_of_pieces = 3;

tol.s.radius.c1.p1 = 10;
tol.s.radius.c2.p3 = 20;
tol.s1.radius.c2.p2 = 20;


*/

function TOL(replace) {
    this.first_render = true;
    this.width = 700;
    this.height = 700;
    this.translate = [this.width / 2, this.height / 2];
    this.sepheroth_positions = [[0 + this.translate[0], -120 + this.translate[1], 0],
                                                                                                                                                                                                                                                         [51.96152422706631 + this.translate[0], -90 + this.translate[1], 0],
                          ...