CCTV Everywhere
How do I make an cctv everywhere?
Cookies? Oldschool!! I use CCTV cams to track my users! Watch your step, they are everywhere. Get it as a widget here -> http://moklick.github.io/cctv-everywhere/. What is a cctv everywhere? How do you make a cctv everywhere? This script and codes were developed by Moklick on 20 November 2022, Sunday.
CCTV Everywhere - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CCTV Everywhere</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *{ 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;
}
.download-link{ font-size:16px; position:absolute; bottom:1em; left:1em;
}
.download-link a{ color:#fa4e3e;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="canvas"></canvas>
<div class="info">move your mouse</div> <div class="download-link">Get it here: <a href="https://moklick.github.io/cctv-everywhere">https://moklick.github.io/cctv-everywhere</a>
<!--
Cookies? Oldschool!!
I use CCTV cams to track my users!
Watch your step, they are everywhere.
Thanks to @andymensional for the smooth movement of the camera
--> <script src="js/index.js"></script>
</body>
</html>
CCTV Everywhere - Script Codes CSS Codes
*{ 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;
}
.download-link{ font-size:16px; position:absolute; bottom:1em; left:1em;
}
.download-link a{ color:#fa4e3e;
}
CCTV Everywhere - Script Codes JS Codes
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();
Developer | Moklick |
Username | moklick |
Uploaded | November 20, 2022 |
Rating | 4.5 |
Size | 3,723 Kb |
Views | 20,240 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Hitman Loading Sequence pure css3 | 3,402 Kb |
Codepen Inception | 1,384 Kb |
3D Mapbox | 3,508 Kb |
Fullscreen fun | 1,984 Kb |
Berlin Building Map | 2,477 Kb |
Money Over Everything | 3,392 Kb |
Random Skyline | 2,353 Kb |
CSS Color Fading | 1,975 Kb |
Watch the cursor | 1,657 Kb |
Leaflet Transition Example | 33,818 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mobile Nav Menu | AliKlein | 4,745 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Popover Example | Seanboom | 2,429 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!