Skip to content

Commit

Permalink
changed identation to spaces, improved velocity modulators
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucastakejame
lucastakejame committed Jan 29, 2018
1 parent a164156 commit f3efb18
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 153 deletions.
16 changes: 8 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<html>
<head>
<title></title>
<script type="text/javascript" src="particle.js"></script>
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
html, body {
margin: 0px;
}
<title></title>
<script type="text/javascript" src="particle.js"></script>
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
html, body {
margin: 0px;
}

</style>
</style>
</head>
<body>
<canvas id="canvas" style="position: absolute; left: 0; top: 0; z-index: 1; background-color: transparent;"></canvas>
Expand Down
317 changes: 175 additions & 142 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,145 +1,178 @@
window.onload = function(){

var canvas = document.getElementById("canvas"),
paintcanvas = document.getElementById("paintcanvas"),
context = canvas.getContext("2d"),
paintcontext = paintcanvas.getContext("2d"),
width = canvas.width = paintcanvas.width = window.innerWidth,
height = canvas.height = paintcanvas.height = window.innerHeight,
particles = [],
numParticles = 100;

context.translate(width / 2, height / 2);
paintcontext.translate(width / 2, height / 2);

// initialing particles
for(var i = 0; i < numParticles; i++) {
particles.push(particle.create(0, 0, Math.random()*4 +1, Math.random() * Math.PI *2, 0));
}

//global vars
var mousex = width/2;
var mousey = height/2;
var applyForce = false;
var paint = false;
var shouldBounce = true;

// events
document.addEventListener("mousedown", function(event){
if(event.button == 0){
applyForce = true;
mousex = event.clientX - width/2;
mousey = event.clientY - height/2;
}
if(event.button == 2){
paint = true;
}
});
document.addEventListener("mouseup", function(event){
if(event.button == 0){
applyForce = false;
}
if(event.button == 2){
paint = false;
}
});

document.body.addEventListener("mousemove", function(event) {
mousex = event.clientX - width/2;
mousey = event.clientY - height/2;
} );

document.body.addEventListener("keydown", function(event) {
switch(event.key){
case 'Backspace': //backspace
{
paintcontext.clearRect(-width / 2, -height / 2, width, height);
}
break;
case 'b':
{
shouldBounce ^= 1;
}
break;
case 'x':
{
for(var i = 0; i < numParticles; i++) {
particles[i].reset(mousex, mousey);
}
}
break;
case 't':
{
var turnDegrees = 10;
for(var i = 0; i < numParticles; i++) {
particles[i].rotate(turnDegrees);
}
}
break;
case 'ArrowUp':
{
var p = 1.1; // linear interpolation
for(var i = 0; i < numParticles; i++) {
particles[i].xOld = (1-p)*particles[i].x + p*particles[i].xOld;
particles[i].yOld = (1-p)*particles[i].y + p*particles[i].yOld;
}
}
break;
case 'ArrowDown':
{

var p = 0.9; // linear interpolation
for(var i = 0; i < numParticles; i++) {
particles[i].xOld = (1-p)*particles[i].x + p*particles[i].xOld;
particles[i].yOld = (1-p)*particles[i].y + p*particles[i].yOld;
}
}
break;

}
} );

// disables context menu
document.oncontextmenu = function(){
return false;
}

// run once stuff
// paintcontext.fillStyle = "hsla(0%,0%,0%,0)"
paintcontext.clearRect(-width / 2, -height / 2, width, height);

// context.globalCompositeOperation="source-over";
// paintcontext.globalCompositeOperation="destination-over";

update();

function update(){
context.clearRect(-width / 2, -height / 2, width, height);


for (var i = 0; i < numParticles; i++) {
var p = particles[i];

if(applyForce){
var dx = mousex-p.x,
dy = mousey-p.y,
length = Math.sqrt(dx*dx + dy*dy);
dx /= length;
dy /= length;

p.applyForce(0.25*dx, 0.25*dy);
}
p.update(canvas, shouldBounce);

if(paint){
p.paint(paintcontext);
}

p.render(context);

};

requestAnimationFrame(update);

}
var canvas = document.getElementById("canvas"),
paintcanvas = document.getElementById("paintcanvas"),
context = canvas.getContext("2d"),
paintcontext = paintcanvas.getContext("2d"),
width = canvas.width = paintcanvas.width = window.innerWidth,
height = canvas.height = paintcanvas.height = window.innerHeight,
particles = [],
numParticles = 1000;

context.translate(width / 2, height / 2);
paintcontext.translate(width / 2, height / 2);

// initialing particles
for(var i = 0; i < numParticles; i++) {
particles.push(particle.create(0, 0, Math.random()*4 +1, Math.random() * Math.PI *2, 0, 1));
}

//global vars
var mousex = width/2;
var mousey = height/2;
var applyForce = false;
var paint = false;
var shouldBounce = true;

var rotateVelocity = false;
var turnRate = 10;
var increaseVelocity = false;
var increaseFactor = 1.1;
var decreaseVelocity = false;
var decreaseFactor = 0.9;

// events
document.addEventListener("mousedown", function(event){
if(event.button == 0){
applyForce = true;
mousex = event.clientX - width/2;
mousey = event.clientY - height/2;
}
if(event.button == 1){
paintcontext.clearRect(-width / 2, -height / 2, width, height);
}
if(event.button == 2){
paint = true;
}
});
document.addEventListener("mouseup", function(event){
if(event.button == 0){
applyForce = false;
}
if(event.button == 2){
paint = false;
}
});

document.body.addEventListener("mousemove", function(event) {
mousex = event.clientX - width/2;
mousey = event.clientY - height/2;
} );

document.body.addEventListener("keydown", function(event) {
switch(event.key){
case 'Backspace': //backspace
{
paintcontext.clearRect(-width / 2, -height / 2, width, height);
}
break;
case 'b':
{
shouldBounce ^= 1;
}
break;
case 'x':
{
for(var i = 0; i < numParticles; i++) {
particles[i].reset(mousex, mousey);
}
}
break;
case 't':
{
rotateVelocity = true;
}
break;
case 'ArrowUp':
{
increaseVelocity = true;
}
break;
case 'ArrowDown':
{
decreaseVelocity = true;
}
break;

}
} );

document.body.addEventListener("keyup", function(event) {
switch(event.key){
case 't':
{
rotateVelocity = false;
}
break;
case 'ArrowUp':
{
increaseVelocity = false;
}
break;
case 'ArrowDown':
{
decreaseVelocity = false;
}
break;
}
} );

// disables context menu
document.oncontextmenu = function(){
return false;
}

//clear paint canvas
paintcontext.clearRect(-width / 2, -height / 2, width, height);

update();

function update(){
context.clearRect(-width / 2, -height / 2, width, height);


for (var i = 0; i < numParticles; i++) {
var p = particles[i];

if(applyForce){
var dx = mousex-p.x,
dy = mousey-p.y,
length = Math.sqrt(dx*dx + dy*dy);
dx /= length;
dy /= length;

// force of fixed intensity on mouse-position direction
p.applyForce(0.25*dx, 0.25*dy);
}

if(rotateVelocity)
{
p.rotate(turnRate);
}
if(increaseVelocity)
{
var per = increaseFactor; // linear interpolation
p.xOld = (1-per)*p.x + per*p.xOld;
p.yOld = (1-per)*p.y + per*p.yOld;
}
if(decreaseVelocity)
{
var per = decreaseFactor; // linear interpolation
p.xOld = (1-per)*p.x + per*p.xOld;
p.yOld = (1-per)*p.y + per*p.yOld;
}

p.update(canvas, shouldBounce);

if(paint){
p.paint(paintcontext);
}

p.render(context);

};

requestAnimationFrame(update);

}
};
7 changes: 4 additions & 3 deletions particle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@ var particle = {
friction: 1,
gravity: 0,

create: function (x ,y ,speed, direction, grav){
create: function (x ,y ,speed, direction, grav, mass){
var obj = Object.create(this);
obj.x = x;
obj.y = y;
obj.xOld = x - Math.cos(direction)*speed;
obj.yOld = y - Math.sin(direction)*speed;
obj.gravity = grav || 0;
obj.mass = mass;
return obj;
},

Expand All @@ -36,8 +37,8 @@ var particle = {
this.x += vx ;
this.y += vy ;
this.y += this.gravity;
this.x += this.fx;
this.y += this.fy;
this.x += this.fx/this.mass;
this.y += this.fy/this.mass;

this.fx = 0;
this.fy = 0;
Expand Down

0 comments on commit f3efb18

Please sign in to comment.