added new background and added cards
This commit is contained in:
MonkeyGG2
@@ -0,0 +1,65 @@
|
||||
.hexagonGrid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
/* this makes browser use GPU acceleration for blur */
|
||||
will-change: contents;
|
||||
|
||||
filter: blur(2.5px);
|
||||
}
|
||||
|
||||
.hexagonGrid .row {
|
||||
display: inline-flex;
|
||||
margin-top: -32px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
.hexagonGrid .row:nth-child(even) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 110px;
|
||||
margin: 4px 2px;
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
opacity: 0.95;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
background: var(--bg);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon:hover::before {
|
||||
background: #72acb1;
|
||||
opacity: 1;
|
||||
transition: 0s;
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon:hover::after {
|
||||
background: var(--bg);
|
||||
}
|
||||
@@ -141,74 +141,4 @@ section {
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.particles {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.hexagonGrid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
/* this makes browser use GPU acceleration for blur */
|
||||
will-change: contents;
|
||||
|
||||
filter: blur(2.5px);
|
||||
}
|
||||
|
||||
.hexagonGrid .row {
|
||||
display: inline-flex;
|
||||
margin-top: -32px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
.hexagonGrid .row:nth-child(even) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 110px;
|
||||
margin: 4px 2px;
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
opacity: 0.95;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
background: var(--bg);
|
||||
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon:hover::before {
|
||||
background: #72acb1;
|
||||
opacity: 1;
|
||||
transition: 0s;
|
||||
}
|
||||
|
||||
.hexagonGrid .row .hexagon:hover::after {
|
||||
background: var(--bg);
|
||||
}
|
||||
@@ -36,4 +36,68 @@ body.noscript {
|
||||
background-color: black;
|
||||
color: white;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#particles {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
background: var(--bg);
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.homepage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
h1 {
|
||||
z-index: 50;
|
||||
margin-left: 2.5%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 90%;
|
||||
margin-top: 12.5%;
|
||||
}
|
||||
|
||||
.column {
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 25%;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button {
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--font-color);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 4px 8px 0 hsl(from var(--button-color) h s l);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
background-color: var(--bg-second);
|
||||
border-radius: 50px;
|
||||
font-size: 150%;
|
||||
color: var(--font-color);
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
+47
-49
@@ -6,15 +6,14 @@
|
||||
<meta name="keywords" content="games, gamez, unblocked, unblocked games, tunnel rush, run 3, run, 3, hacks, chrome dino unblocked, chrome dino, chrome dinosaur, dinosaur game, dinosaur, chrome hacks, chrome dino hacks, chrome dinosaur hacks, chrome dino game hack, unblocked game site, idle breakout, idle breakout hack, idle breakout save, idle breakout code, idle breakout save generator, idle breakout unblocked, 2048, 2048 unblocked, 2048 no ads, no ads, ads, 2048 high score, cookie clicker, cookie clicker unblocked, cookie clicker github, cookie clicker no ads, flappy bird, flappy bird no ads, flappy bird unblocked, flash games, flash, bloons, bloons tower defense, bloons td, bloons td 1, bloons td 2, bloons td 3, bloons td 4, bloons td 5, bloons td 6, online, duck life, duck life 1, duck life 2, ducklife 3, factory balls, learn to fly, learn to fly game, raft wars, the impossible quiz, this is the only level, impossible quiz, impossible quiz online, impossible quiz answers, impossible quiz question, imposible quiz, quiz, quiz answers, hextris, retrobowl, retrobowl unblocked, retrobowl online, rooftop snipers, rooftop snipers unblocked, slope, slope online, slope unblocked, slope unblocked site, slope unblocked no ads, slope unblocked google site, slope unblocked online, slope unblocked school, smart ball, tunnel rush, tunnel rush online, tunnel rush unblocked, tunnel rush unblocked site, tunnel rush unblocked no ads, tunnel rush unblocked google site, slope google site, tunnel rush google site, tunnel rush unblocked online, tunnel rush unblocked school">
|
||||
<meta name="og:image" content="favicon.png">
|
||||
|
||||
<!--changed this so there isnt a flash of no css-->
|
||||
<link href="css/loading.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||
|
||||
|
||||
<!-- not sure why this isnt <script src="js/loading.js"></script> -->
|
||||
<!-- <script src="js/loading.js"></script> if you replace the below with this the image loads but the hexagons disappear completely-->
|
||||
<!-- preloading some resources -->
|
||||
<link href="js/loading.js" rel="preload" as="script">
|
||||
<link href="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" rel="preload" as="script">
|
||||
<link href="css/loading.css" rel="preload" as="style" type="text/css">
|
||||
|
||||
<!-- now loading css -->
|
||||
<link href="css/loading.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
@@ -26,10 +25,6 @@
|
||||
<div class="loading">
|
||||
<div>
|
||||
<div class="loading-tip">
|
||||
<script>
|
||||
const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
|
||||
document.getElementsByClassName("loading-tip")[0].textContent = "Loading...\n" + tips[Math.floor(Math.random() * tips.length)];
|
||||
</script>
|
||||
</div>
|
||||
<div class="loading-infinity">
|
||||
<br>
|
||||
@@ -65,48 +60,51 @@
|
||||
<img src="imgs/icon.png" alt="MonkeyGG2 Icon" onclick="this.src = 'imgs/secret-icon.png'">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<section id="everything-else">
|
||||
<h1>MonkeyGG2</h1>
|
||||
<canvas class="particles"></canvas>
|
||||
|
||||
<div class="hexagonGrid"></div>
|
||||
<div id="particles"></div>
|
||||
|
||||
<!-- TEMPORARY!!! increases loading times to demonstrate loading screen -->
|
||||
<img src="https://random.imagecdn.app/1500/1500" alt="random image">
|
||||
<div class="homepage">
|
||||
<div class="card-row">
|
||||
<div class="column">
|
||||
<button>
|
||||
<div class="card">
|
||||
<img src="" alt="">
|
||||
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore repellat blanditiis exercitationem nesciunt enim esse nihil aliquam deserunt ratione, rerum possimus placeat consequuntur excepturi repudiandae tenetur eos ut delectus fuga?</h5>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button>
|
||||
<div class="card">
|
||||
<img src="" alt="">
|
||||
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, ut molestias sapiente corrupti odio vitae in illum consectetur nam veniam. Quis explicabo exercitationem vitae asperiores esse libero, voluptates magnam praesentium.</h5>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button>
|
||||
<div class="card">
|
||||
<img src="" alt="">
|
||||
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, fugit placeat. Esse, accusamus amet in accusantium minus debitis fuga? Rem, eius. Laudantium, accusantium? Deleniti suscipit sint, doloremque sed enim ipsum?</h5>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button>
|
||||
<div class="card">
|
||||
<img src="" alt="">
|
||||
<h5>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis explicabo provident quae similique placeat. Magni commodi odit dolorum sed eaque impedit animi explicabo dignissimos? Id dolorem eum et nisi expedita!</h5>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- loading.js file and jQuery are preloaded -->
|
||||
<!-- they are loaded before though? -->
|
||||
<script>
|
||||
const loading = document.createElement("script");
|
||||
loading.src = "js/loading.js";
|
||||
document.body.appendChild(loading);
|
||||
|
||||
const jquery = document.createElement("script");
|
||||
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js";
|
||||
document.body.appendChild(jquery);
|
||||
|
||||
jquery.onload = () => {
|
||||
$(window).on("load", () => {
|
||||
$(".track").attr("stroke", "url(#grad2)");
|
||||
$(".worm1").hide();
|
||||
$(".worm2").hide();
|
||||
|
||||
$(".loading").fadeOut({
|
||||
duration: 300,
|
||||
/*complete: () => {
|
||||
setTimeout(500, () => {
|
||||
$("#everything-else").fadeIn({
|
||||
duration: 500,
|
||||
easing: "easeInOutSine"
|
||||
});
|
||||
});
|
||||
}*/
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" defer></script>
|
||||
<script src="js/loading.js" defer></script>
|
||||
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js' defer></script>
|
||||
<script src="js/bg.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
/*--------------------
|
||||
Vars
|
||||
--------------------*/
|
||||
const deg = a => Math.PI / 180 * a;
|
||||
const rand = (v1, v2) => Math.floor(v1 + Math.random() * (v2 - v1));
|
||||
const opt = {
|
||||
particles: window.width / 500 ? 1000 : 500,
|
||||
noiseScale: 0.005,
|
||||
angle: Math.PI / 180 * -90,
|
||||
h1: rand(0, 360),
|
||||
h2: rand(0, 360),
|
||||
s1: rand(20, 90),
|
||||
s2: rand(20, 90),
|
||||
l1: rand(30, 80),
|
||||
l2: rand(30, 80),
|
||||
strokeWeight: 2,
|
||||
tail: 82 };
|
||||
|
||||
const Particles = [];
|
||||
let time = 0;
|
||||
document.body.addEventListener("click", () => {
|
||||
opt.h1 = rand(0, 360);
|
||||
opt.h2 = rand(0, 360);
|
||||
opt.s1 = rand(20, 90);
|
||||
opt.s2 = rand(20, 90);
|
||||
opt.l1 = rand(30, 80);
|
||||
opt.l2 = rand(30, 80);
|
||||
opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1);
|
||||
|
||||
for (let p of Particles) {
|
||||
p.randomize();
|
||||
}
|
||||
});
|
||||
|
||||
/*--------------------
|
||||
Particle
|
||||
--------------------*/
|
||||
class Particle {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.lx = x;
|
||||
this.ly = y;
|
||||
this.vx = 0;
|
||||
this.vy = 0;
|
||||
this.ax = 0;
|
||||
this.ay = 0;
|
||||
this.hueSem = Math.random();
|
||||
this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
|
||||
this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
|
||||
this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
|
||||
this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
|
||||
}
|
||||
|
||||
randomize() {
|
||||
this.hueSem = Math.random();
|
||||
this.hue = this.hueSem > 0.5 ? 20 + opt.h1 : 20 + opt.h2;
|
||||
this.sat = this.hueSem > 0.5 ? opt.s1 : opt.s2;
|
||||
this.light = this.hueSem > 0.5 ? opt.l1 : opt.l2;
|
||||
this.maxSpeed = this.hueSem > 0.5 ? 3 : 2;
|
||||
}
|
||||
|
||||
update() {
|
||||
this.follow();
|
||||
|
||||
this.vx += this.ax;
|
||||
this.vy += this.ay;
|
||||
|
||||
var p = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
|
||||
var a = Math.atan2(this.vy, this.vx);
|
||||
var m = Math.min(this.maxSpeed, p);
|
||||
this.vx = Math.cos(a) * m;
|
||||
this.vy = Math.sin(a) * m;
|
||||
|
||||
this.x += this.vx;
|
||||
this.y += this.vy;
|
||||
this.ax = 0;
|
||||
this.ay = 0;
|
||||
|
||||
this.edges();
|
||||
}
|
||||
|
||||
follow() {
|
||||
let angle =
|
||||
noise(
|
||||
this.x * opt.noiseScale,
|
||||
this.y * opt.noiseScale,
|
||||
time * opt.noiseScale) *
|
||||
|
||||
Math.PI *
|
||||
0.5 +
|
||||
opt.angle;
|
||||
|
||||
this.ax += Math.cos(angle);
|
||||
this.ay += Math.sin(angle);
|
||||
}
|
||||
|
||||
updatePrev() {
|
||||
this.lx = this.x;
|
||||
this.ly = this.y;
|
||||
}
|
||||
|
||||
edges() {
|
||||
if (this.x < 0) {
|
||||
this.x = width;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.x > width) {
|
||||
this.x = 0;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.y < 0) {
|
||||
this.y = height;
|
||||
this.updatePrev();
|
||||
}
|
||||
if (this.y > height) {
|
||||
this.y = 0;
|
||||
this.updatePrev();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
stroke(`hsla(${this.hue}, ${this.sat}%, ${this.light}%, .5)`);
|
||||
line(this.x, this.y, this.lx, this.ly);
|
||||
this.updatePrev();
|
||||
}}
|
||||
|
||||
|
||||
/*--------------------
|
||||
Setup
|
||||
--------------------*/
|
||||
function setup() {
|
||||
let canvas = createCanvas(windowWidth, windowHeight);
|
||||
canvas.parent("particles");
|
||||
|
||||
for (let i = 0; i < opt.particles; i++) {
|
||||
Particles.push(new Particle(Math.random() * width, Math.random() * height));
|
||||
}
|
||||
strokeWeight(opt.strokeWeight);
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Draw
|
||||
--------------------*/
|
||||
function draw() {
|
||||
time++;
|
||||
background(0, 100 - opt.tail);
|
||||
|
||||
for (let p of Particles) {
|
||||
p.update();
|
||||
p.render();
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------
|
||||
Resize
|
||||
--------------------*/
|
||||
function windowResized() {
|
||||
resizeCanvas(windowWidth, windowHeight);
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
// hexagons will be used as a separate theme later
|
||||
|
||||
function changeLoadingTip() {
|
||||
const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"]
|
||||
const element = document.getElementsByClassName("loading-tip")[0];
|
||||
|
||||
element.textContent = "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
|
||||
}
|
||||
|
||||
changeLoadingTip();
|
||||
$("#everything-else").hide();
|
||||
|
||||
let changeTip = setInterval(() => {
|
||||
changeLoadingTip();
|
||||
}, 3000);
|
||||
|
||||
$(window).on("load", () => {
|
||||
$(".track").attr("stroke", "url(#grad2)");
|
||||
$(".worm1").hide();
|
||||
$(".worm2").hide();
|
||||
clearInterval(changeTip);
|
||||
|
||||
$(".loading").fadeOut({
|
||||
duration: 300,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
$("#everything-else").fadeIn({
|
||||
duration: 500,
|
||||
easing: "swing"
|
||||
}, 200);
|
||||
hexagonGrid();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// PARTICLES
|
||||
const cvs = document.getElementsByClassName('particles')[0];
|
||||
const ctx = cvs.getContext('2d');
|
||||
|
||||
cvs.width = window.innerWidth;
|
||||
cvs.height = window.innerHeight;
|
||||
|
||||
let particlesArray;
|
||||
|
||||
let mouse = {
|
||||
x: null,
|
||||
y: null,
|
||||
radius: 170
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', function(event) {
|
||||
mouse.x = event.x;
|
||||
mouse.y = event.y;
|
||||
mouse.radius = 170;
|
||||
});
|
||||
|
||||
document.onmousemove = (function(_) {
|
||||
var onmousestop = function() {
|
||||
mouse.radius = 0;
|
||||
}, thread;
|
||||
|
||||
return function() {
|
||||
clearTimeout(thread);
|
||||
thread = setTimeout(onmousestop, 10);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
class Particle {
|
||||
constructor(x, y, directionX, directionY, size, color) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.directionX = directionX;
|
||||
this.directionY = directionY;
|
||||
this.size = size;
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
|
||||
ctx.fillStyle = '#a3f6fd';
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.x > cvs.width || this.x < 0) {
|
||||
this.directionX = -this.directionX;
|
||||
}
|
||||
|
||||
if (this.y > cvs.height || this.y < 0) {
|
||||
this.directionY = -this.directionY;
|
||||
}
|
||||
|
||||
let dx = mouse.x - this.x;
|
||||
let dy = mouse.y - this.y;
|
||||
let distance = Math.sqrt(dx * dx + dy * dy);
|
||||
if (distance < mouse.radius + this.size) {
|
||||
if (mouse.x < this.x && this.x < cvs.width - this.size * 10) {
|
||||
this.x += 10;
|
||||
}
|
||||
|
||||
if (mouse.x > this.x && this.x > this.size * 10) {
|
||||
this.x -= 10;
|
||||
}
|
||||
|
||||
if (mouse.y < this.y && this.y < cvs.height - this.size * 10) {
|
||||
this.y += 10;
|
||||
}
|
||||
|
||||
if (mouse.y > this.y && this.y > this.size * 10) {
|
||||
this.y -= 10;
|
||||
}
|
||||
}
|
||||
this.x += this.directionX;
|
||||
this.y += this.directionY;
|
||||
|
||||
this.draw();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
particlesArray = [];
|
||||
let numberOfParticles = (cvs.height * cvs.width) / 9000;
|
||||
for (let i = 0; i < numberOfParticles * 0.25; i++) {
|
||||
let size = (Math.random() * 35) + 1;
|
||||
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
|
||||
let y = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
|
||||
let directionX = (Math.random() * 5) - 2.5;
|
||||
let directionY = (Math.random() * 5) - 2.5;
|
||||
let color = '#a3f6fd';
|
||||
particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
|
||||
}
|
||||
}
|
||||
|
||||
function connect() {
|
||||
let opacityValue = 1;
|
||||
for (let i = 0; i < particlesArray.length; i++) {
|
||||
for (let j = i; j < particlesArray.length; j++) {
|
||||
let distance = ((particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x)) + ((particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y));
|
||||
|
||||
if (distance < (cvs.width/ 7) * (cvs.height / 7)) {
|
||||
opacityValue = 1 - (distance / 20000);
|
||||
ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
|
||||
ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, innerWidth, innerHeight);
|
||||
for (let i = 0; i < particlesArray.length; i++) {
|
||||
particlesArray[i].update();
|
||||
}
|
||||
connect();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
cvs.width = innerWidth;
|
||||
cvs.height = this.innerHeight;
|
||||
mouse.radius = 170;
|
||||
init();
|
||||
});
|
||||
|
||||
window.addEventListener('mouseout', function() {
|
||||
mouse.x = undefined;
|
||||
mouse.y = undefined;
|
||||
});
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
// HEXAGON GRID
|
||||
function hexagonGrid() {
|
||||
const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
|
||||
const CONTAINER = HEXAGON_GRID.parentNode;
|
||||
|
||||
let wall = {
|
||||
width: CONTAINER.offsetWidth,
|
||||
height: CONTAINER.offsetHeight
|
||||
};
|
||||
|
||||
let rowsNumber = Math.ceil(wall.height / 80);
|
||||
let columnsNumber = Math.ceil(wall.width / 100) + 1;
|
||||
|
||||
HEXAGON_GRID.innerHTML = "";
|
||||
|
||||
for (let i = 0; i < rowsNumber; i++) {
|
||||
let row = document.createElement("div");
|
||||
row.className = "row";
|
||||
HEXAGON_GRID.appendChild(row);
|
||||
}
|
||||
|
||||
let rows = HEXAGON_GRID.querySelectorAll(".row");
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
for (let j = 0; j < columnsNumber; j++) {
|
||||
let hexagon = document.createElement("div");
|
||||
hexagon.className = "hexagon";
|
||||
rows[i].appendChild(hexagon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hexagonGrid();
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
hexagonGrid();
|
||||
});
|
||||
|
||||
// FPS METER
|
||||
(function () {
|
||||
let previousTime = Date.now();
|
||||
let frames = 0;
|
||||
let refreshRate = 1000;
|
||||
|
||||
let fpsMeter = document.createElement("div");
|
||||
fpsMeter.id = "fpsMeter";
|
||||
document.body.appendChild(fpsMeter);
|
||||
|
||||
requestAnimationFrame(function loop() {
|
||||
const TIME = Date.now();
|
||||
frames++;
|
||||
if (TIME > previousTime + refreshRate) {
|
||||
let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
|
||||
previousTime = TIME;
|
||||
frames = 0;
|
||||
fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
|
||||
}
|
||||
requestAnimationFrame(loop);
|
||||
});
|
||||
|
||||
fpsMeter.style.position = "fixed";
|
||||
fpsMeter.style.top = "25px";
|
||||
fpsMeter.style.right = "25px";
|
||||
fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
|
||||
fpsMeter.style.padding = "10px";
|
||||
fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
|
||||
fpsMeter.style.fontFamily = "Monospace";
|
||||
fpsMeter.style.fontSize = "24px";
|
||||
fpsMeter.style.zIndex = "10000";
|
||||
})();
|
||||
+18
-214
@@ -5,224 +5,28 @@ function changeLoadingTip() {
|
||||
element.textContent = "Loading... \n" + tips[Math.floor(Math.random() * tips.length)];
|
||||
}
|
||||
|
||||
changeLoadingTip();
|
||||
$("#everything-else").hide();
|
||||
|
||||
let changeTip = setInterval(() => {
|
||||
changeLoadingTip();
|
||||
}, 3000);
|
||||
|
||||
document.onload = () => {
|
||||
//clearInterval(changeTip);
|
||||
}
|
||||
$(window).on("load", () => {
|
||||
$(".track").attr("stroke", "url(#grad2)");
|
||||
$(".worm1").hide();
|
||||
$(".worm2").hide();
|
||||
clearInterval(changeTip);
|
||||
|
||||
// PARTICLES
|
||||
const cvs = document.getElementsByClassName('particles')[0];
|
||||
const ctx = cvs.getContext('2d');
|
||||
|
||||
cvs.width = window.innerWidth;
|
||||
cvs.height = window.innerHeight;
|
||||
|
||||
let particlesArray;
|
||||
|
||||
let mouse = {
|
||||
x: null,
|
||||
y: null,
|
||||
radius: 170
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', function(event) {
|
||||
mouse.x = event.x;
|
||||
mouse.y = event.y;
|
||||
mouse.radius = 170;
|
||||
});
|
||||
|
||||
document.onmousemove = (function(_) {
|
||||
var onmousestop = function() {
|
||||
mouse.radius = 0;
|
||||
}, thread;
|
||||
|
||||
return function() {
|
||||
clearTimeout(thread);
|
||||
thread = setTimeout(onmousestop, 10);
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
class Particle {
|
||||
constructor(x, y, directionX, directionY, size, color) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.directionX = directionX;
|
||||
this.directionY = directionY;
|
||||
this.size = size;
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
|
||||
ctx.fillStyle = '#a3f6fd';
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.x > cvs.width || this.x < 0) {
|
||||
this.directionX = -this.directionX;
|
||||
$(".loading").fadeOut({
|
||||
duration: 300,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
$("#everything-else").fadeIn({
|
||||
duration: 500,
|
||||
easing: "swing"
|
||||
}, 200);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
if (this.y > cvs.height || this.y < 0) {
|
||||
this.directionY = -this.directionY;
|
||||
}
|
||||
|
||||
let dx = mouse.x - this.x;
|
||||
let dy = mouse.y - this.y;
|
||||
let distance = Math.sqrt(dx * dx + dy * dy);
|
||||
if (distance < mouse.radius + this.size) {
|
||||
if (mouse.x < this.x && this.x < cvs.width - this.size * 10) {
|
||||
this.x += 10;
|
||||
}
|
||||
|
||||
if (mouse.x > this.x && this.x > this.size * 10) {
|
||||
this.x -= 10;
|
||||
}
|
||||
|
||||
if (mouse.y < this.y && this.y < cvs.height - this.size * 10) {
|
||||
this.y += 10;
|
||||
}
|
||||
|
||||
if (mouse.y > this.y && this.y > this.size * 10) {
|
||||
this.y -= 10;
|
||||
}
|
||||
}
|
||||
this.x += this.directionX;
|
||||
this.y += this.directionY;
|
||||
|
||||
this.draw();
|
||||
}
|
||||
}
|
||||
|
||||
function init() {
|
||||
particlesArray = [];
|
||||
let numberOfParticles = (cvs.height * cvs.width) / 9000;
|
||||
for (let i = 0; i < numberOfParticles * 0.25; i++) {
|
||||
let size = (Math.random() * 35) + 1;
|
||||
let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
|
||||
let y = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2);
|
||||
let directionX = (Math.random() * 5) - 2.5;
|
||||
let directionY = (Math.random() * 5) - 2.5;
|
||||
let color = '#a3f6fd';
|
||||
particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
|
||||
}
|
||||
}
|
||||
|
||||
function connect() {
|
||||
let opacityValue = 1;
|
||||
for (let i = 0; i < particlesArray.length; i++) {
|
||||
for (let j = i; j < particlesArray.length; j++) {
|
||||
let distance = ((particlesArray[i].x - particlesArray[j].x) * (particlesArray[i].x - particlesArray[j].x)) + ((particlesArray[i].y - particlesArray[j].y) * (particlesArray[i].y - particlesArray[j].y));
|
||||
|
||||
if (distance < (cvs.width/ 7) * (cvs.height / 7)) {
|
||||
opacityValue = 1 - (distance / 20000);
|
||||
ctx.strokeStyle = 'rgba(159, 253, 50,' + opacityValue + ')';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
|
||||
ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
ctx.clearRect(0, 0, innerWidth, innerHeight);
|
||||
for (let i = 0; i < particlesArray.length; i++) {
|
||||
particlesArray[i].update();
|
||||
}
|
||||
connect();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
cvs.width = innerWidth;
|
||||
cvs.height = this.innerHeight;
|
||||
mouse.radius = 170;
|
||||
init();
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('mouseout', function() {
|
||||
mouse.x = undefined;
|
||||
mouse.y = undefined;
|
||||
});
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
// HEXAGON GRID
|
||||
function hexagonGrid() {
|
||||
const HEXAGON_GRID = document.getElementsByClassName("hexagonGrid")[0];
|
||||
const CONTAINER = HEXAGON_GRID.parentNode;
|
||||
|
||||
let wall = {
|
||||
width: CONTAINER.offsetWidth,
|
||||
height: CONTAINER.offsetHeight
|
||||
};
|
||||
|
||||
let rowsNumber = Math.ceil(wall.height / 80);
|
||||
let columnsNumber = Math.ceil(wall.width / 100) + 1;
|
||||
|
||||
HEXAGON_GRID.innerHTML = "";
|
||||
|
||||
for (let i = 0; i < rowsNumber; i++) {
|
||||
let row = document.createElement("div");
|
||||
row.className = "row";
|
||||
HEXAGON_GRID.appendChild(row);
|
||||
}
|
||||
|
||||
let rows = HEXAGON_GRID.querySelectorAll(".row");
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
for (let j = 0; j < columnsNumber; j++) {
|
||||
let hexagon = document.createElement("div");
|
||||
hexagon.className = "hexagon";
|
||||
rows[i].appendChild(hexagon);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hexagonGrid();
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
hexagonGrid();
|
||||
});
|
||||
|
||||
// FPS METER
|
||||
(function () {
|
||||
let previousTime = Date.now();
|
||||
let frames = 0;
|
||||
let refreshRate = 1000;
|
||||
|
||||
let fpsMeter = document.createElement("div");
|
||||
fpsMeter.id = "fpsMeter";
|
||||
document.body.appendChild(fpsMeter);
|
||||
|
||||
requestAnimationFrame(function loop() {
|
||||
const TIME = Date.now();
|
||||
frames++;
|
||||
if (TIME > previousTime + refreshRate) {
|
||||
let fps = Math.round((frames * refreshRate) / (TIME - previousTime));
|
||||
previousTime = TIME;
|
||||
frames = 0;
|
||||
fpsMeter.innerHTML = "FPS: " + fps * (1000 / refreshRate);
|
||||
}
|
||||
requestAnimationFrame(loop);
|
||||
});
|
||||
|
||||
fpsMeter.style.position = "fixed";
|
||||
fpsMeter.style.top = "25px";
|
||||
fpsMeter.style.right = "25px";
|
||||
fpsMeter.style.background = "rgba(0, 0, 0, 0.5)";
|
||||
fpsMeter.style.padding = "10px";
|
||||
fpsMeter.style.color = "rgba(255, 255, 255, 0.75)";
|
||||
fpsMeter.style.fontFamily = "Monospace";
|
||||
fpsMeter.style.fontSize = "24px";
|
||||
fpsMeter.style.zIndex = "10000";
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user