<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Template</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="js/canvas.bundle.js"></script>
</body>
</html>
(function(modules)
{ // webpackBootstrap
// The module cache
var installedModules = {};
// The require function
function __webpack_require__(moduleId)
{
// Check if module is in cache
if(installedModules[moduleId])
{
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] =
{
i: moduleId,
l: false,
exports: {}
};
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
// expose the module cache
__webpack_require__.c = installedModules;
// identity function for calling harmony imports with the correct context
__webpack_require__.i = function(value) { return value; };
// define getter function for harmony exports
__webpack_require__.d = function(exports, name, getter)
{
if(!__webpack_require__.o(exports, name))
{
Object.defineProperty(exports, name,
{
configurable: false,
enumerable: true,
get: getter
});
}
};
// getDefaultExport function for compatibility with non-harmony modules
__webpack_require__.n = function(module)
{
var getter = module && module.__esModule ?
function getDefault() { return module['default']; } :
function getModuleExports() { return module; };
__webpack_require__.d(getter, 'a', getter);
return getter;
};
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
// __webpack_public_path__
__webpack_require__.p = "";
// Load entry module and return exports
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function(module, exports, __webpack_require__) {
"use strict";
// Initial Setup
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
// Variables
var mouse = {
x: innerWidth / 2,
y: innerHeight / 2
};
var colors = ['#4F297C', '#5D5D5D', '#333333', '#D6D5DB'];
// Event Listeners
addEventListener('mousemove', function (event)
{
mouse.x = event.clientX;
mouse.y = event.clientY;
});
addEventListener('resize', function ()
{
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
});
// Utility Functions
function randomIntFromRange(min, max)
{
return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomColor(colors)
{
return colors[Math.floor(Math.random() * colors.length)];
}
function distance(x1, y1, x2, y2)
{
var xDist = x2 - x1;
var yDist = y2 - y1;
return Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2));
}
// Objects
function Particle(x, y, radius, color)
{
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.radians = Math.random() * Math.PI * 2;
this.velocity = 0.05;
this.distanceFromCenter = randomIntFromRange(50, 120);
this.lastMouse = {x: x, y: y};
this.update = function ()
{
const lastPoint = {x: this.x, y: this.y};
//Move points over time
this.radians += this.velocity;
//Drag effect (fixes the creepiness)
this.lastMouse.x += (mouse.x - this.lastMouse.x) * 0.05;
this.lastMouse.y += (mouse.y - this.lastMouse.y) * 0.05;
//Circular Motion
this.x = this.lastMouse.x + Math.tan(this.radians) * this.distanceFromCenter;
this.y = this.lastMouse.y + Math.cos(this.radians) * this.distanceFromCenter;
this.draw(lastPoint);
};
this.draw = lastPoint => {
c.beginPath();
c.strokeStyle = this.color;
c.lineWidth = this.radius;
c.moveTo(lastPoint.x, lastPoint.y);
c.lineTo(this.x, this.y);
c.stroke();
c.closePath();
};
}
// Implementation
var particles = void 0;
function init()
{
particles = [];
for (var i = 0; i < 50; i++)
{
const radius = (Math.random() * 4) + 2;
particles.push(new Particle(canvas.width / 2, canvas.height / 2, radius, randomColor(colors)));
}
console.log(particles);
}
// Animation Loop
function animate()
{
requestAnimationFrame(animate);
c.fillStyle = 'rgba(255, 255, 255, 0.05';
c.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
});
}
init();
animate();
})
]);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.