-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from adriennek/master
tabs to spaces
- Loading branch information
Showing
3 changed files
with
103 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,3 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import Snow from './src/snow'; | ||
|
|
||
| ReactDOM.render(<Snow />, document.getElementById('react-snow-effect')); | ||
|
|
||
| exports = Snow; | ||
| exports = Snow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,102 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| var React = require('react'); | ||
|
|
||
| export default React.createClass({ | ||
|
|
||
| componentDidMount: function () { | ||
| //canvas init | ||
| var canvas = document.getElementById("canvas"); | ||
| var ctx = canvas.getContext("2d"); | ||
| componentDidMount: function () { | ||
| //canvas init | ||
| var canvas = document.getElementById("canvas"); | ||
| var ctx = canvas.getContext("2d"); | ||
|
|
||
| //canvas dimensions | ||
| var W = document.innerWidth || 1600; | ||
| var H = document.innerHeight || 500; | ||
| canvas.width = W; | ||
| canvas.height = H; | ||
| //canvas dimensions | ||
| var W = document.innerWidth || 1600; | ||
| var H = document.innerHeight || 500; | ||
| canvas.width = W; | ||
| canvas.height = H; | ||
|
|
||
| //snowflake particles | ||
| var mp = 25; //max particles | ||
| var particles = []; | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| particles.push({ | ||
| x: Math.random()*W, //x-coordinate | ||
| y: Math.random()*H, //y-coordinate | ||
| r: Math.random()*4+1, //radius | ||
| d: Math.random()*mp //density | ||
| }) | ||
| } | ||
| //snowflake particles | ||
| var mp = 25; //max particles | ||
| var particles = []; | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| particles.push({ | ||
| x: Math.random()*W, //x-coordinate | ||
| y: Math.random()*H, //y-coordinate | ||
| r: Math.random()*4+1, //radius | ||
| d: Math.random()*mp //density | ||
| }) | ||
| } | ||
|
|
||
| //Lets draw the flakes | ||
| function draw() | ||
| { | ||
| ctx.clearRect(0, 0, W, H); | ||
| //Lets draw the flakes | ||
| function draw() | ||
| { | ||
| ctx.clearRect(0, 0, W, H); | ||
|
|
||
| ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; | ||
| ctx.beginPath(); | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| var p = particles[i]; | ||
| ctx.moveTo(p.x, p.y); | ||
| ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); | ||
| } | ||
| ctx.fill(); | ||
| update(); | ||
| } | ||
| ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; | ||
| ctx.beginPath(); | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| var p = particles[i]; | ||
| ctx.moveTo(p.x, p.y); | ||
| ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); | ||
| } | ||
| ctx.fill(); | ||
| update(); | ||
| } | ||
|
|
||
| //Function to move the snowflakes | ||
| //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes | ||
| var angle = 0; | ||
| function update() | ||
| { | ||
| angle += 0.01; | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| var p = particles[i]; | ||
| //Updating X and Y coordinates | ||
| //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards | ||
| //Every particle has its own density which can be used to make the downward movement different for each flake | ||
| //Lets make it more random by adding in the radius | ||
| p.y += Math.cos(angle+p.d) + 1 + p.r/2; | ||
| p.x += Math.sin(angle) * 2; | ||
| //Function to move the snowflakes | ||
| //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes | ||
| var angle = 0; | ||
| function update() | ||
| { | ||
| angle += 0.01; | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| var p = particles[i]; | ||
| //Updating X and Y coordinates | ||
| //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards | ||
| //Every particle has its own density which can be used to make the downward movement different for each flake | ||
| //Lets make it more random by adding in the radius | ||
| p.y += Math.cos(angle+p.d) + 1 + p.r/2; | ||
| p.x += Math.sin(angle) * 2; | ||
|
|
||
| //Sending flakes back from the top when it exits | ||
| //Lets make it a bit more organic and let flakes enter from the left and right also. | ||
| if(p.x > W+5 || p.x < -5 || p.y > H) | ||
| { | ||
| if(i%3 > 0) //66.67% of the flakes | ||
| { | ||
| particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; | ||
| } | ||
| else | ||
| { | ||
| //If the flake is exitting from the right | ||
| if(Math.sin(angle) > 0) | ||
| { | ||
| //Enter from the left | ||
| particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; | ||
| } | ||
| else | ||
| { | ||
| //Enter from the right | ||
| particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| //Sending flakes back from the top when it exits | ||
| //Lets make it a bit more organic and let flakes enter from the left and right also. | ||
| if(p.x > W+5 || p.x < -5 || p.y > H) | ||
| { | ||
| if(i%3 > 0) //66.67% of the flakes | ||
| { | ||
| particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; | ||
| } | ||
| else | ||
| { | ||
| //If the flake is exitting from the right | ||
| if(Math.sin(angle) > 0) | ||
| { | ||
| //Enter from the left | ||
| particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; | ||
| } | ||
| else | ||
| { | ||
| //Enter from the right | ||
| particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| //animation loop | ||
| setInterval(draw, 33); | ||
| }, | ||
| //animation loop | ||
| setInterval(draw, 33); | ||
| }, | ||
|
|
||
| render: function() { | ||
| var snowStyles = { | ||
| position: 'absolute', | ||
| top: 0 | ||
| } | ||
| return ( | ||
| <canvas id="canvas" style={snowStyles}></canvas> | ||
| ) | ||
| } | ||
| render: function() { | ||
| var snowStyles = { | ||
| position: 'absolute', | ||
| top: 0 | ||
| } | ||
| return ( | ||
| <canvas id="canvas" style={snowStyles}></canvas> | ||
| ) | ||
| } | ||
|
|
||
| }); |