15
\$\begingroup\$

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:

\$\endgroup\$
  • 2
    \$\begingroup\$ Yessss!!! Aren't we awesome!! \$\endgroup\$ – Mathieu Guindon Sep 10 '14 at 22:02
  • \$\begingroup\$ Also I nominate this post for the best usage of the community-challenge tag.. ever! \$\endgroup\$ – Mathieu Guindon Sep 10 '14 at 22:05
  • 2
    \$\begingroup\$ Would it be inappropriate to edit some one else's question to use a Stack Snippet? \$\endgroup\$ – RubberDuck Sep 10 '14 at 22:57
  • \$\begingroup\$ 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 \$\endgroup\$ – rolfl Sep 10 '14 at 22:59
  • \$\begingroup\$ What is the deadline? \$\endgroup\$ – konijn Sep 11 '14 at 17:24
  • 1
    \$\begingroup\$ @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). \$\endgroup\$ – rolfl Sep 11 '14 at 17:33
  • 1
    \$\begingroup\$ 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. \$\endgroup\$ – rolfl Sep 11 '14 at 17:34
9
\$\begingroup\$

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>

\$\endgroup\$
7
\$\begingroup\$

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>

\$\endgroup\$
7
\$\begingroup\$

Mine, and it's pretty cool.

Javascript Minesweeper (with Stack Snippets!)

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

\$\endgroup\$
5
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ As a bonus, it can overflow the stack with a large enough string. \$\endgroup\$ – dcorking Sep 11 '14 at 12:01
  • \$\begingroup\$ This is a good example of highlighting the important code up top and then having a full snippet below. \$\endgroup\$ – David Fullerton Sep 11 '14 at 17:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .