Forked from: Maran.Emil's forked: canvas dot mesh View Diff (3) forked: canvas dot mesh ryooooooya Follow 2016-12-13 14:44:34 License: MIT License Fork0 Fav2 View541 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 6 lines HTML 183 lines CSS 10 lines forked: canvas dot mesh // forked from Maran.Emil's "forked: canvas dot mesh" http://jsdo.it/Maran.Emil/f5K7 // forked from mrwut4's "forked: canvas dot mesh" http://jsdo.it/mrwut4/qya0 // forked from mrwut4's "forked: canvas dot mesh" http://jsdo.it/mrwut4/4ifY // forked from mrwut4's "canvas dot mesh" http://jsdo.it/mrwut4/bizb // forked from mrwut4's "canvas fireballs" http://jsdo.it/mrwut4/canvas-fireballs <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>canvas dot mesh</title> <style type="text/css"> body { background-color: #fff; margin: 0px; overflow: hidden; } </style> </head> <body> <script> var canvas = document.createElement("canvas"), context = canvas.getContext("2d"); var width = window.innerWidth, height = window.innerHeight; canvas.width = width; canvas.height = height; document.body.appendChild(canvas); var particle; var particlePrev; var particleList = []; for(var i = 0; i < 100; ++i) { particle = new ParticleObject(i, width * .5, height * .5); particle.draw(); particleList.push(particle); } setInterval(intervalHandler, 1000 / 30); function intervalHandler() { // context.fillStyle = "#ffffff"; // context.beginPath(); // context.fillRect(width * .5, height * .5, 1, 1); // context.closePath(); // context.fill(); //* context.clearRect(0, 0, width, height); /*/ context.globalCompositeOperation = "source-atop"; context.fillStyle = "rgba(0, 0, 0, 0.3)"; context.fillRect(0, 0, width, height); context.fill(); //*/ // context.globalCompositeOperation = "lighter"; for(var i = 0; i < particleList.length; ++i) { particle = particleList[i]; particle.draw(); particle.connect(); } } function ParticleObject(pIndex, pX, pY) { this.index = pIndex + Math.random(); this.ticker = (Math.PI / 2); this.x = pX; this.y = pY; this.size = 1; this.color = "#ffffff"; this.arcX = randomRange(-1, 1); this.arcY = randomRange(-1, 1); this.distance = 0; this.numConnections = 0; this.connectedDots = []; this.range = 6; this.speed = .002; this.draw = function() { context.moveTo(this.x, this.y); //context.fillStyle = this.radgrad; context.fillStyle = this.color; /* context.beginPath(); context.arc(this.x, this.y, this.size, 0, Math.PI * 2, true); context.closePath(); context.fill(); */ this.ticker += this.speed; this.ticker = this.ticker == 1 ? 0 : this.ticker; this.x += Math.sin(Math.cos(this.index * .1) + (this.ticker * this.index * .5)) * this.range; this.y += Math.cos(Math.cos(this.index * .4) + (this.ticker * this.index * .62)) * this.range; // this.radgrad = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); // this.radgrad.addColorStop(0, '#EEFF00'); // this.radgrad.addColorStop(.8, '#FF0000'); // this.radgrad.addColorStop(1, '#000000'); } this.connect = function() { this.numConnections = 0; this.connectedDots = []; this.isFilled = false; for(var i = 0; i < particleList.length; ++i) { particle = particleList[i]; this.distance = Math.sqrt( Math.pow(particle.x - this.x, 2) + Math.pow(particle.y - this.y, 2) ); if(this.numConnections < 3 && this.distance < 100) { this.numConnections++; this.connectedDots.push(particle); /* context.strokeStyle = "rgba(255,255,255," + (this.distance * 0.003).toString() + ")"; context.beginPath(); context.moveTo(this.x, this.y); context.lineTo(particle.x, particle.y); context.stroke(); */ } if(this.numConnections == 3 && this.isFilled == false) { context.beginPath(); context.fillStyle = "rgba(160,220,250,.1)"; context.moveTo(this.connectedDots[0].x, this.connectedDots[0].y); for(var j = 1; j < this.connectedDots.length; ++j) context.lineTo(this.connectedDots[j].x, this.connectedDots[j].y); context.lineTo(this.connectedDots[0].x, this.connectedDots[0].y); context.fill(); this.isFilled = true; } /* */ //particle.draw(); } } } function randomRange(pFrom, pTo) { return pFrom + (Math.random()*(pTo-pFrom)); } </script><canvas height="600" width="600"></canvas> </body></html> forked: canvas dot mesh * { margin: 0; padding: 0; border: 0; } body { background: # fff; font: 30px sans-serif; } // forked from Maran.Emil's "forked: canvas dot mesh" http://jsdo.it/Maran.Emil/f5K7 // forked from mrwut4's "forked: canvas dot mesh" http://jsdo.it/mrwut4/qya0 // forked from mrwut4's "forked: canvas dot mesh" http://jsdo.it/mrwut4/4ifY // forked from mrwut4's "canvas dot mesh" http://jsdo.it/mrwut4/bizb // forked from mrwut4's "canvas fireballs" http://jsdo.it/mrwut4/canvas-fireballs <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>canvas dot mesh</title> <style type="text/css"> body { background-color: #fff; margin: 0px; overflow: hidden; } </style> </head> <body> <script> var canvas = document.createElement("canvas"), context = canvas.getContext("2d"); var width = window.innerWidth, height = window.innerHeight; canvas.width = width; canvas.height = height; document.body.appendChild(canvas); var particle; var particlePrev; var particleList = []; for(var i = 0; i < 100; ++i) { particle = new ParticleObject(i, width * .5, height * .5); particle.draw(); particleList.push(particle); } setInterval(intervalHandler, 1000 / 30); function intervalHandler() { // context.fillStyle = "#ffffff"; // context.beginPath(); // context.fillRect(width * .5, height * .5, 1, 1); // context.closePath(); // context.fill(); //* context.clearRect(0, 0, width, height); /*/ context.globalCompositeOperation = "source-atop"; context.fillStyle = "rgba(0, 0, 0, 0.3)"; context.fillRect(0, 0, width, height); context.fill(); //*/ // context.globalCompositeOperation = "lighter"; for(var i = 0; i < particleList.length; ++i) { particle = particleList[i]; particle.draw(); particle.connect(); } } function ParticleObject(pIndex, pX, pY) { this.index = pIndex + Math.random(); this.ticker = (Math.PI / 2); this.x = pX; this.y = pY; this.size = 1; this.color = "#ffffff"; this.arcX = randomRange(-1, 1); this.arcY = randomRange(-1, 1); this.distance = 0; this.numConnections = 0; this.connectedDots = []; this.range = 6; this.speed = .002; this.draw = function() { context.moveTo(this.x, this.y); //context.fillStyle = this.radgrad; context.fillStyle = this.color; /* context.beginPath(); context.arc(this.x, this.y, this.size, 0, Math.PI * 2, true); context.closePath(); context.fill(); */ this.ticker += this.speed; this.ticker = this.ticker == 1 ? 0 : this.ticker; this.x += Math.sin(Math.cos(this.index * .1) + (this.ticker * this.index * .5)) * this.range; this.y += Math.cos(Math.cos(this.index * .4) + (this.ticker * this.index * .62)) * this.range; // this.radgrad = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); // this.radgrad.addColorStop(0, '#EEFF00'); // this.radgrad.addColorStop(.8, '#FF0000'); // this.radgrad.addColorStop(1, '#000000'); } this.connect = function() { this.numConnections = 0; this.connectedDots = []; this.isFilled = false; for(var i = 0; i < particleList.length; ++i) { particle = particleList[i]; this.distance = Math.sqrt( Math.pow(particle.x - this.x, 2) + Math.pow(particle.y - this.y, 2) ); if(this.numConnections < 3 && this.distance < 100) { this.numConnections++; this.connectedDots.push(particle); /* context.strokeStyle = "rgba(255,255,255," + (this.distance * 0.003).toString() + ")"; context.beginPath(); context.moveTo(this.x, this.y); context.lineTo(particle.x, particle.y); context.stroke(); */ } if(this.numConnections == 3 && this.isFilled == false) { context.beginPath(); context.fillStyle = "rgba(160,220,250,.1)"; context.moveTo(this.connectedDots[0].x, this.connectedDots[0].y); for(var j = 1; j < this.connectedDots.length; ++j) context.lineTo(this.connectedDots[j].x, this.connectedDots[j].y); context.lineTo(this.connectedDots[0].x, this.connectedDots[0].y); context.fill(); this.isFilled = true; } /* */ //particle.draw(); } } } function randomRange(pFrom, pTo) { return pFrom + (Math.random()*(pTo-pFrom)); } </script><canvas height="600" width="600"></canvas> </body></html> * { margin: 0; padding: 0; border: 0; } body { background: # fff; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ryooooooya Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/oKHh/js"></script> animation art&design canvas dot mesh particle Discussion Questions on this code? Tags Efects animation art&design canvas dot mesh particle Favorite by Takuya.Takah qiu.lin84: canvasEfects