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

Also I nominate this post for the best usage of the community-challenge tag.. ever! — Mathieu Guindon, Commented Sep 10, 2014 at 22:05
Would it be inappropriate to edit some one else's question to use a Stack Snippet? — RubberDuck, Commented Sep 10, 2014 at 22:57
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 — rolfl, Commented Sep 10, 2014 at 22:59
@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, Commented Sep 11, 2014 at 17:33
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. — rolfl, Commented Sep 11, 2014 at 17:34

Community · Accepted Answer · 2017-04-13 12:41:03Z

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>

2 revs · Accepted Answer · 2017-04-13 12:41:00Z

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>

Community · Accepted Answer · 2017-04-13 12:41:00Z

7

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 :)

edited Apr 13, 2017 at 12:41

CommunityBot

5

answered Sep 11, 2014 at 8:38

Simon Forsberg

59.4k1 gold badge78 silver badges172 bronze badges

Add a comment |

Community · Accepted Answer · 2017-04-13 12:41:03Z

5

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

edited Apr 13, 2017 at 12:41

CommunityBot

5

answered Sep 11, 2014 at 12:00

dcorking

3211 silver badge2 bronze badges

\$\begingroup\$ As a bonus, it can overflow the stack with a large enough string. \$\endgroup\$
– dcorking
Commented Sep 11, 2014 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
Commented Sep 11, 2014 at 17:45

Add a comment |

Stack Exchange Network

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

4 Answers 4

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
discussion
fun
stack-snippets
community-challenge
.

Linked

Hot Network Questions

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

4 Answers 4

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged discussionfunstack-snippetscommunity-challenge.

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
discussion
fun
stack-snippets
community-challenge
.