Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by moklick.

CCTV Everywhere

Cookies? Oldschool!! I use CCTV cams to track my users! Watch your step, they are everywhere.

A Pen by moklick on CodePen.

License.

<canvas id="canvas"></canvas>
<div class="info">move your mouse<div>
<!--
Cookies? Oldschool!!
I use CCTV cams to track my users!
Watch your step, they are everywhere.
Thanks to codepen.io/AndyTheGiant for the smooth movement of the camera
-->
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var BigBrother = ( function() {
"use strict";
var CCTVCam = {
viewPoint : {},
angle : 0,
newAngle : 0,
translation : {},
maxAngle : 0,
minAngle : 0,
init : function() {
this.viewPoint = {
x : 0,
y : 0
};
this.angle = 0;
this.newAngle = 0;
this.translation = {
x : 62.5,
y : 92
};
this.maxAngle = 2.85;
this.minAngle = -0.55;
},
draw : function() {
// smooth movement of the cam. Thanks Andy!
this.angle +=(this.newAngle-this.angle)/15;
ctx.beginPath()
// draw horizontal stab
ctx.rect(0, 70, 10, 45);
this.roundRect(9, 83.75, 10, 17.5, 2);
ctx.rect(18.5, 90, 37, 5);
// draw joint
ctx.arc(this.translation.x, this.translation.y, 7.5, 0, 2 * Math.PI);
ctx.save();
// translate to center of the joint
ctx.translate(this.translation.x, this.translation.y);
ctx.rotate(this.angle);
// draw vertical stab
ctx.rect(-2.5, -32.5, 5, 32.5);
this.roundRect(-8.5, -37.5, 17.5, 6, 2);
// draw cam
ctx.rect(-32, -64, 80, 27.5);
ctx.rect(48, -60, 5, 15);
ctx.rect(52, -57.25, 4, 10);
// restore initial state of canvas
ctx.restore();
ctx.fillStyle = '#333';
ctx.fill();
},
update : function(_angle) {
if (_angle < this.minAngle) {
_angle = this.minAngle;
}
if (_angle > this.maxAngle) {
_angle = this.maxAngle;
}
this.newAngle = _angle;
// calculate absolute pos of the cam
this.viewPoint.x = this.translation.x - (50 * Math.cos(this.angle + (90 * Math.PI / 180)));
this.viewPoint.y = (this.translation.y + 25) - (50 * Math.sin(this.angle + (90 * Math.PI / 180)));
},
roundRect : function(x, y, width, height, radius) {
var r = x + width;
var b = y + height;
ctx.moveTo(x + radius, y);
ctx.lineTo(r - radius, y);
ctx.quadraticCurveTo(r, y, r, y + radius);
ctx.lineTo(r, y + height - radius);
ctx.quadraticCurveTo(r, b, r - radius, b);
ctx.lineTo(x + radius, b);
ctx.quadraticCurveTo(x, b, x, b - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
}
}
var canvas;
var ctx;
var WIDTH;
var HEIGHT;
var mouse;
var isStart;
var init = function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = WIDTH = 300;
canvas.height = HEIGHT = 300;
mouse = {
x : window.innerWidth / 2,
y : window.innerHeight / 2
};
isStart = true;
bindEventHandlers();
CCTVCam.init();
draw();
}
var bindEventHandlers = function() {
document.onmousemove = function(e) {
mouse.x = e.pageX;
mouse.y = e.pageY;
if(isStart){
// fade out the info message
var infoElm = document.querySelector('.info');
infoElm.style.opacity = 0;
}
isStart = false;
};
}
var update = function() {
var deltaX = mouse.x - CCTVCam.translation.x;
var deltaY = mouse.y - (CCTVCam.translation.y + 25);
// distance between mouse and joint of the cam
var mag = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
// only update cam if the mouse is further away as 50
if (mag > 50 && mouse.x > 20) {
var camPoint = CCTVCam.viewPoint;
deltaX = mouse.x - camPoint.x;
deltaY = mouse.y - camPoint.y;
// calculate angle between cam and mouse
var angleRad = Math.atan2(deltaY, deltaX);
CCTVCam.update(angleRad);
}
}
var draw = function() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
update();
CCTVCam.draw();
requestAnimFrame(draw);
}
return {
init : init
}
}());
BigBrother.init();
*{
margin: 0;
padding: 0
}
body{
background: #fafafa;
font-family:Courier;
}
canvas {
display: block;
position: fixed;
left: 0;
top: 25px;
}
.info{
font-size:50px;
text-align:center;
margin-top: 50px;
width:40%;
margin: 50px auto 0 auto;
transition: opacity 2s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.