Skip to main content
replaced http://codereview.stackexchange.com/ with https://codereview.stackexchange.com/
Source Link
updated codesnippet
Source Link
Pimgd
  • 22.6k
  • 13
  • 37
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>
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(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>
Source Link
Pimgd
  • 22.6k
  • 13
  • 37

Because questions with snippets deserve answers with snippets.

Bouncing Stacking Boxes

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>