Skip to content

Instantly share code, notes, and snippets.

@ricardobeat

ricardobeat/README.md

Created November 16, 2016 21:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ricardobeat/ad890807c170546cabc8edb8ad647a49 to your computer and use it in GitHub Desktop.
Save ricardobeat/ad890807c170546cabc8edb8ad647a49 to your computer and use it in GitHub Desktop.
Download ZIP
Curves
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>curves</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
float: left;
width: 20px;
height: 20px;
transition: all 0.2s;
}
canvas:hover {
opacity: 0.6;
}
.r1 { transform: rotate(90deg); }
.r2 { transform: rotate(180deg); }
.r3 { transform: rotate(270deg); }
</style>
</head>
<body>
<script>
function drawImage (c) {
var ctx = c.getContext("2d");
ctx.scale(2,2);
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI/2);
ctx.stroke()
ctx.beginPath();
ctx.arc(20,20,10,Math.PI,Math.PI*1.5);
ctx.stroke();
}
function createCanvas() {
var c = document.createElement('canvas');
c.width = 40;
c.height = 40;
c.rotation = 0;
drawImage(c);
document.body.appendChild(c);
}
var rows = Math.ceil(document.body.clientWidth / 20);
var cols = Math.ceil(document.body.clientHeight / 20);
for (var i=0; i < rows; i++) { // no protect
for (var j=0; j < cols; j++) { // no protect
createCanvas();
}
}
document.addEventListener('mouseover', function (e){
var el = e.target;
if (el.tagName === 'CANVAS') {
el.rotation = (el.rotation + 1) % 4;
el.className = 'r' + el.rotation;
}
}, false);
</script>
</body>
</html>
@TrooperT
Copy link

TrooperT commented Sep 25, 2021 •
edited

I stumbled across this and honestly quite like it.

Here is a small contribution to change it from following mouseover events to a randomly selected element every 100 or so milliseconds

replace lines 66 - 72 with the following

setInterval(()=>{
  var x = Math.floor(Math.random()*rows);
  var y = Math.floor(Math.random()*cols);
  var el = document.getElementsByTagName('canvas')[y*rows+x]
      el.rotation += 1 % 4;
      el.className = 'r' + el.rotation;

},100)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment