Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
(function() { var Particles, work, bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; Particles = (function() { function Particles() { this.render = bind(this.render, this); this.animate = bind(this.animate, this); this.rotateRadians = bind(this.rotateRadians, this); this.setStage = bind(this.setStage, this); this.setLighting = bind(this.setLighting, this); this.getTexture = bind(this.getTexture, this); this.addKnot = bind(this.addKnot, this); this.addStars = bind(this.addStars, this); this.setActors = bind(this.setActors, this); this.move = bind(this.move, this); this.setStage(); this.setLighting(); this.setActors(); this.animate(); this.move(); this.render(); } Particles.prototype.move = function() { anime({ loop: true, targets: this.starSystem.rotation, z: [this.rotateRadians(360), this.rotateRadians(0)], x: [this.rotateRadians(360), this.rotateRadians(0)], y: [this.rotateRadians(360), this.rotateRadians(0)], duration: 20000, easing: "linear" }); anime({ loop: true, targets: this.torusSystem.rotation, z: [this.rotateRadians(-360), this.rotateRadians(0)], x: [this.rotateRadians(-360), this.rotateRadians(0)], y: [this.rotateRadians(-360), this.rotateRadians(0)], duration: 30000, easing: "linear" }); return anime({ loop: true, targets: this.sphereSystem.rotation, z: [this.rotateRadians(360), this.rotateRadians(0)], x: [this.rotateRadians(360), this.rotateRadians(0)], y: [this.rotateRadians(360), this.rotateRadians(0)], duration: 30000, easing: "linear" }); }; Particles.prototype.setActors = function() { this.addKnot(); return this.addStars(); }; Particles.prototype.addStars = function() { var i, j, materials, x, y, z; this.geometry = new THREE.Geometry(); materials = new THREE.PointsMaterial({ color: 0xffffff, size: 1, transparent: true, blending: THREE.AdditiveBlending, map: this.getTexture(), depthTest: false }); for (i = j = 0; j <= 1000; i = ++j) { x = Math.random() * 100 - 50; y = Math.random() * 100 - 50; z = Math.random() * 100 - 50; this.geometry.vertices.push(new THREE.Vector3(x, y, z)); } this.starSystem = new THREE.Points(this.geometry, materials); this.starSystem.sortParticles = true; return this.scene.add(this.starSystem); }; Particles.prototype.addKnot = function() { var materials; this.geometry = new THREE.SphereGeometry(1, 50, 50); materials = new THREE.PointsMaterial({ color: 0xffffff, size: 1, transparent: true, blending: THREE.AdditiveBlending, map: this.getTexture(), depthTest: false }); this.sphereSystem = new THREE.Points(this.geometry, materials); this.sphereSystem.sortParticles = true; this.scene.add(this.sphereSystem); this.geometry = new THREE.TorusKnotGeometry(5, 10, 400, 1, 4, 3); materials = new THREE.PointsMaterial({ color: 0xffffff, size: 1, transparent: true, blending: THREE.AdditiveBlending, map: this.getTexture(), depthTest: false }); this.torusSystem = new THREE.Points(this.geometry, materials); this.torusSystem.sortParticles = true; return this.scene.add(this.torusSystem); }; Particles.prototype.getTexture = function() { var canvas, context, gradient, texture; canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; context = canvas.getContext('2d'); gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2); gradient.addColorStop(0, 'rgba(255,255,255,1)'); gradient.addColorStop(0.2, 'rgba(200,255,255,1)'); gradient.addColorStop(0.4, 'rgba(0,0,124,1)'); gradient.addColorStop(1, 'rgba(0,0,0,1)'); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); texture = new THREE.Texture(canvas); texture.needsUpdate = true; return texture; }; Particles.prototype.setLighting = function() { this.ambientLight = new THREE.AmbientLight("#ffffff", 0.5); return this.scene.add(this.ambientLight); }; Particles.prototype.setStage = function() { this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("particles"), antialias: true }); this.renderer.setClearColor("#000000"); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.shadowMap.enabled = true; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); return this.camera.position.z = 50; }; Particles.prototype.rotateRadians = function(deg) { return deg * (Math.PI / 180); }; Particles.prototype.animate = function() { requestAnimationFrame(this.animate); return this.render(); }; Particles.prototype.render = function() { return this.renderer.render(this.scene, this.camera); }; return Particles; })(); work = new Particles; }).call(this);
CSS
body { overflow: hidden; }
HTML
This is a canvas. Sorry your browser does not support this tag
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