JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"> </script>
</head>
<body>
<canvas width="777" height="777" id="plasmaTree"> </canvas>
<script type="text/javascript">
<!-- Plasma Tree Starts here -->
var colorF = 'rgba(146,163,151,0.9)';
var bulbF = 'rgba(148,217,27,0.9)';
var treeGrow;
var context;
var ctx;
(function ($) {
var Vector = function (x, y) {
this.x = x || 0;
this.y = y || 0;
};
Vector.prototype = {
add: function (v) {
this.x += v.x;
this.y += v.y;
return this;
},
length: function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
rotate: function (theta) {
var x = this.x;
var y = this.y;
this.x = Math.cos(theta) * this.x - Math.sin(theta) * this.y;
this.y = Math.sin(theta) * this.x + Math.cos(theta) * this.y;
//this.x = Math.cos(theta) * x - Math.sin(theta) * y;
//this.y = Math.sin(theta) * x + Math.cos(theta) * y;
return this;
},
mult: function (f) {
this.x *= f;
this.y *= f;
return this;
}
};
var Leaf = function...