Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
'use strict'; var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); var _get = function get(_x7, _x8, _x9) { var _again = true; _function: while (_again) { var object = _x7, property = _x8, receiver = _x9; desc = parent = getter = undefined; _again = false; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x7 = parent; _x8 = property; _x9 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var PI_TWO = Math.PI * 2; var TO_DEG = 180 / Math.PI; var TO_RAD = Math.PI / 180; var fps = 120; var r = new Random(Random.engines.mt19937().autoSeed()); var Vector2 = function Vector2() { var x = arguments[0] === undefined ? 0 : arguments[0]; var y = arguments[1] === undefined ? 0 : arguments[1]; _classCallCheck(this, Vector2); this.x = x; this.y = y; }; var Node = (function (_Vector2) { function Node(_x, _x2, worm, index) { var x = arguments[0] === undefined ? 0 : arguments[0]; var y = arguments[1] === undefined ? 0 : arguments[1]; _classCallCheck(this, Node); _get(Object.getPrototypeOf(Node.prototype), 'constructor', this).call(this, x, y); this.worm = worm; this.index = index; this.angle = 0; } _inherits(Node, _Vector2); _createClass(Node, [{ key: 'update', value: function update() { if (this.index != 0 && typeof this.worm.nodes[this.index - 1] != 'undefined') { this.x += (this.worm.nodes[this.index - 1].x - this.x) * 0.16; this.y += (this.worm.nodes[this.index - 1].y - this.y) * 0.05; } } }]); return Node; })(Vector2); var Worm = (function () { function Worm() { _classCallCheck(this, Worm); this.nodes = []; for (var i = 0; i < 10; i++) { this.nodes[i] = new Node(0, 0, this, i); }; this.reset(); } _createClass(Worm, [{ key: 'reset', value: function reset() { this.x = r.integer(0, canvas.width); this.y = r.integer(canvas.height, canvas.width + canvas.height); this.lineLength = r.integer(20, 80); this.speed = r.integer(2, 6); this.ocilationRadiusCos = r.integer(40, 100); this.ocilationRadiusSin = r.real(1.2, 1.6); this.angleIncremente = r.real(0.1, 0.15); this.colorHue = r.real(0, 360); this.colorSaturation = r.bool() ? 1 : 50; this.nodes[0].angle = 0; this.nodes[0].x = this.x + Math.cos(this.nodes[0].angle) * this.lineLength; this.nodes[0].y = this.y; for (var i = 0; i < this.nodes.length; i++) { this.nodes[i].x = this.x; this.nodes[i].y = this.y + i * this.lineLength; }; } }, { key: 'update', value: function update() { this.nodes[0].x = this.x + Math.cos(this.nodes[0].angle) * this.ocilationRadiusCos; this.nodes[0].angle += this.angleIncremente; this.nodes[0].y -= Math.cos(this.nodes[0].angle) * this.ocilationRadiusSin + this.speed; for (var i = 0; i < this.nodes.length; i++) { this.nodes[i].update(); } if (this.nodes[this.nodes.length - 1].y < -this.lineLength) { this.reset(); } this.colorHue += this.ocilationRadiusSin / 2; } }, { key: 'draw', value: function draw() { ctx.beginPath(); ctx.lineWidth = 4; ctx.strokeStyle = 'hsl(' + this.colorHue + ', ' + this.colorSaturation + '%, 50%)'; for (var i = 0; i < this.nodes.length; i++) { ctx.moveTo(this.nodes[i].x, this.nodes[i].y); if (typeof this.nodes[i + 1] != 'undefined') { ctx.lineTo(this.nodes[i + 1].x, this.nodes[i + 1].y); } }; ctx.closePath(); ctx.stroke(); } }]); return Worm; })(); var APP = (function () { function APP() { _classCallCheck(this, APP); this.setCanvasSize(window.innerWidth, window.innerHeight); this.worms = []; for (var i = 0; i < 20; i++) { this.worms[i] = new Worm(); }; requestAnimationFrame(this.step.bind(this)); } _createClass(APP, [{ key: 'setCanvasSize', value: function setCanvasSize() { var width = arguments[0] === undefined ? 540 : arguments[0]; var height = arguments[1] === undefined ? 540 : arguments[1]; canvas.width = width; canvas.height = height; } }, { key: 'update', value: function update() { for (var i = 0; i < this.worms.length; i++) { this.worms[i].update(); }; } }, { key: 'draw', value: function draw() { for (var i = 0; i < this.worms.length; i++) { this.worms[i].draw(); }; } }, { key: 'step', value: function step() { requestAnimationFrame(this.step.bind(this)); var delta = Date.now() - this.lastTick; this.lastTick = Date.now(); var dt = delta / 1000; this.elapsed = dt; ctx.fillStyle = '#181818'; ctx.fillRect(0, 0, canvas.width, canvas.height); this.update(); this.draw(); } }]); return APP; })(); var app = new APP(); window.addEventListener('resize', function () { app.setCanvasSize(window.innerWidth, window.innerHeight); }, false);
CSS
body{ display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; background: #181818; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email