<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>sexyhexy | neonHexagonsWeekend</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<label>Speed
<input id="speed" type="range" min="1" max="4" step="0.25" value="2"/>
</label>
</div>
<canvas id="c"></canvas>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/sexyhexy-orandxa0neonhexagonsweekend-yNRxRa */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
background-color: #fafafa;
color: black;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
label {
display: block;
margin: 1em 0;
}
canvas {
background: #000;
}
input[type='range'] {
align-self: center;
border: solid 0 transparent;
border-width: 0 0.75em;
padding: 0;
width: 16.125em;
height: 0.9em;
background: none;
font-size: 1em;
cursor: pointer;
overflow: visible;
color: #000;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
position: relative;
width: 16.125em;
height: 0.3em;
background: linear-gradient(#dadada, #dadada) no-repeat 50% 0;
background-size: 16.125em 0.3em;
}
input[type='range']::-moz-range-track {
width: 16.125em;
height: 0.3em;
background: linear-gradient(#dadada, #dadada) no-repeat 50% 0;
background-size: 16.125em 0.3em;
}
input[type='range']::-ms-track {
margin-left: 0.375em;
border: none;
width: 16.125em;
height: 0.3em;
background: linear-gradient(#dadada, #dadada) no-repeat 50% 0;
background-size: 16em 0.3em;
color: transparent;
}
input[type='range']::-webkit-slider-thumb {
position: relative;
margin-top: -0.225em;
border: none;
border-radius: 50%;
background: currentColor;
width: 0.75em;
height: 0.75em;
}
input[type='range']::-moz-range-thumb {
border: none;
border-radius: 50%;
background: currentColor;
width: 0.125em;
height: 0.125em;
}
input[type='range']::-ms-thumb {
border: none;
border-radius: 50%;
background: currentColor;
width: 0.75em;
height: 0.75em;
}
input[type='range']::-ms-tooltip {
display: none;
}
input[type='range']:focus {
outline: none;
}
/* Chrome/ Opera */
input[type='range']:not(*:root) {
width: 16.75em;
}
/* IE */
_:-ms-input-placeholder, :root input[type='range'] {
width: 16.75em;
}
/*Downloaded from https://www.codeseek.co/pixelass/sexyhexy-orandxa0neonhexagonsweekend-yNRxRa */
/**
* map Math to window to have easier access
*/
Object.getOwnPropertyNames(Math).map(function (prop) {
window[prop] = Math[prop];
});
/**
* convert degree to radians
* @param {Number} degree degree to convert
* @return {Number} returns radians
*/
var rad = function rad(degree) {
return degree * PI / 180;
};
/**
* convert radians to degree
* @param {Number} radians radians to convert
* @return {Number} returns degree
*/
var deg = function deg(radians) {
return radians * 180 / PI;
};
var size = 100;
var speed = document.getElementById('speed');
var speedVal = parseFloat(speed.value);
//console.log('\npentagonArea', pentagonArea, '\ndodecahedronArea', dodecahedronArea, '\nangle', deg(angle), '\napothem', apothem, '\ninradius',inradius,'\ncircumradius',circumradius,'\nvolume',volume)
speed.addEventListener('change', function () {
speedVal = parseFloat(speed.value);
});
var c = document.getElementById('c');
var $ = c.getContext('2d');
$.scale(2, 2);
var canvasSize = 1000;
c.height = canvasSize;
c.width = canvasSize;
c.style.height = canvasSize / 2 + 'px';
c.style.width = canvasSize / 2 + 'px';
var count = 0;
var vertices = 6;
var draw = function draw() {
//$.fillStyle =' rgba(0,0,0,.02)';
// $.fillRect(0,0,canvasSize,canvasSize);
$.lineWidth = 4;
$.lineCap = 'round';
count++;
$.globalAlpha = 0.5;
$.fillStyle = ' rgba(0,0,0,0.1)';
var kk = sin(rad(count / speedVal));
$.strokeStyle = 'hsla(' + count + ',100%,50%,0.1)';
for (var j = 0; j < vertices; j++) {
$.beginPath();
for (var i = 0; i < vertices; i++) {
var x = cos(rad(360 / vertices * (i + 0.5) + count)) * size + canvasSize / 2 + cos(rad(360 / vertices * (j + 0.5))) * sqrt(3) * size * kk;
var y = sin(rad(360 / vertices * (i + 0.5) + count)) * size + canvasSize / 2 + sin(rad(360 / vertices * (j + 0.5))) * sqrt(3) * size * kk;
$.lineTo(x, y);
}
$.closePath();
$.stroke();
$.fill();
}
requestAnimationFrame(draw);
};
draw();