ISSUU - TV Weekly - Feb. 2, 2014 by KPC Media Group
TV Weekly - Feb. 2, 2014
TV Weekly - Feb. 2, 2014
TV listings for northeast Indiana.Meta Stack Exchange
is where users like you discuss bugs, features, and support issues that affect the software powering all 150 Stack Exchange communities.
This post is dedicated to testing out the . Feel free to answer with your own Stack Snippets!
Run this full screen
var WIDTH = 1000;
var HEIGHT = 500;
var prizes = 5;
var level = 1;
var direction = "right";
var STARTED;
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
//Key event listener
function keyPressed(evt) {
var charCode = evt.
if(charCode == 100) {
//x += 10;
direction = "right";
else if(charCode == 97) {
//x -= 10;
direction = "left";
else if(charCode == 119) {
//y -= 10;
direction = "up";
else if(charCode == 115) {
//y += 10;
direction = "down";
else if(charCode == 32) {
if(STARTED == 0) {
STARTED = 1;
//Set up varialbles for new round
function initVars() {
score = 0;
direction = "right";
STARTED = 0;
//Set up variables and register keypress event handler for canvas
function init() {
initVars();
$("#c").keypress(new Function("keyPressed(event)"));
canvas = document.getElementById("c");
ctx = canvas.getContext("2d");
drawStartScreen();
//Draw the starting screen
function drawStartScreen() {
ctx.font="bold 36px sans-serif";
ctx.fillText("Snakes Game", 400, 200);
ctx.font="bold 24px sans-serif";
ctx.fillText("Click here and then press SPACE to start", 300, 300);
ctx.font="bold 18px sans-serif";
ctx.fillText("Use 'W' 'A' 'S' and 'D' as arrow keys", 350, 400);
//Place 'prizes' randomly on the playfield
function drawPrizes() {
ctx.fillStyle = "rgb(1, 0, 255)";
for(i = 0; i & i++) {
var px = (Math.floor(Math.random()*49) * 20) + 20;
var py = (Math.floor(Math.random()*24) * 20) + 20;
circle(px, py, 10);
//Start the game
function start() {
drawPrizes();
setInterval(draw, 100);
setTimeout("alert('Level 1')", 100);
//MAIN LOOP -called every 50 miliseconds
function draw() {
//Move based on current direction
if(direction == "up")
else if(direction == "down")
else if(direction == "right")
else if(direction == "left")
//Get color of space about to be moved on to
var c = ctx.getImageData(x, y, 10, 10).
//Detect player running into own tail
if(c[0] == 255) {
alert("You Are Dead");
location.reload(true);
//Detect player moving over a 'prize'
else if(c[0] == 1) {
score += 50;
//Display level and score
//document.getElementById("score").innerHTML="Level: "+level+"&br /&Score: "+
$("#score").html("Level: "+level+"&br /&Score: "+score);
//Detect player winning round
if(score == prizes*50) {
alert("You Win!");
initVars();
prizes += 5;
level += 1;
drawPrizes();
alert("Level "+level);
//Detect player moving off the playfield
if(x & WIDTH) x = 20;
if(x & 0) x = WIDTH-20;
if(y & HEIGHT) y = 20;
if (y & 0) y = HEIGHT-20;
//Draw the players position
ctx.fillStyle = "rgb(255, 0, 0)";
circle(x, y, 10);
&script src="/ajax/libs/jquery/2.1.1/jquery.min.js"&&/script&
&body onload="init()"&
&canvas id="c" tabindex="1" width="1000" height="500"&
If you see this it wont work.
&/canvas&&br /&
&!--&button onclick="start()"&Start Game&/button&--&
&div id="score"&Level: 1&br /&Score: 0&/div&
var GRAVITY = 0.08;
var SPEED = 1; //1 is fastest
var dx = [];
var dy = [];
var maxX = window.innerW
var maxY = window.innerH
var all = [];// = document.getElementsByTagName("*:visible");
var positions = [];
var widths = [];
var heights = [];
function drop() {
$("*").each(function(index) {
all.push(this);
positions.push($(this).offset());
widths.push($(this).width());
heights.push($(this).height());
for(var i=0; i & all. i++) {
all[i].style.position = "fixed";
all[i].style.top = positions[i].top+"px";
all[i].style.left = positions[i].left+"px";
dx[i] = Math.random() * 4 - 2;
dy[i] = Math.random() * 1;
setInterval(mainLoop, SPEED);
function mainLoop() {
for(var i=0; i & all. i++) {
dy[i] += GRAVITY/2;
positions[i].top += dy[i];
positions[i].left += dx[i];
dy[i] += GRAVITY/2;
if(positions[i].left & 0) dx[i] *= -1;
if((positions[i].left + all[i].offsetWidth) & maxX) dx[i] *= -1;
if(positions[i].top & (maxY - all[i].offsetHeight)) dy[i] = -Math.abs(dy[i]);
all[i].style.left = positions[i].left+"px";
all[i].style.top = positions[i].top+"px";
&script src="/ajax/libs/jquery/2.1.1/jquery.min.js"&&/script&
&div style="border-style: border-width: 5 border-color:"&Test&/div&
&h1&SCORE!&/h1&
&!-- Created with Inkscape (http://www.inkscape.org/) --&
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:rdf="http://www.w3.org/-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:cc="http://web.resource.org/cc/"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:ns1="http://sozi.baierouge.fr"
sodipodi:docname="gnome-mime-application-x-svg.svg"
height="128pt"
sodipodi:version="0.32"
width="128pt"
inkscape:version="0.39cvs"
sodipodi:docbase="/home/andy/Desktop/etiquette-icons-0.4/scalable/mimetypes"
id="defs3"
&linearGradient
id="linearGradient2222"
y2=".55249"
xlink:href="#linearGradient1513"
y1="-.10497"
x2=".58431"
x1="-.10588"
&linearGradient
id="linearGradient2316"
y2=".52030"
y1=".21771"
x2=".80392"
x1=".47451"
id="stop2318"
style="stop-color:#d6d6d6"
offset="0"
id="stop2322"
style="stop-color:#eaeaea"
offset=".25769"
id="stop2320"
style="stop-color:#919191"
offset=".70594"
id="stop2321"
style="stop-color:#d2d2d2"
offset=".73347"
id="stop2319"
style="stop-color:#a6a6a6"
offset="1"
&/linearGradient
&linearGradient
id="linearGradient1513"
id="stop1514"
style="stop-color:#ffffff"
offset="0"
id="stop1515"
style="stop-color:#stop-opacity:0"
offset="1"
&/linearGradient
&linearGradient
id="linearGradient2121"
y2="0.443"
xlink:href="#linearGradient1513"
y1=".27687"
x2=".59608"
x1=".41569"
&radialGradient
id="radialGradient1502"
fx=".18039"
fy=".47917"
id="stop1919"
style="stop-color:#000000;stop-opacity:.31638"
offset="0"
id="stop1920"
style="stop-color:#000000;stop-opacity:.079096"
offset=".5"
id="stop1921"
style="stop-color:#000000;stop-opacity:0"
offset="1"
&/radialGradient
&linearGradient
id="linearGradient893"
y2="1.0067"
x2=".59707"
x1=".51648"
id="stop895"
style="stop-color:#445632"
offset="0"
id="stop896"
style="stop-color:#007837;stop-opacity:0"
offset="1"
&/linearGradient
&linearGradient
id="linearGradient1492"
id="stop1493"
style="stop-color:#dadada"
offset="0"
id="stop1496"
style="stop-color:#f1f1f1"
offset=".34923"
id="stop1494"
style="stop-color:#f0f0f0"
offset="1"
&/linearGradient
&linearGradient
id="linearGradient1495"
y2="1.1797"
xlink:href="#linearGradient1492"
y1=".21094"
x2=".085470"
x1=".88034"
&linearGradient
id="linearGradient1497"
y2="1.3281"
xlink:href="#linearGradient1492"
y1=".32812"
x2="-.37607"
x1=".63248"
&linearGradient
id="linearGradient1499"
y2=".59848"
y1="-.42424"
x2=".86260"
x1="-.24427"
id="stop1502"
style="stop-color:#ffffff"
offset="0"
id="stop1504"
style="stop-color:#stop-opacity:0"
offset="1"
&/linearGradient
&linearGradient
id="linearGradient1506"
y2=".0078125"
y1=".97656"
x2=".78261"
x1=".052174"
id="stop1508"
style="stop-color:#000000;stop-opacity:.095506"
offset="0"
id="stop1510"
style="stop-color:#000000;stop-opacity:0"
offset="1"
&/linearGradient
&linearGradient
id="linearGradient866"
y2=".84848"
y1=".14394"
x2=".81197"
x1="1.2991"
id="stop3035"
style="stop-color:#4b6983"
offset="0"
id="stop3036"
style="stop-color:#9db8d2;stop-opacity:0"
offset="1"
&/linearGradient
&sodipodi:namedview
bordercolor="#666666"
inkscape:pageshadow="2"
inkscape:window-width="341"
pagecolor="#ffffff"
inkscape:zoom="1.5187464"
inkscape:window-x="398"
borderopacity="1.0"
inkscape:cx="60.199260"
inkscape:cy="73.299368"
inkscape:window-y="89"
inkscape:window-height="527"
inkscape:pageopacity="0.0"
id="path930"
sodipodi:nodetypes="cccccccccccccccc"
style="fill-rule:stroke-width:.42649;stroke-opacity:.36478;fill:#ffffff"
d="m17.159 6. 36.739 36.742 36.74h33.528 33.528 33.525 33.53v-36.74-36.742-36.739l-33.53-36.74-33.525 0.-33.528z"
id="g1552"
style="fill:url(#linearGradient1506)"
transform="matrix(. .2 -112.49)"
id="path1505"
sodipodi:nodetypes="cccccccccccccccc"
style="fill-rule:stroke-width:.95407fill-opacity:.75"
d="m173.36 408.81v122.26 122.26 122.27 122.26h108.76 108.76 108.77 108.76v-122.26-122.27-122.26l-108.76-122.26h-108.77-108.76-108.76z"
id="path1538"
style="fill-rule:stroke-width:.95407fill-opacity:.75"
d="m170.12 407.19v493.9h441.54v-371.28c-36.85-41.42-73.68-82.86-110.57-124.25h-330.97v1.63z"
id="path1543"
style="fill-rule:stroke-width:.95407fill-opacity:.75"
d="m166.88 403.94v500.4h448.03v-375.78c-37.45-42.09-74.89-84.19-112.38-126.25h-335.65v1.63z"
id="rect900"
sodipodi:nodetypes="cccccccccccccccc"
style="stroke-opacity:.36478;fill-rule:stroke:#000000;stroke-width:1.4375;fill:url(#linearGradient1495)"
d="m297.99 136.74v123.83 123.83 123.83 123.83h113.01 113 113.01 113v-123.83-123.83-123.83l-113-123.83h-113.01-113-113.01z"
transform="matrix(. .2 -34.058)"
id="rect1558"
sodipodi:nodetypes="cccccc"
style="fill-rule:stroke-width:1fill:url(#linearGradient866)"
d="m26.107 13.576v132.8h115.77v-108.68l-21.85-24.124h-93.923z"
id="path892"
sodipodi:nodetypes="cczzzzzzzzzcc"
style="stroke-width:1fill:url(#linearGradient893)"
d="m86.959 69.383c11.089 2.853 32.541 23.61 5.653 23.483-18.834-0.664-51.748-7.834-51.982-0.983s17.268 3.278 64.84 15.727c47.94 12.54-27.92 12.46-4.88 18.4 23.05 5.94 47.25 1.98 52.54 13 5.28 11.02 0.5 5.92-7.15-1.7s-44.94 0.36-60.619-10.76c-15.677-11.12 34.829-9.26 15.759-17.18-19.063-7.91-62.413 2.62-74.665-14.561-12.582-17.646 28.972-9.137 44.448-7.695 15.477 1.441 37.267-4.104 7.921-13.692-3.41-1.337 4.266 0.131 8.135-4.039z"
id="path1500"
sodipodi:nodetypes="cccczc"
style="fill-rule:stroke-width:1fill:url(#linearGradient1499)"
d="m150.8 19.069l0.6 134.69h-131.67l-0.079-33.29c2.944 1.13 32.692-40.999 70.141-39.187 37.488 1.814 27.788-56.778 61.008-62.214z"
id="path1231"
sodipodi:nodetypes="cc"
style="stroke:#314e6c;stroke-width:1.1568;fill:none"
d="m35.811 218.67l17.767 23.42"
transform="matrix(1. 1. -208.47)"
id="path1232"
sodipodi:rx="6.9132495"
sodipodi:ry="6.9132495"
style="stroke:#314e6c;stroke-width:2.3894;fill:none"
sodipodi:type="arc"
d="m84.687 242.96a6.2 0 1 0 -13.826 0 6.2 0 1 0 13.826 0z"
transform="matrix(. .64 -41.226)"
sodipodi:cy="242.95900"
sodipodi:cx="77.774055"
id="path1818"
sodipodi:rx="6.9132495"
sodipodi:ry="6.9132495"
style="stroke:#314e6c;stroke-width:2.3894;fill:none"
sodipodi:type="arc"
d="m84.687 242.96a6.2 0 1 0 -13.826 0 6.2 0 1 0 13.826 0z"
transform="matrix(. .6 -78.665)"
sodipodi:cy="242.95900"
sodipodi:cx="77.774055"
id="path906"
sodipodi:nodetypes="cccc"
style="fill-rule:stroke-width:.95407fill:url(#linearGradient1497)"
d="m750.01 260.57c-34.07-10.08-78.21-8.65-111.56-2.9 5.76-36.95 6.48-83.26-1.44-120.93l113 123.83z"
transform="matrix(. .2 -34.058)"
id="g3664"
transform="matrix(3. 3. 11.493)"
id="path1934"
sodipodi:rx="12.562782"
sodipodi:ry="12.562782"
style="fill-rule:stroke-width:1fill:url(#radialGradient1502)"
sodipodi:type="arc"
d="m54.439 37.866a12.563 12.563 0 1 0 -25.126 0 12.563 12.563 0 1 0 25.126 0z"
transform="matrix(. .1 12.915)"
sodipodi:cy="37.865574"
sodipodi:cx="41.875938"
id="path2139"
sodipodi:nodetypes="czzcc"
style="fill-rule:stroke-width:.25;fill:#565248"
d="m5.c2. 11.088-14.236 13.239-14.741 2.114-0. 0. 1.794-0.645 1.029-3.458 6.907-12.687 13.62-1.-1.-1.z"
id="path2140"
sodipodi:nodetypes="cccc"
style="fill-rule:stroke-width:.25;fill:#434343"
d="m0.s6. 6.c0.-1.-3.-1.-2.-3.z"
id="path2230"
sodipodi:nodetypes="czccc"
style="fill-rule:stroke-width:.125;fill:url(#linearGradient2121)"
d="m9.c1. 6.8 8.2 1.439-0.-0. 0. 0. 9. 9.-0.1-0.39-1.z"
id="path2141"
sodipodi:nodetypes="ccccc"
style="fill-rule:stroke-width:.25;fill:url(#linearGradient2316)"
d="m5.l4.6c0.6 3.6 2.6s-4.-4.c-0.-2.-2.z"
id="path2247"
sodipodi:nodetypes="cccc"
style="fill-rule:stroke-width:1fill:url(#linearGradient2222)"
d="m0.s1.406-2.97 3.c1.695 0.167 1. 1.s-2.-5.151 2.04z"
id="rect1019"
style="fill-rule:stroke:#c1c1c1;stroke-width:1.0447fill:#9f9f9f;fill-opacity:.75"
height="7.5958"
width="7.5958"
y="91.987"
x="22.454"
id="path1557"
sodipodi:nodetypes="cczccccccccc"
style="fill-rule:stroke-width:1fill:#267726"
d="m77.752 73.254l-1.135-0.779s0.778-3.51 4.069-6.848c3.195-3.242 4.494-2.115 2.174 0.457-1.277 1.559-0.426 4.676 0.426 3.585 0.851-1.091 5.249-2.65 3.972-1.247s-2.553 3.429-0.283 2.65c2.27-0.78 5.391-1.715 3.972-0.312-1.418 1.403-1.277 1.87 0.568 0.935 1.844-0.935 3.263-0.312 2.27 0.468-0.993 0.779-4.824 1.714-5.817 1.714s-9.081 0-10.216-0.623z"
&dc:format
&image/svg+xml&/dc:format
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
&cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
&dc:publisher
rdf:about="http://openclipart.org/"
&Openclipart&/dc:title
&/cc:Agent
&/dc:publisher
&SVG&/dc:title
&T06:30:28&/dc:date
&dc:description
&An SVG file icon by Andrew Fitzsimon. Etiquette Icon set. From 0.18 OCAL database.&/dc:description
&dc:source
&https://openclipart.org/detail/25454/svg-by-anonymous-25454&/dc:source
&dc:creator
&Anonymous&/dc:title
&/cc:Agent
&/dc:creator
&dc:subject
&computer&/rdf:li
&drawing&/rdf:li
&etiquette&/rdf:li
&file&/rdf:li
&gnome&/rdf:li
&graphics&/rdf:li
&icon&/rdf:li
&mime type&/rdf:li
&paintbrush&/rdf:li
&vector&/rdf:li
&/dc:subject
&cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/"
&cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
&cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
&cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
&/cc:License
&/metadata
&h2&We've got svg support!&/h2&
&h3&Thank you, StackExchange!&/h3&
&p&An SVG file icon by Andrew Fitzsimon.
From https://openclipart.org/detail/25454/SVG-by-Andy.
http://creativecommons.org/licenses/publicdomain/.
Inspired by SE's .
*, *:before, *:after {
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
.wrapper {
padding: 10
width: 100%;
background: #a8d4d7;
height: 160
width: 100
background: #64B7FF;
border-radius: 40
.bottle .reflection {
height: 40
width: 110
border-top-left-radius: 31
border-top-right-radius: 31
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(1%, rgba(255, 255, 255, 0.20)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
.bottle .line {
background:
height: 15
width: 110
border-radius: 15
.bottle .line:before {
content:"";
height: 15
width: 100
box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
-webkit-box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
.bottle .line:after {
content:"";
height: 15
width: 100
box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
.bottle .line:nth-child(3) {
.bottle .line:nth-child(4) {
bottom: 40
height: 250
width: 120
background:
border-top-left-radius: 5
border-top-right-radius: 5
.stand:before {
content:"";
width: 100
background: #f8f8f8;
border-top-left-radius: 10
border-top-right-radius: 10
.stand:after {
content:"";
width: 100%;
background: #e1e1e1;
.stand .taps {
height: 40%;
width: 70%;
background: #e1e1e1;
bottom: 0;
border-radius: 5
border-bottom-color: #767676;
border-bottom-style:
border-bottom-width: 10
.stand .taps:before {
content:"";
height: 97%;
background: #c5c5c5;
bottom: 0;
border-top-left-radius: 5
.stand .taps:after {
content:"";
height: 97%;
background: #c5c5c5;
bottom: 0;
border-top-right-radius: 5
.stand .taps div {
height: 20
background:
display: inline-
margin: 15px 4
.stand .taps .cold:before {
content:"";
background: #0000FF;
.stand .taps .hot:before {
content:"";
background: #FF3300;
.stand .taps .cold:after {
content:"";
border-radius: 8
background:
.stand .taps .hot:after {
content:"";
border-radius: 8
background:
.bottle .bubbles {
height: 100%;
width: 100%;
.bottle .bubbles span {
opacity: .5;
.bottle .bubbles span:nth-child(1) {
border-radius: 3
background: #d8d8
bottom: 75
.bottle .bubbles span:nth-child(2) {
border-radius: 5
background: #d8d8
bottom: 25
.bottle .bubbles span:nth-child(3) {
border-radius: 7
background: #d8d8
bottom: 35
.bottle .bubbles span:nth-child(4) {
border-radius: 9
background: #d8d8
bottom: 20
.bottle .bubbles span:nth-child(5) {
height: 11
border-radius: 11
background: #d8d8
bottom: 60
.bottle .bubbles span:nth-child(6) {
border-radius: 9
background: #d8d8
bottom: 60
&div class="wrapper"&
&div class="bottle"&
&div class="bubbles"&
&span&&/span&
&span&&/span&
&span&&/span&
&span&&/span&
&span&&/span&
&div class="reflection"&&/div&
&div class="line"&&/div&
&div class="line"&&/div&
&div class="stand"&
&div class="taps"&
&div class="cold"&&/div&
&div class="hot"&&/div&
Let's see if this can handle WebGL :D
if ( ! Detector.webgl ) {
Detector.addGetWebGLMessage();
document.getElementById( 'container' ).innerHTML = "";
var fogExp2 =
var container,
var camera, controls, scene,
var worldWidth = 200, worldDepth = 200,
worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2,
data = generateHeight( worldWidth, worldDepth );
var clock = new THREE.Clock();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 1000;
controls.lookSpeed = 0.125;
controls.lookVertical =
controls.constrainVertical =
controls.verticalMin = 1.1;
controls.verticalMax = 2.2;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 );
var light = new THREE.Color( 0xffffff );
var shadow = new THREE.Color( 0x505050 );
var matrix = new THREE.Matrix4();
var pxGeometry = new THREE.PlaneGeometry( 100, 100 );
pxGeometry.faces[ 0 ].vertexColors.push( light, shadow, light );
pxGeometry.faces[ 1 ].vertexColors.push( shadow, shadow, light );
pxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
pxGeometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].y = 0.5;
pxGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
pxGeometry.applyMatrix( matrix.makeRotationY( Math.PI / 2 ) );
pxGeometry.applyMatrix( matrix.makeTranslation( 50, 0, 0 ) );
var nxGeometry = new THREE.PlaneGeometry( 100, 100 );
nxGeometry.faces[ 0 ].vertexColors.push( light, shadow, light );
nxGeometry.faces[ 1 ].vertexColors.push( shadow, shadow, light );
nxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
nxGeometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].y = 0.5;
nxGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
nxGeometry.applyMatrix( matrix.makeRotationY( - Math.PI / 2 ) );
nxGeometry.applyMatrix( matrix.makeTranslation( - 50, 0, 0 ) );
var pyGeometry = new THREE.PlaneGeometry( 100, 100 );
pyGeometry.faces[ 0 ].vertexColors.push( light, light, light );
pyGeometry.faces[ 1 ].vertexColors.push( light, light, light );
pyGeometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
pyGeometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].y = 0.5;
pyGeometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].y = 0.5;
pyGeometry.applyMatrix( matrix.makeRotationX( - Math.PI / 2 ) );
pyGeometry.applyMatrix( matrix.makeTranslation( 0, 50, 0 ) );
var py2Geometry = new THREE.PlaneGeometry( 100, 100 );
py2Geometry.faces[ 0 ].vertexColors.push( light, light, light );
py2Geometry.faces[ 1 ].vertexColors.push( light, light, light );
py2Geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
py2Geometry.faceVertexUvs[ 0 ][ 1 ][ 0 ].y = 0.5;
py2Geometry.faceVertexUvs[ 0 ][ 1 ][ 1 ].y = 0.5;
py2Geometry.applyMatrix( matrix.makeRotationX( - Math.PI / 2 ) );
py2Geometry.applyMatrix( matrix.makeRotationY( Math.PI / 2 ) );
py2Geometry.applyMatrix( matrix.makeTranslation( 0, 50, 0 ) );
var pzGeometry = new THREE.PlaneGeometry( 100, 100 );
pzGeometry.faces[ 0 ].vertexColors.push( light, shadow, light );
pzGeometry.faces[ 1 ].vertexColors.push( shadow, shadow, light );
pzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
pzGeometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].y = 0.5;
pzGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
pzGeometry.applyMatrix( matrix.makeTranslation( 0, 0, 50 ) );
var nzGeometry = new THREE.PlaneGeometry( 100, 100 );
nzGeometry.faces[ 0 ].vertexColors.push( light, shadow, light );
nzGeometry.faces[ 1 ].vertexColors.push( shadow, shadow, light );
nzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
nzGeometry.faceVertexUvs[ 0 ][ 0 ][ 2 ].y = 0.5;
nzGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
nzGeometry.applyMatrix( matrix.makeRotationY( Math.PI ) );
nzGeometry.applyMatrix( matrix.makeTranslation( 0, 0, - 50 ) );
var geometry = new THREE.Geometry();
var dummy = new THREE.Mesh();
for ( var z = 0; z & worldD z ++ ) {
for ( var x = 0; x & worldW x ++ ) {
var h = getY( x, z );
matrix.makeTranslation(
x * 100 - worldHalfWidth * 100,
z * 100 - worldHalfDepth * 100
var px = getY( x + 1, z );
var nx = getY( x - 1, z );
var pz = getY( x, z + 1 );
var nz = getY( x, z - 1 );
var pxpz = getY( x + 1, z + 1 );
var nxpz = getY( x - 1, z + 1 );
var pxnz = getY( x + 1, z - 1 );
var nxnz = getY( x - 1, z - 1 );
var a = nx & h || nz & h || nxnz & h ? 0 : 1;
var b = nx & h || pz & h || nxpz & h ? 0 : 1;
var c = px & h || pz & h || pxpz & h ? 0 : 1;
var d = px & h || nz & h || pxnz & h ? 0 : 1;
if ( a + c & b + d ) {
var colors = py2Geometry.faces[ 0 ].vertexC
colors[ 0 ] = b === 0 ? shadow :
colors[ 1 ] = c === 0 ? shadow :
colors[ 2 ] = a === 0 ? shadow :
var colors = py2Geometry.faces[ 1 ].vertexC
colors[ 0 ] = c === 0 ? shadow :
colors[ 1 ] = d === 0 ? shadow :
colors[ 2 ] = a === 0 ? shadow :
geometry.merge( py2Geometry, matrix );
var colors = pyGeometry.faces[ 0 ].vertexC
colors[ 0 ] = a === 0 ? shadow :
colors[ 1 ] = b === 0 ? shadow :
colors[ 2 ] = d === 0 ? shadow :
var colors = pyGeometry.faces[ 1 ].vertexC
colors[ 0 ] = b === 0 ? shadow :
colors[ 1 ] = c === 0 ? shadow :
colors[ 2 ] = d === 0 ? shadow :
geometry.merge( pyGeometry, matrix );
if ( ( px != h && px != h + 1 ) || x == 0 ) {
var colors = pxGeometry.faces[ 0 ].vertexC
colors[ 0 ] = pxpz & px && x & 0 ? shadow :
colors[ 2 ] = pxnz & px && x & 0 ? shadow :
var colors = pxGeometry.faces[ 1 ].vertexC
colors[ 2 ] = pxnz & px && x & 0 ? shadow :
geometry.merge( pxGeometry, matrix );
if ( ( nx != h && nx != h + 1 ) || x == worldWidth - 1 ) {
var colors = nxGeometry.faces[ 0 ].vertexC
colors[ 0 ] = nxnz & nx && x & worldWidth - 1 ? shadow :
colors[ 2 ] = nxpz & nx && x & worldWidth - 1 ? shadow :
var colors = nxGeometry.faces[ 1 ].vertexC
colors[ 2 ] = nxpz & nx && x & worldWidth - 1 ? shadow :
geometry.merge( nxGeometry, matrix );
if ( ( pz != h && pz != h + 1 ) || z == worldDepth - 1 ) {
var colors = pzGeometry.faces[ 0 ].vertexC
colors[ 0 ] = nxpz & pz && z & worldDepth - 1 ? shadow :
colors[ 2 ] = pxpz & pz && z & worldDepth - 1 ? shadow :
var colors = pzGeometry.faces[ 1 ].vertexC
colors[ 2 ] = pxpz & pz && z & worldDepth - 1 ? shadow :
geometry.merge( pzGeometry, matrix );
if ( ( nz != h && nz != h + 1 ) || z == 0 ) {
var colors = nzGeometry.faces[ 0 ].vertexC
colors[ 0 ] = pxnz & nz && z & 0 ? shadow :
colors[ 2 ] = nxnz & nz && z & 0 ? shadow :
var colors = nzGeometry.faces[ 1 ].vertexC
colors[ 2 ] = nxnz & nz && z & 0 ? shadow :
geometry.merge( nzGeometry, matrix );
var texture = THREE.ImageUtils.loadTexture( 'data:image/base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAMAAAAsVwj+AAABv1BMVEUcQwAiTgElVAEqVgA5YgJJbQNQcghffgsnVAE0YQFxWjNxWTN2XzptWDVwVzJxVzMiUQBBbQN1XjloUC2AZUGAaEGNcUlMORcgUABRbgZVRQhWQR1YRiJ1XjVfRyVfTCd8YkF8Yz5/ZD8+KweAZUKAZURjTCeAaESMcUlnTy2OdEqQdk1SOhlTPxxTQSJTRAhUPBxURQhUdwk3Lgc5MxVWRQdWRidXQyJXSghXTykwLRBZRSFbTA5cRiddRyddTC5eRyheSyZeSygyLRI+Lgc+OhZgTChhTCdiUwxALgdjTidmTycpIwdnUC1nUDBCPCZoUS1oVC5pUy5pVxZqUy1rUixrUy1rVTBtVDJtVjJDMBVvVzNvWTNFNwdwWDJwWDhwWzhFPQdGQCdHNRJzWzNzWzt0XDpHNRVHPgd1XjtJNA92Yjx5YTl6Yzx7Yzs1YQFLRRt8ZEE2Lgd/ZURMOhdMOhpNNxZNRQdNRyiBa0ODZUGDaUGFbD+GbUSHbUeIbEOIbESIbEWIbUSIbUWIbkWJbkWJcUmKbUiLcUdPOheMckiNcUdQRwiNckqNdEmNdEqNdE02MSWPdUk3KAeVeFD3vhDZAAABm0lEQVR4XkWQU69mQRBFy330Gdc2xrZt27Zt2/ODp07uw2R3qpOVnZVKQTAyf6TGyKYIqEymLOIDhRRQzJQssAnmAQpBhM28Z+JFEENDUnURmRiDiUdJmP3LHYrEjHmERCiA641MjYRMCAnYuXvYKbOKgk7tQRpUObCBoGLAvC7IzoE1mKpwblJSAnJHQNexICkbsCtNBUUUXcVAZsZKFNTUnQRIZChqYt4XFm/8v0dUmbpHa4Vy040Io1YHXIkdzY4qEa5bHDloa4OoHMdlhPjrnyiCmzEuQvy142K8EOuH5pZhaRT3Pzi9cd6M8vWHj+qbbkNp66lve2aNvjuwpmPOWG3/MXi6tr3x+Mnv5vT2s0l1e0sJ1p9Jr355WV12olkfnry3oAXSnstZdmFaczwdLnkyaGRDd+f/SAqNFxODxeJQLwx+Hh/dVe361N3V7L/fMbMGEx+//327c0PPlTTtO1rrWwVj7589L3QfWZm9er383J2fCayuLikkh1d0bv4wsu1N78kEkuN7dw9s6bw2UBw5eGnfrfP/AEXsNS9OBYAmAAAAAElFTkSuQmCC' );
texture.magFilter = THREE.NearestF
texture.minFilter = THREE.LinearMipMapLinearF
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, ambient: 0xbbbbbb, vertexColors: THREE.VertexColors } ) );
scene.add( mesh );
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 1, 1, 0.5 ).normalize();
scene.add( directionalLight );
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setSize( window.innerWidth, window.innerHeight );
container.innerHTML = "";
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerH
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
function loadTexture( path, callback ) {
var image = new Image();
image.onload = function () { callback(); };
image.src =
function generateHeight( width, height ) {
var data = [], perlin = new ImprovedNoise(),
size = width * height, quality = 2, z = Math.random() * 100;
for ( var j = 0; j & 4; j ++ ) {
if ( j == 0 ) for ( var i = 0; i & i ++ ) data[ i ] = 0;
for ( var i = 0; i & i ++ ) {
var x = i % width, y = ( i / width ) | 0;
data[ i ] += perlin.noise( x / quality, y / quality, z ) *
quality *= 4
function getY( x, z ) {
return ( data[ x + z * worldWidth ] * 0.2 ) | 0;
function animate() {
requestAnimationFrame( animate );
stats.update();
function render() {
controls.update( clock.getDelta() );
renderer.render( scene, camera );
color: #61443e;
font-family:M
font-size:13
text-align:
/* background-color: #bfd1e5; */
background-color: #
a { color: #a06851; }
top: 0 width: 100%;
padding: 5
background:rgb(100,0,0) !
color:#fff !
margin-top:10em !
#oldie a { color:#fff }
&div id="container"&&br /&&br /&&br /&&br /&&br /&Generating world...&/div&
&div id="info"&
&a href="http://threejs.org" target="_blank"&three.js&/a& - &a href="http://www.minecraft.net/" target="_blank"&minecraft&/a& demo [ambient occlusion]. featuring &a href="http://painterlypack.net/" target="_blank"&painterly pack&/a&&br /&(left click: forward, right click: backward)
&script src="http://threejs.org/build/three.min.js"&&/script&
&script src="http://threejs.org/examples/js/controls/FirstPersonControls.js"&&/script&
&script src="http://threejs.org/examples/js/ImprovedNoise.js"&&/script&
&script src="http://threejs.org/examples/js/Detector.js"&&/script&
&script src="http://threejs.org/examples/js/libs/stats.min.js"&&/script&
Spoiler: yes it can.
Taken from .
var logo = document.getElementById("logo"),
angle = -90,
logo.transform = (logo.transform || logo.webkitTransform || logo.msTransform);
setInterval(function() {
logo.style.left = x + "px";
logo.style.top = y + "px";
logo.style.transform = "rotate(" + angle + "deg)";
angle += (Math.sin(t / 50) * Math.cos(t / 75)) * 25;
if (x &= 470)
if (x &= 0)
if (y &= 270)
if (y &= 0)
background-image: url(http://cdn.sstatic.net/stackexchangemeta/img/favicon.ico);
height: 32
transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
width: 500
height: 300
border-color: #000;
border-width: 1
border-style:
&div id="box"&
&div id="logo"&&/div&
idea and most code from HTML 5 CSS All In One for Dummies by Andy Harris
http://www.aharrisbooks.net/haio/book_4/chap_07/
CANV_HEIGHT = 400;
CANV_WIDTH = 400;
SPR_HEIGHT = 100;
SPR_WIDTH = 80;
var x = 0;
var y=100;
var dx = 10;
var dy = 7;
function init(){
drawing = document.getElementById("drawing");
con = drawing.getContext("2d");
absPic = document.getElementById("absPic");
setInterval(draw, 100);
} // end init
function draw(){
// clear background
con.clearRect(0, 0, 400, 400);
// move the element
// check for boundaries
// draw the image
con.drawImage(absPic, x, y, SPR_WIDTH, SPR_HEIGHT);
//* // turn on (add '/ ' in front) for wrap
function wrap(){
if (x & CANV_WIDTH) {
if (x & 0) {
x = CANV_WIDTH;
if (y & CANV_HEIGHT){
if (y & 0) {
y = CANV_HEIGHT;
} // end wrap
//*// turn on for bounce
function bounce(){
if (x & CANV_WIDTH - SPR_WIDTH) {
if (x & 0) {
if (y & CANV_HEIGHT - SPR_HEIGHT) {
if (y & 0) {
} // end bounce
} // end draw
/*font-size:400%;*/
font-family:"univers",sans-
background-color:#4ca3d7;
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&b4c7_03wrapBounce.html&/title&
&body onload = "init()"&
&h3&Animated wrap or bounce&/h3&
&img class = "hidden"
id = "absPic"
src = "http://webdev.nut.cc/AbigailSelfPortraitPicassoStyle.jpg"
alt = "Abigail Clare Sawatsky self-portrait in the style of Picasso" /&
&canvas id = "drawing"
height = "400"
width = "400"&
Canvas not supported
I found something that may interest you.
in one of my questions on Code Review I added in Stack Snippets to an old question and used the fun header formatting and it made parts of the stack snippet bigger because of where the comment for the begin snippet was located.
Just because snippets are cool
&table width="500px"&
&th colspan="2"&Food you love to eat&/th&
I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.
&td width="170"&
&img src ="/exercises/fruitbowl.gif" alt="Fruit Bowl" /&
it looked so much cooler on CodeReview, but it has been fixed in my Answer
It was fixed with the last edit.
The Buttons were huge on Code Review and in
when I did this.
it automatically placed the code snippet like this when I tried to insert it, even though when I clicked the insert snippet the cursor was 2 lines down from that.
Here's to show XSS is not possible.
$('#foo').text(document.cookie);
} catch (e) {
$('#foo').text('No cookie for you!');
&script src="/ajax/libs/jquery/2.1.1/jquery.min.js"&&/script&
&div id="foo"&&/div&
Also, what about crashing the browser?
while(a='a')a=a+a; // BOOM
window.top.location.href = "/watch?v=y6120QOlsfU";
No redirecting. :(
background: #161616 url(pattern_40.gif)
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-
height: 100%;
* {margin: 0; padding: 0; outline:}
img {border:}
text-decoration:
color:#00c6
font: 4em normal Arial, Helvetica, sans-
padding: 20 margin: 0;
text-align:
font: 0.2em normal
Arial, Helvetica, sans-
text-transform: letter-spacing: 0.2 line-height: 5
.container {width: 960 margin: 0 overflow:}
.content {width:800 margin:0 padding-top:50}
.contentBar {width:90 margin:0 padding-top:50 padding-bottom:50}
/* STOP ANIMATION */
-webkit-animation-play-state:
-moz-animation-play-state:
/* Loading Circle */
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50
box-shadow: 0 0 35px #2187e7;
-moz-animation:spin .5
-webkit-animation:spin .5
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50
box-shadow: 0 0 15px #2187e7;
-moz-animation:spinoff .5
-webkit-animation:spinoff .5
@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
/* Second Loadin Circle */
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50
box-shadow: 0 0 35px #2187e7;
-moz-animation:spinPulse 1s infinite ease-in-
-webkit-animation:spinPulse 1
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50
box-shadow: 0 0 15px #2187e7;
-moz-animation:spinoffPulse 1
-webkit-animation:spinoffPulse 1
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
/* LITTLE BAR */
.barlittle {
background-color:#2187e7;
background-image: -moz-linear-gradient(45deg, #%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #%, #a0eaff);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
margin-left:5
opacity:0.1;
-moz-transform:scale(0.7);
-webkit-transform:scale(0.7);
-moz-animation:move 1
-webkit-animation:move 1
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
@-moz-keyframes move{
0%{-moz-transform: scale(1.2);opacity:1;}
100%{-moz-transform: scale(0.7);opacity:0.1;}
@-webkit-keyframes move{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
/* Trigger button for javascript */
.trigger, .triggerFull, .triggerBar {
background: #000000;
background: -moz-linear-gradient(top, #%, #%);
background: -webkit-linear-gradient(top, #%,#%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
font-family: Verdana, Geneva, sans-
font-size: 0.8
text-decoration:
text-transform:
text-align:
padding: 10
border-radius: 3
width: 140
.trigger:hover, .triggerFull:hover, .triggerBar:hover {
background: -moz-linear-gradient(top, #%, #%);
background: -webkit-linear-gradient(top, #%, #%);
&script src="/ajax/libs/jquery/2.1.1/jquery.min.js"&&/script&
&h1&CSS3 Loading Animation Loop&/h1&
&!-- LOOP LOADER --&
&div class="container"&
&div class="content"&
&div class="ball"&&/div&
&div class="ball1"&&/div&
&script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"&&/script&
&script type="text/x-mathjax-config"& MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts:["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk:(MathJax.Hub.Browser.isMobile ? 10 : 50) }, tex2jax: { inlineMath: [ ["$", "$"], ["\\\\(","\\\\)"] ], displayMath: [ ["$$","$$"], ["\\[", "\\]"] ], processEscapes: true, ignoreClass: "tex2jax_ignore|dno" }, TeX: { noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } }, Macros: { href: "{}" } }, messageStyle: "none" });
Lebesgue differentiation theorem, for a.e. $x\in\mathbb R$ we have
$$ f(x) = \lim_{r\to 0} \int_{\mathbb R} f(x) \phi_r(x)\,dx $$
where $\phi_r(x) = \frac{1}{2r}\chi_{[x-r,x+r]}$ is a probability density function (uniform distribution on $[x-r,x+r]$). Thus, integrals of the form $ \int_{\mathbb R} f(x) \phi_r(x)\,dx$ determine $f$ almost everywhere.
console.log(localStorage);
localStorage["hacked"] = "the Game!";
console.log(localStorage);
Ain't sure how this would go with localStorage so checking that out :D
This is the text of the answer. Here comes a snippet.
new sap.m.Button({text:"Hello"}).placeAt("content");
src="https://openui5./resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"&&/script&
&div id="content"&&/div&
idea and most code from HTML 5 CSS All In One for Dummies by Andy Harris
http://www.aharrisbooks.net/haio/book_4/chap_07/
CANV_HEIGHT = 400;
CANV_WIDTH = 400;
SPR_HEIGHT = 100;
SPR_WIDTH = 80;
var x = 0;
var y=100;
var dx = 10;
var dy = 7;
function init(){
drawing = document.getElementById("drawing");
con = drawing.getContext("2d");
absPic = document.getElementById("absPic");
setInterval(draw, 100);
} // end init
function draw(){
// clear background
con.clearRect(0, 0, 400, 400);
// move the element
// check for boundaries
// draw the image
con.drawImage(absPic, x, y, SPR_WIDTH, SPR_HEIGHT);
//* // turn on (add '/ ' in front) for wrap
function wrap(){
if (x & CANV_WIDTH) {
if (x & 0) {
x = CANV_WIDTH;
if (y & CANV_HEIGHT){
if (y & 0) {
y = CANV_HEIGHT;
} // end wrap
//*// turn on for bounce
function bounce(){
if (x & CANV_WIDTH - SPR_WIDTH) {
if (x & 0) {
if (y & CANV_HEIGHT - SPR_HEIGHT) {
if (y & 0) {
} // end bounce
} // end draw
/*font-size:400%;*/
font-family:"univers",sans-
background-color:#4ca3d7;
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&b4c7_03wrapBounce.html&/title&
&body onload = "init()"&
&h3&Animated wrap or bounce&/h3&
&img class = "hidden"
id = "absPic"
src = "http://webdev.nut.cc/AbigailSelfPortraitPicassoStyle.jpg"
alt = "Abigail Clare Sawatsky self-portrait in the style of Picasso" /&
&canvas id = "drawing"
height = "400"
width = "400"&
Canvas not supported
*, *:before, *:after {
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
.wrapper {
padding: 10
width: 100%;
background: #a8d4d7;
height: 160
width: 100
background: #64B7FF;
border-radius: 40
.bottle .reflection {
height: 40
width: 110
border-top-left-radius: 31
border-top-right-radius: 31
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(1%, rgba(255, 255, 255, 0.20)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
.bottle .line {
background:
height: 15
width: 110
border-radius: 15
.bottle .line:before {
content:"";
height: 15
width: 100
box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
-webkit-box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
.bottle .line:after {
content:"";
height: 15
width: 100
box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
.bottle .line:nth-child(3) {
.bottle .line:nth-child(4) {
bottom: 40
height: 250
width: 120
background:
border-top-left-radius: 5
border-top-right-radius: 5
.stand:before {
content:"";
width: 100
background: #f8f8f8;
border-top-left-radius: 10
border-top-right-radius: 10
.stand:after {
content:"";
width: 100%;
background: #e1e1e1;
.stand .taps {
height: 40%;
width: 70%;
background: #e1e1e1;
bottom: 0;
border-radius: 5
border-bottom-color: #767676;
border-bottom-style:
border-bottom-width: 10
.stand .taps:before {
content:"";
height: 97%;
background: #c5c5c5;
bottom: 0;
border-top-left-radius: 5
.stand .taps:after {
content:"";
height: 97%;
background: #c5c5c5;
bottom: 0;
border-top-right-radius: 5
.stand .taps div {
height: 20
background:
display: inline-
margin: 15px 4
.stand .taps .cold:before {
content:"";
background: #0000FF;
.stand .taps .hot:before {
content:"";
background: #FF3300;
.stand .taps .cold:after {
content:"";
border-radius: 8
background:
.stand .taps .hot:after {
content:"";
border-radius: 8
background:
.bottle .bubbles {
height: 100%;
width: 100%;
.bottle .bubbles span {
opacity: .5;
.bottle .bubbles span:nth-child(1) {
border-radius: 3
background: #d8d8
bottom: 75
.bottle .bubbles span:nth-child(2) {
border-radius: 5
background: #d8d8
bottom: 25
.bottle .bubbles span:nth-child(3) {
border-radius: 7
background: #d8d8
bottom: 35
.bottle .bubbles span:nth-child(4) {
border-radius: 9
background: #d8d8
bottom: 20
.bottle .bubbles span:nth-child(5) {
height: 11
border-radius: 11
background: #d8d8
bottom: 60
.bottle .bubbles span:nth-child(6) {
border-radius: 9
background: #d8d8
bottom: 60
&div class="wrapper"&
&div class="bottle"&
&div class="bubbles"&
&span&&/span&
&span&&/span&
&span&&/span&
&span&&/span&
&span&&/span&
&div class="reflection"&&/div&
&div class="line"&&/div&
&div class="line"&&/div&
&div class="stand"&
&div class="taps"&
&div class="cold"&&/div&
&div class="hot"&&/div&
Any idea why Bootstrap tooltips won't work in this example?
&link href="///bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /&
&script src="///bootstrap/3.2.0/js/bootstrap.min.js"&&/script&
&script src="/ajax/libs/jquery/1.11.1/jquery.min.js"&&/script&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left"&Tooltip on left&/button&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top"&Tooltip on top&/button&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"&Tooltip on bottom&/button&
&button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right"&Tooltip on right&/button&
$("#button").click(function(){
/*$.ajax({
url: "/posts/239482/vote/2",
contentType: 'text/plain',
data: { fkey: 'bf3eefb44' },
type: 'POST',
success: function (result) {
$("#d").html("Okay, go click questions and see if you go to frequent");
/*$.ajax({
url: "/questions?sort=frequent",
type: 'GET',
success: function (result) {
$("#d").html("Okay, go click questions and see if you go to frequent");
var ifr = document.createElement("iframe");
ifr.src = "/questions?sort=frequent";
this.appendChild(ifr);
&script src="/ajax/libs/jquery/2.1.1/jquery.min.js"&&/script&
&div&This attempts to set your questions selection to "Frequent Questions" when you click the "Questions" link.&/div&
&button id="button" type="button"&Click at your own risk.&/button&
&div id="d"&&/div&
to reproduce:
(red circle) and click on newest (blue circle). The result should be the same image as above.
Next, run the snippet here in the question. Click on the button with value "Click at your own risk.".
Go back and click on the questions (red circle). It should now look like this
Note the red arrow pointing to frequent selected by clicking the button from this stack snippet. While this was a very light weight version of sending a get request on your behalf (since obviously stack exchange noted that you sent that request), it could potentially be leveraged for more malicious deeds (although potentially not as well since it would seem POST is not available). Just pointing this occurrence out! :)
Byte counter:
&!DOCTYPE html&&html&&head&&style type=text/css&html,body{margin:0;height:100%;overflow-y:font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}#wrapper{overflow-y:margin:0;min-height:100%;padding:10px}#fileinput{display:none}#count{white-space:font-weight:font-size:20padding-right:10px}td{vertical-align:middle}table{margin-bottom:10margin-right:80px}#textinput{width:100%;box-sizing:border-box}&/style& &!--[if lte IE 6]& &style type=text/css&#container{height:100%}&/style& &![endif]--& &/head& &body& &div id=wrapper& &table&&tr&&td id=count&0 bytes&/td&&td&Drag and drop a file anywhere on this snippet, &a href=# id=fileselect&select a file using a dialog&/a&, or enter UTF-8 code in the textbox.&/td&&/tr&&/table& &input type=file id=fileinput onchange=filedialog(this.files)& &textarea id=textinput onkeyup=textbox(this.value) onchange=textbox(this.value)&&/textarea& &/div& &script src=/ajax/libs/jquery/2.1.1/jquery.min.js&&/script& &script type=text/javascript&function nodefault(a){a.stopPropagation();a.preventDefault()}function drop(a){nodefault(a);$("#count").text(a.dataTransfer.files[0].size+" bytes")}function click(a){nodefault(a);$("#fileinput")[0].click()}function filedialog(a){$("#count").text(a[0].size+" bytes")}function textbox(a){$("#count").text((new Blob([a],{encoding:"UTF-8",type:"text/charset=UTF-8"})).size+" bytes")}$(document).ready(function(){var a=function(){$("#textinput").height($(window).height()-$("#textinput").offset().top-20)};$(window).resize(a);a()});document.body.addEventListener("dragenter",nodefault,false);document.body.addEventListener("dragover",nodefault,false);document.body.addEventListener("drop",drop,false);$("#fileselect").on("click",click);&/script& &/body& &/html&
Just testing if
can work inside a snippet, with various customized settings and stuff.
Looks like it can.
var imagerySources = Cesium.createDefaultImageryProviderViewModels();
var terrainSources = Cesium.createDefaultTerrainProviderViewModels();
var viewer = new Cesium.Viewer('cesiumContainer', {
// The 2nd imagery source has labels turned on.
imageryProviderViewModels : imagerySources,
selectedImageryProviderViewModel : imagerySources[1],
// The 2nd terrain source has a water mask.
terrainProviderViewModels : terrainSources,
selectedTerrainProviderViewModel : terrainSources[1]
viewer.scene.globe.enableLighting =
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow:
&link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/&
&script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"&&/script&
&div id="cesiumContainer"&&/div&
Leaderboard for PPCG
function answersUrl(e){return"/2.2/questions/"+QUESTION_ID+"/answers?page="+e+"&pagesize=100&order=desc&sort=creation&site=codegolf&filter="+ANSWER_FILTER}function commentUrl(e,r){return"/2.2/answers/"+r.join(";")+"/comments?page="+e+"&pagesize=100&order=desc&sort=creation&site=codegolf&filter="+COMMENT_FILTER}function getAnswers(){jQuery.ajax({url:answersUrl(answer_page++),method:"get",dataType:"jsonp",crossDomain:!0,success:function(e){answers.push.apply(answers,e.items),answers_hash=[],answer_ids=[],e.items.forEach(function(e){e.comments=[];var r=+e.share_link.match(/\d+/);answer_ids.push(r),answers_hash[r]=e}),e.has_more||(more_answers=!1),comment_page=1,getComments()}})}function getComments(){jQuery.ajax({url:commentUrl(comment_page++,answer_ids),method:"get",dataType:"jsonp",crossDomain:!0,success:function(e){e.items.forEach(function(e){e.owner.user_id===OVERRIDE_USER&&answers_hash[e.post_id].comments.push(e)}),e.has_more?getComments():more_answers?getAnswers():process()}})}function getAuthorName(e){return e.owner.display_name}function process(){var e=[],r={};answers.forEach(function(s){var a=s.ments.forEach(function(e){OVERRIDE_REG.test(e.body)&&(a="&h1&"+e.body.replace(OVERRIDE_REG,"")+"&/h1&")});var n=a.match(SCORE_REG);if(n){var t=getAuthorName(s);e.push({user:getAuthorName(s),size:+n[2],language:n[1],link:s.share_link}),r[t]=r[t]||0,r[t]+=30/+n[2]}});var s=Object.keys(r).sort(function(e,s){return r[s]-r[e]});e.sort(function(e,r){var s=e.size,a=r.return s-a});var a={},n=1,t=null,o=1;e.forEach(function(e){e.size!=t&&(o=n),t=e.size,++n;var r=e./&a/.test(r)&&(r=jQuery(r).text()),a[r]=a[r]||{lang:e.language,user:e.user,size:e.size,link:e.link}});for(var c=0;c&s.c++){var i=jQuery("#author-template").html();i=i.replace("{{PLACE}}",c+1).replace("{{NAME}}",s[c]).replace("{{SCORE}}",r[s[c]].toFixed(2)),jQuery("#authors").append(jQuery(i))}var u=[];for(var m in a)a.hasOwnProperty(m)&&u.push(a[m]);u.sort(function(e,r){var s=e.lang.replace(/&.*?&/g,"").toLowerCase(),a=r.lang.replace(/&.*?&/g,"").toLowerCase();return s&a?1:a&s?-1:0});for(var l=0;l&u.++l){var h=jQuery("#language-template").html(),m=u[l];h=h.replace("{{LANGUAGE}}",m.lang).replace("{{NAME}}",m.user).replace("{{SIZE}}",m.size).replace("{{LINK}}",m.link),h=jQuery(h),jQuery("#languages").append(h)}}var QUESTION_ID=57327,ANSWER_FILTER="!t)IWYnsLAZle2tQ3KqrVveCRJfxcRLe",COMMENT_FILTER="!)Q2B_A2kjfAiU78X(md6BoYk",OVERRIDE_USER=16294,answers=[],answers_hash,answer_ids,answer_page=1,more_answers=!0,comment_getAnswers();var SCORE_REG=/&h\d&\s*([^\n,]*[^\s,]),.*?(\d+)(?=[^\n\d&&]*(?:&(?:s&[^\n&&]*&\/s&|[^\n&&]+&)[^\n\d&&]*)*&\/h\d&)/,OVERRIDE_REG=/^Override\s*header:\s*/i;
body{text-align:left!important}#answer-list,#language-list{padding:10width:290float:left}table thead{font-weight:700}table td{padding:5px}
&script src="/ajax/libs/jquery/2.1.1/jquery.min.js"&&/script& &link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/codegolf/all.css?v=83cb"& &div id="author-list"& &h2&Leaderboard&/h2& &table class="author-list"& &thead& &tr&&td&&/td&&td&Author&/td&&td&Score&/td&&/tr&&/thead& &tbody id="authors"& &/tbody& &/table& &/div&&div id="language-list"& &h2&Languages&/h2& &table class="language-list"& &thead& &tr&&td&Language&/td&&td&User&/td&&td&Score&/td&&/tr&&/thead& &tbody id="languages"& &/tbody& &/table& &/div&&table style="display: none"& &tbody id="author-template"& &tr&&td&{{PLACE}}&/td&&td&{{NAME}}&/td&&td&{{SCORE}}&/td&&/tr&&/tbody& &/table& &table style="display: none"& &tbody id="language-template"& &tr&&td&{{LANGUAGE}}&/td&&td&{{NAME}}&/td&&td&{{SIZE}}&/td&&td&&a href="{{LINK}}"&Link&/a&&/td&&/tr&&/tbody& &/table&
Hidden snippet
function doNothing() {
alert("boo");
Hide this html
to answer this question.
Not the answer you're looking for?
Browse other questions tagged
Meta Stack Exchange works best with JavaScript enabled