I came across an intriguing code on CodePen that I wanted to replicate. However, despite my best efforts, I couldn't get it to work properly. Here is the link to the original code: http://codepen.io/thebabydino/pen/LpqEmJ
When I checked the console, it showed me the following error:
TypeError: rotor is null engine.js:176:1
The code snippet is as follows:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>For You</title>
<link href="style.css" rel="stylesheet">
<script type="application/javascript" src="engine.js"></script>
</head>
<body>
<p><a href='http://codepen.io/thebabydino/pen/RWvaZW' target='_blank'>see also the pure CSS (WebKit-only) version</a></p>
<svg viewbox='-2000 -2000 4000 4000'>
<g id='rotor'>
<polygon id='morpher'></polygon>
</g>
</svg>
<h1>click it, you know you want to!</h1>
</body>
</html>
CSS
html { text-align: center; }
body { background: #000; color: #fff; }
svg { width: 65vmin; hight: 65vmin; }
polygon { cursor: pointer; }
h1, p { font: 2em trebuchet ms, verdana, sans-serif; }
p { font-size: 1em; }
a { color: greenyellow; }
JS
// JavaScript Document
Object.getOwnPropertyNames(Math).map(function(p) {
window[p] = Math[p];
});
var PRECISION = 4,
RC_PENTA = 500,
A_HEART = PI/4,
DURATION = 40,
END_SHADES = [[255, 215, 0], [220, 20, 60]],
tl = [], shades = [],
t = 0, t_incr = 1, rid = null,
rotor = document.getElementById('rotor'),
morpher = document.getElementById('morpher');
var getData = function(prec, rc_penta, a_heart) {
var n_penta = 5, data = { 'prec': prec },
ca_penta = 2*PI/n_penta,
ri_penta = rc_penta*cos(.5*ca_penta),
hl_penta = rc_penta*sin(.5*ca_penta),
ai_penta = (n_penta - 2)*PI/n_penta,
ao_penta = PI - ai_penta,
ho_star = hl_penta*tan(ao_penta),
d = rc_penta + ri_penta + ho_star,
diam_heart = d*sin(a_heart);
data.nvx_star = 2*n_penta;
data.ba_star = .5*ca_penta;
data.r_star = [ri_penta + ho_star, rc_penta];
data.nr_heart = n_penta*prec - 1;
data.r_heart = .5*diam_heart;
data.yu_heart = -diam_heart*sin(a_heart);
data.yl_heart = data.yu_heart + d;
data.xo_heart = data.r_heart*cos(a_heart);
data.yo_heart = .5*data.yu_heart;
data.ba_heart = PI/data.nr_heart;
data.aoff_heart = PI - a_heart;
return data;
};
...
If anyone can help me identify where I went wrong, I would greatly appreciate it. Thank you in advance.