mirror of
https://scm.osdn.net/gitroot/planet/planet-launcher.git
synced 2024-08-15 03:28:13 +00:00
Website (#28)
* page update * w * update * m * better looking page * better looking page * Better looking website
This commit is contained in:
parent
ffbac4b7d1
commit
fe60b76197
6 changed files with 766 additions and 58 deletions
75
css/styles.css
Normal file
75
css/styles.css
Normal file
|
@ -0,0 +1,75 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
|
||||||
|
body {
|
||||||
|
background-color: black;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 5px;
|
||||||
|
color: #ffc200;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
||||||
|
color: white;
|
||||||
|
font-size: 1.2em;
|
||||||
|
color: rgb(0, 179, 255);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover {
|
||||||
|
color: rgb(112, 224, 255);
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: all .4s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-img {
|
||||||
|
padding: 5px;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#screenshot-img {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 30%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
/*scroll bar style*/
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgb(0, 179, 255) /*#555*/;
|
||||||
|
}
|
||||||
|
#particles {
|
||||||
|
position: fixed;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
z-index: -99;
|
||||||
|
}
|
38
index.html
38
index.html
|
@ -8,13 +8,12 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="shortcut icon" type="image/png" href="./img/favicon.ico"/>
|
<link rel="shortcut icon" type="image/png" href="./img/favicon.ico"/>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="./css/styles.css">
|
||||||
<title>Planet Launcher</title>
|
<title>Planet Launcher</title>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
animation: fadeInAnimation ease 3s;
|
animation: fadeInAnimation ease 3s;
|
||||||
animation-iteration-count: 1;
|
animation-iteration-count: s1;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
}
|
}
|
||||||
@keyframes fadeInAnimation {
|
@keyframes fadeInAnimation {
|
||||||
|
@ -29,19 +28,24 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="mainimage">
|
<main>
|
||||||
<img src="./img/planet-logo.png" height="175" width=auto>
|
<div id="particles"></div>
|
||||||
</div>
|
<section>
|
||||||
<div class="beginningtext">
|
<img id="header-img" src="./img/planet-logo.png" height="175" width=auto>
|
||||||
<h1 class="mainheader">Planet Launcher</h1>
|
<h1>Planet Launcher</h1>
|
||||||
<h3 class="secondheader">An interactive launcher for minecraft pi edition, reborn!</h3>
|
<h3>An interactive launcher for minecraft pi edition, reborn!</h3>
|
||||||
<p>
|
<p>
|
||||||
<a href="https://github.com/mcpiscript/Planet" target="_blank" class="githubpagehyperlink">GitHub page</a>.
|
<a class="link" href="https://github.com/mcpiscript/Planet" target="_blank">GitHub page</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</section>
|
||||||
<div class="screenshotimage">
|
<section id="screenshots">
|
||||||
<img src="./img/screenshot.png" alt="screenshot of launcher" class="launcherimage">
|
<img id="screenshot-img" src="./img/screenshot.png" alt="screenshot of launcher">
|
||||||
</div>
|
</section>
|
||||||
|
</main>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
|
||||||
|
<script>
|
||||||
|
particlesJS.load('particles', '/Planet/particle-config.json', function () {
|
||||||
|
})
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
2
js/jquery-3.6.0.min.js
vendored
Normal file
2
js/jquery-3.6.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
109
particle-config.json
Normal file
109
particle-config.json
Normal file
|
@ -0,0 +1,109 @@
|
||||||
|
{
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "image",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "/Planet/img/planet-logo.png"
|
||||||
|
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 3,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 40,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 150,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 6,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 400,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 400,
|
||||||
|
"size": 40,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
559
particles.js
Normal file
559
particles.js
Normal file
|
@ -0,0 +1,559 @@
|
||||||
|
/*!
|
||||||
|
* A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
|
||||||
|
*
|
||||||
|
* @author Marc Bruederlin <hello@marcbruederlin.com>
|
||||||
|
* @version 2.2.3
|
||||||
|
* @license MIT
|
||||||
|
* @see https://github.com/marcbruederlin/particles.js
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* exported Particles */
|
||||||
|
var Particles = (function (window, document) {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var Plugin, Particle = {};
|
||||||
|
|
||||||
|
function particleCompareFunc(p1, p2) {
|
||||||
|
if (p1.x < p2.x) {
|
||||||
|
return -1;
|
||||||
|
} else if (p1.x > p2.x) {
|
||||||
|
return 1;
|
||||||
|
} else if (p1.y < p2.y) {
|
||||||
|
return -1;
|
||||||
|
} else if (p1.y > p2.y) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Represents the plugin.
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
*/
|
||||||
|
Plugin = (function () {
|
||||||
|
function Plugin() {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.defaults = {
|
||||||
|
responsive: null,
|
||||||
|
selector: null,
|
||||||
|
maxParticles: 100,
|
||||||
|
sizeVariations: 3,
|
||||||
|
showParticles: true,
|
||||||
|
speed: 0.5,
|
||||||
|
color: '#000000',
|
||||||
|
minDistance: 120,
|
||||||
|
connectParticles: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
_.element = null;
|
||||||
|
_.context = null;
|
||||||
|
_.ratio = null;
|
||||||
|
_.breakpoints = [];
|
||||||
|
_.activeBreakpoint = null;
|
||||||
|
_.breakpointSettings = [];
|
||||||
|
_.originalSettings = null;
|
||||||
|
_.storage = [];
|
||||||
|
_.usingPolyfill = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Plugin;
|
||||||
|
}());
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public mehtod to initialize the plugin with user settings.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
* @param {object} settings
|
||||||
|
*/
|
||||||
|
Plugin.prototype.init = function (settings) {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.options = _._extend(_.defaults, settings);
|
||||||
|
_.originalSettings = JSON.parse(JSON.stringify(_.options));
|
||||||
|
|
||||||
|
_._animate = _._animate.bind(_);
|
||||||
|
|
||||||
|
_._initializeCanvas();
|
||||||
|
_._initializeEvents();
|
||||||
|
_._registerBreakpoints();
|
||||||
|
_._checkResponsive();
|
||||||
|
_._initializeStorage();
|
||||||
|
_._animate();
|
||||||
|
|
||||||
|
return _;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public method to destroy the plugin.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
Plugin.prototype.destroy = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.storage = [];
|
||||||
|
_.element.remove();
|
||||||
|
|
||||||
|
window.removeEventListener('resize', _.listener, false);
|
||||||
|
window.clearTimeout(_._animation);
|
||||||
|
cancelAnimationFrame(_._animation);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Setup the canvas element.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._initializeCanvas = function () {
|
||||||
|
var _ = this, devicePixelRatio, backingStoreRatio;
|
||||||
|
|
||||||
|
if (!_.options.selector) {
|
||||||
|
console.warn('particles.js: No selector specified! Check https://github.com/marcbruederlin/particles.js#options');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.element = document.querySelector(_.options.selector);
|
||||||
|
_.context = _.element.getContext('2d');
|
||||||
|
|
||||||
|
devicePixelRatio = window.devicePixelRatio || 1;
|
||||||
|
backingStoreRatio = _.context.webkitBackingStorePixelRatio || _.context.mozBackingStorePixelRatio || _.context.msBackingStorePixelRatio ||
|
||||||
|
_.context.oBackingStorePixelRatio || _.context.backingStorePixelRatio || 1;
|
||||||
|
|
||||||
|
_.ratio = devicePixelRatio / backingStoreRatio;
|
||||||
|
_.element.width = (_.element.offsetParent) ? _.element.offsetParent.clientWidth * _.ratio : _.element.clientWidth * _.ratio;
|
||||||
|
|
||||||
|
if (_.element.offsetParent && _.element.offsetParent.nodeName === 'BODY') {
|
||||||
|
_.element.height = window.innerHeight * _.ratio;
|
||||||
|
} else {
|
||||||
|
_.element.height = (_.element.offsetParent) ? _.element.offsetParent.clientHeight * _.ratio : _.element.clientHeight * _.ratio;
|
||||||
|
}
|
||||||
|
_.element.style.width = '100%';
|
||||||
|
_.element.style.height = '100%';
|
||||||
|
|
||||||
|
_.context.scale(_.ratio, _.ratio);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register event listeners.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._initializeEvents = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.listener = function () { _._resize(); }.bind(this);
|
||||||
|
window.addEventListener('resize', _.listener, false);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Initialize the particle storage.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._initializeStorage = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.storage = [];
|
||||||
|
|
||||||
|
for (var i = _.options.maxParticles; i--;) {
|
||||||
|
_.storage.push(new Particle(_.context, _.options));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Register responsive breakpoints if the user declared some.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._registerBreakpoints = function () {
|
||||||
|
var _ = this, breakpoint, currentBreakpoint, l, responsiveSettings = _.options.responsive || null;
|
||||||
|
|
||||||
|
if (typeof responsiveSettings === 'object' && responsiveSettings !== null && responsiveSettings.length) {
|
||||||
|
for (breakpoint in responsiveSettings) {
|
||||||
|
l = _.breakpoints.length - 1;
|
||||||
|
currentBreakpoint = responsiveSettings[breakpoint].breakpoint;
|
||||||
|
|
||||||
|
if (responsiveSettings.hasOwnProperty(breakpoint)) {
|
||||||
|
while (l >= 0) {
|
||||||
|
if (_.breakpoints[l] && _.breakpoints[l] === currentBreakpoint) {
|
||||||
|
_.breakpoints.splice(l, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
l--;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.breakpoints.push(currentBreakpoint);
|
||||||
|
_.breakpointSettings[currentBreakpoint] = responsiveSettings[breakpoint].options;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_.breakpoints.sort(function (a, b) {
|
||||||
|
return b - a;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if a breakpoint is active and load the breakpoints options.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._checkResponsive = function () {
|
||||||
|
var _ = this, breakpoint, targetBreakpoint = false, windowWidth = window.innerWidth;
|
||||||
|
|
||||||
|
if (_.options.responsive && _.options.responsive.length && _.options.responsive !== null) {
|
||||||
|
targetBreakpoint = null;
|
||||||
|
|
||||||
|
for (breakpoint in _.breakpoints) {
|
||||||
|
if (_.breakpoints.hasOwnProperty(breakpoint)) {
|
||||||
|
if (windowWidth <= _.breakpoints[breakpoint]) {
|
||||||
|
targetBreakpoint = _.breakpoints[breakpoint];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (targetBreakpoint !== null) {
|
||||||
|
_.activeBreakpoint = targetBreakpoint;
|
||||||
|
_.options = _._extend(_.options, _.breakpointSettings[targetBreakpoint]);
|
||||||
|
} else {
|
||||||
|
if (_.activeBreakpoint !== null) {
|
||||||
|
_.activeBreakpoint = null;
|
||||||
|
targetBreakpoint = null;
|
||||||
|
|
||||||
|
_.options = _._extend(_.options, _.originalSettings);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Rebuild the storage and update the canvas.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._refresh = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_._initializeStorage();
|
||||||
|
_._draw();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Kick off various things on window resize.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._resize = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.element.width = (_.element.offsetParent) ? _.element.offsetParent.clientWidth * _.ratio : _.element.clientWidth * _.ratio;
|
||||||
|
|
||||||
|
if (_.element.offsetParent && _.element.offsetParent.nodeName === 'BODY') {
|
||||||
|
_.element.height = window.innerHeight * _.ratio;
|
||||||
|
} else {
|
||||||
|
_.element.height = (_.element.offsetParent) ? _.element.offsetParent.clientHeight * _.ratio : _.element.clientHeight * _.ratio;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.context.scale(_.ratio, _.ratio);
|
||||||
|
|
||||||
|
clearTimeout(_.windowDelay);
|
||||||
|
|
||||||
|
_.windowDelay = window.setTimeout(function () {
|
||||||
|
_._checkResponsive();
|
||||||
|
_._refresh();
|
||||||
|
}, 50);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Animates the plugin particles by calling the draw method.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._animate = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_._draw();
|
||||||
|
_._animation = window.requestAnimFrame(_._animate);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restarts the particles animation by calling _animate.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
Plugin.prototype.resumeAnimation = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
if (!_._animation) {
|
||||||
|
_._animate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pauses/stops the particle animation.
|
||||||
|
*
|
||||||
|
* @public
|
||||||
|
*/
|
||||||
|
Plugin.prototype.pauseAnimation = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
if (!_._animation) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_.usingPolyfill) {
|
||||||
|
window.clearTimeout(_._animation);
|
||||||
|
} else {
|
||||||
|
var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame;
|
||||||
|
cancelAnimationFrame(_._animation);
|
||||||
|
}
|
||||||
|
|
||||||
|
_._animation = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws the plugin particles.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._draw = function () {
|
||||||
|
var _ = this,
|
||||||
|
element = _.element,
|
||||||
|
parentWidth = (element.offsetParent) ? element.offsetParent.clientWidth : element.clientWidth,
|
||||||
|
parentHeight = (element.offsetParent) ? element.offsetParent.clientHeight : element.clientHeight,
|
||||||
|
showParticles = _.options.showParticles,
|
||||||
|
storage = _.storage;
|
||||||
|
|
||||||
|
if (element.offsetParent && element.offsetParent.nodeName === 'BODY') {
|
||||||
|
parentHeight = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.context.clearRect(0, 0, element.width, element.height);
|
||||||
|
_.context.beginPath();
|
||||||
|
|
||||||
|
for (var i = storage.length; i--;) {
|
||||||
|
var particle = storage[i];
|
||||||
|
|
||||||
|
if (showParticles) {
|
||||||
|
particle._draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
particle._updateCoordinates(parentWidth, parentHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_.options.connectParticles) {
|
||||||
|
storage.sort(particleCompareFunc);
|
||||||
|
_._updateEdges();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates the edges.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Plugin.prototype._updateEdges = function () {
|
||||||
|
var _ = this,
|
||||||
|
minDistance = _.options.minDistance,
|
||||||
|
sqrt = Math.sqrt,
|
||||||
|
abs = Math.abs,
|
||||||
|
storage = _.storage,
|
||||||
|
storageLength = storage.length;
|
||||||
|
|
||||||
|
for (var i = 0; i < storageLength; i++) {
|
||||||
|
var p1 = storage[i];
|
||||||
|
|
||||||
|
for (var j = i + 1; j < storageLength; j++) {
|
||||||
|
var p2 = storage[j],
|
||||||
|
distance, r = p1.x - p2.x, dy = p1.y - p2.y;
|
||||||
|
|
||||||
|
distance = sqrt(r * r + dy * dy);
|
||||||
|
|
||||||
|
if (abs(r) > minDistance) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (distance <= minDistance) {
|
||||||
|
_._drawEdge(p1, p2, (1.2 - distance / minDistance));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Draws an edge between two points.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param {Particle} p1
|
||||||
|
* @param {Particle} p2
|
||||||
|
* @param {number} opacity
|
||||||
|
*/
|
||||||
|
Plugin.prototype._drawEdge = function (p1, p2, opacity) {
|
||||||
|
var _ = this,
|
||||||
|
gradient = _.context.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
|
||||||
|
|
||||||
|
var color1 = this._hex2rgb(p1.color);
|
||||||
|
var color2 = this._hex2rgb(p2.color);
|
||||||
|
|
||||||
|
gradient.addColorStop(0, 'rgba(' + color1.r + ',' + color1.g + ',' + color1.b + ',' + opacity + ')');
|
||||||
|
gradient.addColorStop(1, 'rgba(' + color2.r + ',' + color2.g + ',' + color2.b + ',' + opacity + ')');
|
||||||
|
|
||||||
|
_.context.beginPath();
|
||||||
|
_.context.strokeStyle = gradient;
|
||||||
|
_.context.moveTo(p1.x, p1.y);
|
||||||
|
_.context.lineTo(p2.x, p2.y);
|
||||||
|
_.context.stroke();
|
||||||
|
_.context.fill();
|
||||||
|
_.context.closePath();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Merges the keys of two objects.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param {object} source
|
||||||
|
* @param {object} obj
|
||||||
|
*/
|
||||||
|
Plugin.prototype._extend = function (source, obj) {
|
||||||
|
Object.keys(obj).forEach(function (key) {
|
||||||
|
source[key] = obj[key];
|
||||||
|
});
|
||||||
|
|
||||||
|
return source;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Converts a hex string to a rgb object.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param {string} hex
|
||||||
|
* @return {object}
|
||||||
|
*/
|
||||||
|
Plugin.prototype._hex2rgb = function (hex) {
|
||||||
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||||
|
|
||||||
|
return result ? {
|
||||||
|
r: parseInt(result[1], 16),
|
||||||
|
g: parseInt(result[2], 16),
|
||||||
|
b: parseInt(result[3], 16)
|
||||||
|
} : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Represents a single particle.
|
||||||
|
*
|
||||||
|
* @constructor
|
||||||
|
* @param {object} context
|
||||||
|
* @param {object} options
|
||||||
|
*/
|
||||||
|
Particle = function (context, options) {
|
||||||
|
var _ = this,
|
||||||
|
random = Math.random,
|
||||||
|
speed = options.speed,
|
||||||
|
color = (options.color instanceof Array) ? options.color[Math.floor(Math.random() * options.color.length)] : options.color;
|
||||||
|
|
||||||
|
_.context = context;
|
||||||
|
_.options = options;
|
||||||
|
|
||||||
|
var canvas = document.querySelector(options.selector);
|
||||||
|
_.x = (canvas.offsetParent) ? random() * canvas.offsetParent.clientWidth : random() * canvas.clientWidth;
|
||||||
|
|
||||||
|
if (canvas.offsetParent && canvas.offsetParent.nodeName === 'BODY') {
|
||||||
|
_.y = random() * window.innerHeight;
|
||||||
|
} else {
|
||||||
|
_.y = (canvas.offsetParent) ? random() * canvas.offsetParent.clientHeight : random() * canvas.clientHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.vx = random() * speed * 2 - speed;
|
||||||
|
_.vy = random() * speed * 2 - speed;
|
||||||
|
_.radius = random() * random() * options.sizeVariations;
|
||||||
|
_.color = color;
|
||||||
|
|
||||||
|
_._draw();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The particles draw function (renders the circle).
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
Particle.prototype._draw = function () {
|
||||||
|
var _ = this;
|
||||||
|
|
||||||
|
_.context.save();
|
||||||
|
_.context.translate(_.x, _.y);
|
||||||
|
_.context.moveTo(0, 0);
|
||||||
|
_.context.beginPath();
|
||||||
|
_.context.arc(0, 0, _.radius, 0, Math.PI * 2, false);
|
||||||
|
_.context.fillStyle = _.color;
|
||||||
|
_.context.fill();
|
||||||
|
_.context.restore();
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This updates the particles coordinates.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @param parentWidth
|
||||||
|
* @param parentHeight
|
||||||
|
*/
|
||||||
|
Particle.prototype._updateCoordinates = function (parentWidth, parentHeight) {
|
||||||
|
var _ = this,
|
||||||
|
|
||||||
|
x = _.x + this.vx,
|
||||||
|
y = _.y + this.vy,
|
||||||
|
radius = _.radius;
|
||||||
|
|
||||||
|
if (x + radius > parentWidth) {
|
||||||
|
x = radius;
|
||||||
|
} else if (x - radius < 0) {
|
||||||
|
x = parentWidth - radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (y + radius > parentHeight) {
|
||||||
|
y = radius;
|
||||||
|
} else if (y - radius < 0) {
|
||||||
|
y = parentHeight - radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
_.x = x;
|
||||||
|
_.y = y;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A polyfill for requestAnimFrame.
|
||||||
|
*
|
||||||
|
* @return {function}
|
||||||
|
*/
|
||||||
|
window.requestAnimFrame = (function () {
|
||||||
|
var _ = this,
|
||||||
|
requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;
|
||||||
|
|
||||||
|
if (requestAnimationFrame) {
|
||||||
|
return requestAnimationFrame;
|
||||||
|
}
|
||||||
|
|
||||||
|
_._usingPolyfill = true;
|
||||||
|
|
||||||
|
return function (callback) {
|
||||||
|
return window.setTimeout(callback, 1000 / 60);
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
return new Plugin();
|
||||||
|
})(window, document);
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
define('Particles', function () { return Particles; });
|
||||||
|
} else if (typeof module !== 'undefined' && module.exports) {
|
||||||
|
module.exports = Particles;
|
||||||
|
} else {
|
||||||
|
window.Particles = Particles;
|
||||||
|
}
|
||||||
|
})();
|
41
styles.css
41
styles.css
|
@ -1,41 +0,0 @@
|
||||||
body {
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.beginningtext {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.mainimage {
|
|
||||||
text-align: center;
|
|
||||||
padding: 5px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainheader {
|
|
||||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
|
||||||
font-size: 2em;
|
|
||||||
text-align: center;
|
|
||||||
padding: 5px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.secondheader {
|
|
||||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.launcherimage {
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
width: 70%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.githubpagehyperlink {
|
|
||||||
font-family: 'IBM Plex Sans Hebrew', sans-serif;
|
|
||||||
color: white;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
Loading…
Reference in a new issue