commit cb608f1a3ea8f649c8c7b099f65120c13dcdeb58
Author: Francisco Boudagh <franciscoboudagh1@gmail.com>
Date: Fri, 17 Dec 2021 21:44:20 +0100
Added all files
Diffstat:
| A | fonts/Krublight.ttf | | | 0 | |
| A | index.html | | | 25 | +++++++++++++++++++++++++ |
| A | script.js | | | 279 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | style.css | | | 109 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
4 files changed, 413 insertions(+), 0 deletions(-)
diff --git a/fonts/Krublight.ttf b/fonts/Krublight.ttf
Binary files differ.
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" >
+ <head>
+ <meta charset="UTF-8">
+ <title>Bored Button 3</title>
+ <link rel="stylesheet" href="./style.css">
+ </head>
+
+ <body>
+
+ <canvas id="bang" width="800" height="800">
+ </canvas>
+ <script src="./script.js"></script>
+
+ <div class="bg">
+ <p class="headline">BOREDBUTTON<sup>3</p>
+ </div>
+
+ <div class="main" id="main" onclick="myFunction()">
+ </div>
+
+
+ </body>
+ <footer>© 2022 BoredButton3 | All rights reserved.</footer>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,279 @@
+function myFunction() {
+ document.getElementById("main").innerHTML = "BANGBANG IN ANOS EVERYDAY";
+}
+
+
+
+var canvas = document.getElementById('bang'),
+ can_w = parseInt(canvas.getAttribute('width')),
+ can_h = parseInt(canvas.getAttribute('height')),
+ ctx = canvas.getContext('2d');
+
+// console.log(typeof can_w);
+var BALL_NUM = 60
+
+var ball = {
+ x: 0,
+ y: 0,
+ vx: 0,
+ vy: 0,
+ r: 0,
+ alpha: 1,
+ phase: 0
+ },
+ ball_color = {
+ r: 207,
+ g: 255,
+ b: 4
+ },
+ R = 3,
+ balls = [],
+ alpha_f = 0.02,
+ alpha_phase = 0,
+
+// Line
+ link_line_width = 0.8,
+ dis_limit = 300,
+ add_mouse_point = true,
+ mouse_in = false,
+ mouse_ball = {
+ x: 0,
+ y: 0,
+ vx: 0,
+ vy: 0,
+ r: 0,
+ type: 'mouse'
+ };
+
+// Random speed
+function getRandomSpeed(pos){
+ var min = -1.5,
+ max = 1.5;
+ switch(pos){
+ case 'top':
+ return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
+ break;
+ case 'right':
+ return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
+ break;
+ case 'bottom':
+ return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
+ break;
+ case 'left':
+ return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
+ break;
+ default:
+ return;
+ break;
+ }
+}
+function randomArrayItem(arr){
+ return arr[Math.floor(Math.random() * arr.length)];
+}
+function randomNumFrom(min, max){
+ return Math.random()*(max - min) + min;
+}
+console.log(randomNumFrom(0, 10));
+// Random Ball
+function getRandomBall(){
+ var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
+ switch(pos){
+ case 'top':
+ return {
+ x: randomSidePos(can_w),
+ y: -R,
+ vx: getRandomSpeed('top')[0],
+ vy: getRandomSpeed('top')[1],
+ r: R,
+ alpha: 1,
+ phase: randomNumFrom(0, 10)
+ }
+ break;
+ case 'right':
+ return {
+ x: can_w + R,
+ y: randomSidePos(can_h),
+ vx: getRandomSpeed('right')[0],
+ vy: getRandomSpeed('right')[1],
+ r: R,
+ alpha: 1,
+ phase: randomNumFrom(0, 10)
+ }
+ break;
+ case 'bottom':
+ return {
+ x: randomSidePos(can_w),
+ y: can_h + R,
+ vx: getRandomSpeed('bottom')[0],
+ vy: getRandomSpeed('bottom')[1],
+ r: R,
+ alpha: 1,
+ phase: randomNumFrom(0, 10)
+ }
+ break;
+ case 'left':
+ return {
+ x: -R,
+ y: randomSidePos(can_h),
+ vx: getRandomSpeed('left')[0],
+ vy: getRandomSpeed('left')[1],
+ r: R,
+ alpha: 1,
+ phase: randomNumFrom(0, 10)
+ }
+ break;
+ }
+}
+function randomSidePos(length){
+ return Math.ceil(Math.random() * length);
+}
+
+// Draw Ball
+function renderBalls(){
+ Array.prototype.forEach.call(balls, function(b){
+ if(!b.hasOwnProperty('type')){
+ ctx.fillStyle = 'rgba(63,97,124,'+b.alpha+')';
+ ctx.beginPath();
+ ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
+ ctx.closePath();
+ ctx.fill();
+ }
+ });
+}
+
+// Update balls
+function updateBalls(){
+ var new_balls = [];
+ Array.prototype.forEach.call(balls, function(b){
+ b.x += b.vx;
+ b.y += b.vy;
+
+ if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
+ new_balls.push(b);
+ }
+
+ // alpha change
+ b.phase += alpha_f;
+ b.alpha = Math.abs(Math.cos(b.phase));
+ // console.log(b.alpha);
+ });
+
+ balls = new_balls.slice(0);
+}
+
+// loop alpha
+function loopAlphaInf(){
+
+}
+
+// Draw lines
+function renderLines(){
+ var fraction, alpha;
+ for (var i = 0; i < balls.length; i++) {
+ for (var j = i + 1; j < balls.length; j++) {
+
+ fraction = getDisOf(balls[i], balls[j]) / dis_limit;
+
+ if(fraction < 1){
+ alpha = (1 - fraction).toString();
+
+ ctx.strokeStyle = 'rgba(63,97,124,'+alpha+')';
+ ctx.lineWidth = link_line_width;
+
+ ctx.beginPath();
+ ctx.moveTo(balls[i].x, balls[i].y);
+ ctx.lineTo(balls[j].x, balls[j].y);
+ ctx.stroke();
+ ctx.closePath();
+ }
+ }
+ }
+}
+
+// calculate distance between two points
+function getDisOf(b1, b2){
+ var delta_x = Math.abs(b1.x - b2.x),
+ delta_y = Math.abs(b1.y - b2.y);
+
+ return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
+}
+
+// add balls if there a little balls
+function addBallIfy(){
+ if(balls.length < BALL_NUM){
+ balls.push(getRandomBall());
+ }
+}
+
+// Render
+function render(){
+ ctx.clearRect(0, 0, can_w, can_h);
+
+ renderBalls();
+
+ renderLines();
+
+ updateBalls();
+
+ addBallIfy();
+
+ window.requestAnimationFrame(render);
+}
+
+// Init Balls
+function initBalls(num){
+ for(var i = 1; i <= num; i++){
+ balls.push({
+ x: randomSidePos(can_w),
+ y: randomSidePos(can_h),
+ vx: getRandomSpeed('top')[0],
+ vy: getRandomSpeed('top')[1],
+ r: R,
+ alpha: 1,
+ phase: randomNumFrom(0, 10)
+ });
+ }
+}
+// Init Canvas
+function initCanvas(){
+ canvas.setAttribute('width', window.innerWidth);
+ canvas.setAttribute('height', window.innerHeight);
+
+ can_w = parseInt(canvas.getAttribute('width'));
+ can_h = parseInt(canvas.getAttribute('height'));
+}
+window.addEventListener('resize', function(e){
+ console.log('Window Resize...');
+ initCanvas();
+});
+
+function goMovie(){
+ initCanvas();
+ initBalls(BALL_NUM);
+ window.requestAnimationFrame(render);
+}
+goMovie();
+
+// Mouse effect
+canvas.addEventListener('mouseenter', function(){
+ console.log('mouseenter');
+ mouse_in = true;
+ balls.push(mouse_ball);
+});
+canvas.addEventListener('mouseleave', function(){
+ console.log('mouseleave');
+ mouse_in = false;
+ var new_balls = [];
+ Array.prototype.forEach.call(balls, function(b){
+ if(!b.hasOwnProperty('type')){
+ new_balls.push(b);
+ }
+ });
+ balls = new_balls.slice(0);
+});
+canvas.addEventListener('mousemove', function(e){
+ var e = e || window.event;
+ mouse_ball.x = e.pageX;
+ mouse_ball.y = e.pageY;
+ // console.log(mouse_ball);
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,109 @@
+*{
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+html, body{
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+}
+
+@font-face {
+ font-family: krublight;
+ src: url('fonts/Krublight.ttf');
+}
+
+canvas{
+ background-color: #fcfcfc;
+}
+
+.headline {
+ color: #3F617C;
+ font-size: 2.3em;
+ letter-spacing: 0.3em;
+ font-family: krublight;
+ margin-top: 2%;
+ position: fixed;
+ font-weight: bold;
+ top: 0;
+ text-align: center;
+ left: 0;
+ right: 0;
+ width: 100%;
+}
+
+.main{
+ width: 180px;
+ height: 180px;
+ border: 2px solid #3F617C;
+ background-color: #3F617C;
+ opacity: 0.75;
+ position: fixed;
+ top:0; bottom:0; left:0;right:0;
+ margin: auto;
+ border-radius: 50%;
+ transition: 0.7s;
+}
+
+footer{
+ color: #3F617C;
+ text-align: center;
+ margin-bottom: 1%;
+ font-size: 1em;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ font-family: krublight;
+}
+
+.main:before {
+ content: '';
+ background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+ position: absolute;
+ background-size: 400%;
+ z-index: -1;
+ filter: blur(5px);
+ width: calc(100% + 4px);
+ height: calc(100% + 4px);
+ animation: glowing 20s linear infinite;
+ opacity: 0;
+ transition: opacity .3s ease-in-out;
+ border-radius: 50%;
+}
+
+.main:active {
+ color: #3F617C
+ border-radius: 50%;
+}
+
+.main:hover{
+ opacity: 1;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+.main:hover:before {
+ opacity: 1;
+ border-radius: 50%;
+}
+
+.main:after {
+ z-index: -1;
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: #3F617C;
+ left: 0;
+ top: 0;
+ border-radius: 50%;
+}
+
+@keyframes glowing {
+ 0% { background-position: 0 0; }
+ 50% { background-position: 400% 0; }
+ 100% { background-position: 0 0; }
+}
