But as 200_success points out in the comments200_success points out in the comments, you can swap the values so you don't need *-1:
replaced http://codereview.stackexchange.com/ with https://codereview.stackexchange.com/
this.velocity = Math.min((this.velocitydampening - dampening)*-1this.velocity, 0);
Logic behind it:
if (this.velocity > dampening) {
this.velocity -= dampening;
} else {
this.velocity = 0;
}
This can be converted to use Math.max, like so:
this.velocity = Math.max(this.velocity - dampening, 0);
Then we need to invert it. We can combine that by using Math.min:
this.velocity = Math.min((this.velocity - dampening)*-1, 0);
But as 200_success points out in the comments, you can swap the values so you don't need *-1:
this.velocity = Math.min(dampening - this.velocity, 0);
and that greatly simplifies your code. It could use a comment though; something like "inverts and reduces velocity". But you should do that anyway, on a method level.
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1 this.velocity, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}#envelopes {
height: 100%;
width: 100%
}<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script type="text/paperscript" canvas="envelopes" resize>
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1 this.velocity, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}
</script>
<canvas id="envelopes"></canvas>this.velocity = Math.min((this.velocity - dampening)*-1, 0);
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}#envelopes {
height: 100%;
width: 100%
}<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script type="text/paperscript" canvas="envelopes" resize>
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}
</script>
<canvas id="envelopes"></canvas>this.velocity = Math.min(dampening - this.velocity, 0);
Logic behind it:
if (this.velocity > dampening) {
this.velocity -= dampening;
} else {
this.velocity = 0;
}
This can be converted to use Math.max, like so:
this.velocity = Math.max(this.velocity - dampening, 0);
Then we need to invert it. We can combine that by using Math.min:
this.velocity = Math.min((this.velocity - dampening)*-1, 0);
But as 200_success points out in the comments, you can swap the values so you don't need *-1:
this.velocity = Math.min(dampening - this.velocity, 0);
and that greatly simplifies your code. It could use a comment though; something like "inverts and reduces velocity". But you should do that anyway, on a method level.
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min(dampening - this.velocity, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}#envelopes {
height: 100%;
width: 100%
}<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script type="text/paperscript" canvas="envelopes" resize>
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min(dampening - this.velocity, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}
</script>
<canvas id="envelopes"></canvas> var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0;i<envelopes.length;i++) {
0; i < envelopes.length; i++) {
if (envelopes[i].id==thisid == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0;i<envelopes.length;i++) {
0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}#envelopes {
height: 100%;
width: 100%
}<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script type="text/paperscript" canvas="envelopes" resize>
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0;i<envelopes.length;i++) {
0; i < envelopes.length; i++) {
if (envelopes[i].id==thisid == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0;i<envelopes.length;i++) {
0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}
</script>
<canvas id="envelopes"></canvas> var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i,1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening)*-1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0;i<envelopes.length;i++) {
if(envelopes[i].id==this.id){
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0;i<envelopes.length;i++) {
envelopes[i].dead = true;
}
}#envelopes {
height: 100%;
width: 100%
}<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script type="text/paperscript" canvas="envelopes" resize>
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i,1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening)*-1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0;i<envelopes.length;i++) {
if(envelopes[i].id==this.id){
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0;i<envelopes.length;i++) {
envelopes[i].dead = true;
}
}
</script>
<canvas id="envelopes"></canvas>var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}#envelopes {
height: 100%;
width: 100%
}<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<script type="text/paperscript" canvas="envelopes" resize>
var envelopeHeight = 100;
var fallRange = 8.5;
var fallMidpoint = 75;
var maxOnScreen = 6;
var frequency = 4500; //time between falls
var initialVelocity = 0.2;
var gravity = 0.6;
var friction = 0.97;
var dampening = 2;
var lastEnvelope = 0;
var envelopes = [];
function onFrame() {
var onScreen = 0;
for (var i = 0; i < envelopes.length; i++) {
if (!envelopes[i].dead) {
onScreen++;
}
envelopes[i].updateSelf();
}
if (Date.now() > lastEnvelope + frequency && onScreen <= maxOnScreen) {
var dropX = view.bounds.width * (((Math.random() * fallRange) + fallMidpoint) / 100);
var envelope = new Path.Rectangle(new Point(dropX, -envelopeHeight), 100, envelopeHeight);
envelope.position = new Point(dropX, -envelopeHeight);
envelope.fillColor = {
hue: Math.random() * 360,
saturation: 1,
brightness: 1
}
envelope.velocity = initialVelocity;
envelope.removed = false;
envelope.updateSelf = function() {
if (this.bounds.bottom > view.bounds.height + 1000) {
this.remove();
envelopes.splice(i, 1);
return;
};
function bounce() {
this.velocity = Math.min((this.velocity - dampening) * -1, 0);
};
if (this.bounds.bottom >= view.bounds.height && !this.dead) {
bounce.apply(this);
} else {
var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
for (var i = 0; i < envelopes.length; i++) {
if (envelopes[i].id == this.id) {
continue;
}
if (envelopes[i].hitTest(bottomLeft) || envelopes[i].hitTest(bottomRight)) {
bounce.apply(this);
};
}
}
this.position.y += this.velocity;
this.velocity += gravity;
this.velocity *= friction;
}
envelopes.push(envelope);
lastEnvelope = Date.now();
};
};
function onMouseDown() {
for (var i = 0; i < envelopes.length; i++) {
envelopes[i].dead = true;
}
}
</script>
<canvas id="envelopes"></canvas>Loading
default