Challenge - Showcase the Stack Snippet Feature! - Challenge over!

Question

The official blog announcing the feature has gone out, this competition is now closed.

---

The Stack Snippet feature is now live. When you ask, or answer a question, click this button:

enter image description here

When you use this feature in a question or answer on the main site, please answer this question with a link to your contribution (note that Stack Snippets currently support JavaScript only - that may/will change in the future).

A birdie whispered in my ear that, since Code Review is the first site to have the feature enabled, that a good use-case of the Stack Snippets may well find its way into the official announcement and/or help page, when that happens.

So, make it good!

We can vote on answers that we think showcase the feature well, and perhaps that will influence any decisions for inclusion in the official help, etc.

Background reading:

• the meta meta announcement of the feature (including help and example usage)
• previous request on Code Review meta
• meta sandbox for playing

• Mathieu Guindon: Yessss!!! Aren't we awesome!!
• Mathieu Guindon: Also I nominate this post for the best usage of the community-challenge tag.. ever!
• RubberDuck: Would it be inappropriate to edit some one else's question to use a Stack Snippet?
• rolfl: Sure you can, but the only code you can edit in is code that was already part of the question (or your own code you add)... which makes it hard, @RubberDuck
• konijn: What is the deadline?
• rolfl: @konijn - I have no idea, and there are some interesting items that have been done on meta.so. How about, though, I say next Friday (19th Sept), although the help/blog may, or may not be done by then (and there is no certainty that anything from here will be included).
• rolfl: I will personally see if there is a way I can reward a winning contribution somehow though.... perhaps a bounty on the question ,or answer, that wins.

Answer 1

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(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>

Answer 2

Not mine, but I think this one is pretty cool. Thanks for being a good sport Tom!

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() {
 				if (this.velocity > dampening) {
 					this.velocity -= dampening;
 				} else {
 					this.velocity = 0;
 				}
 				this.velocity = -this.velocity;
 			};			
 
 			if (this.bounds.bottom >= view.bounds.height && !this.dead) {
 				bounce.apply(this);
 			}
 
 			for (var i = 0;i<envelopes.length;i++) {
 				var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
 				var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
 				if (envelopes[i].hitTest(bottomLeft) && envelopes[i].id!=this.id) {
 					bounce.apply(this);
 				};
 				if (envelopes[i].hitTest(bottomRight) && envelopes[i].id!=this.id) {
 					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() {
 				if (this.velocity > dampening) {
 					this.velocity -= dampening;
 				} else {
 					this.velocity = 0;
 				}
 				this.velocity = -this.velocity;
 			};			
 
 			if (this.bounds.bottom >= view.bounds.height && !this.dead) {
 				bounce.apply(this);
 			}
 
 			for (var i = 0;i<envelopes.length;i++) {
 				var bottomLeft = new Point(this.bounds.left, this.bounds.bottom);
 				var bottomRight = new Point(this.bounds.left + this.bounds.width, this.bounds.bottom);
 				if (envelopes[i].hitTest(bottomLeft) && envelopes[i].id!=this.id) {
 					bounce.apply(this);
 				};
 				if (envelopes[i].hitTest(bottomRight) && envelopes[i].id!=this.id) {
 					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>

Answer 3

Mine, and it's pretty cool.

Javascript Minesweeper (with Stack Snippets!)

I think this feature might change the popularity of game questions. It feels like the game tag has a bit of a new meaning now :)

Answer 4

My code is tiny, and entirely non-interactive. I have found the answers useful.

I merely had to switch a couple of console.log() calls with document.write() and add <br> tags to make it a useful code snippet.

Recursive linear search - branch style and layout

• dcorking: As a bonus, it can overflow the stack with a large enough string.
• David Fullerton: This is a good example of highlighting the important code up top and then having a full snippet below.