narrowcasting: add some fun extensions/examples - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit db8eeb55c0f54f14a83bf10b4276c8063bd491dc
(DIR) parent 908a85083071d1f8b4559e48f276b1a837f13e81
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Wed, 20 Aug 2025 20:18:26 +0200
narrowcasting: add some fun extensions/examples
- Gary the Snail (from Spongebob) animation for the progress bar, meow.
- Bouncing soccerball (used for euro- and world cup).
- snow: snow effect, for winter times.
- santa on his sled for the progress bar.
Diffstat:
A narrowcasting/fun/progressbar/gary… | 0
A narrowcasting/fun/progressbar/gary… | 2 ++
A narrowcasting/fun/progressbar/sant… | 2 ++
A narrowcasting/fun/progressbar/sant… | 0
A narrowcasting/fun/progressbar/styl… | 45 +++++++++++++++++++++++++++++++
A narrowcasting/fun/snow/snippet.html | 10 ++++++++++
A narrowcasting/fun/snow/snow.css | 64 +++++++++++++++++++++++++++++++
A narrowcasting/fun/soccer/ball.svg | 18 ++++++++++++++++++
A narrowcasting/fun/soccer/snippet.h… | 4 ++++
A narrowcasting/fun/soccer/soccer.js | 72 +++++++++++++++++++++++++++++++
M narrowcasting/index.html | 26 +++++++++++++++++++++++++-
M narrowcasting/sfeed/update.sh | 0
M narrowcasting/style.css | 46 +++++++++++++++++++++++++++++++
13 files changed, 288 insertions(+), 1 deletion(-)
---
(DIR) diff --git a/narrowcasting/fun/progressbar/gary-optimized.png b/narrowcasting/fun/progressbar/gary-optimized.png
Binary files differ.
(DIR) diff --git a/narrowcasting/fun/progressbar/gary.html b/narrowcasting/fun/progressbar/gary.html
@@ -0,0 +1 @@
+<div class="progressbar"><img class="gary" src="gary-optimized.png" alt="" /></div>
+\ No newline at end of file
(DIR) diff --git a/narrowcasting/fun/progressbar/santa.html b/narrowcasting/fun/progressbar/santa.html
@@ -0,0 +1 @@
+<div class="progressbar"><img class="santa" src="santa.png" alt="" /></div>
+\ No newline at end of file
(DIR) diff --git a/narrowcasting/fun/progressbar/santa.png b/narrowcasting/fun/progressbar/santa.png
Binary files differ.
(DIR) diff --git a/narrowcasting/fun/progressbar/style-snippet.css b/narrowcasting/fun/progressbar/style-snippet.css
@@ -0,0 +1,44 @@
+.progressbar {
+ background: none;
+ text-align: right;
+ vertical-align: bottom;
+ height: 32px;
+}
+
+@keyframes move-snail {
+ 0% {
+ padding-left: -4px;
+ }
+ 20% {
+ padding-left: -4px;
+ }
+ 40% {
+ padding-left: 30px;
+ }
+ 60% {
+ padding-left: 20px;
+ }
+ 80% {
+ padding-left: 0px;
+ }
+ 100% {
+ padding-left: -4px;
+ }
+}
+
+/* gary moves like a snail */
+.gary {
+ position: absolute;
+ margin-left: -36px;
+ height: 32px;
+
+ animation: linear move-snail 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+}
+
+.santa {
+ position: absolute;
+ margin-left: -36px;
+ height: 32px;
+}
+\ No newline at end of file
(DIR) diff --git a/narrowcasting/fun/snow/snippet.html b/narrowcasting/fun/snow/snippet.html
@@ -0,0 +1,10 @@
+<head>
+<link rel="stylesheet" type="text/css" href="snow.css" />
+</head>
+<body>
+
+<div class="snow_wrap">
+<div class="snow"></div>
+</div>
+
+</body>
(DIR) diff --git a/narrowcasting/fun/snow/snow.css b/narrowcasting/fun/snow/snow.css
@@ -0,0 +1,64 @@
+*,*::after,*::before {
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -ms-box-sizing:border-box;
+ -moz-box-sizing: border-box;
+}
+body {
+ font-family: arial;
+ font-size: 16px;
+ margin: 0;
+ background: #fff;
+ color: #000;
+}
+.snow_wrap {
+ height: 100vh;
+ width: 100%;
+ background-size: cover;
+ background-position: center bottom;
+ position: relative;
+ overflow: hidden;
+ z-index: 999999;
+}
+.snow,.snow:after,.snow::before {
+ content: '';
+ position: absolute;
+ top: -650px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background-image: radial-gradient(4px 4px at 100px 50px,#fff,transparent),
+ radial-gradient(6px 6px at 200px 150px, #fff,transparent),
+ radial-gradient(3px 3px at 300px 250px,#fff,transparent),
+ radial-gradient(4px 4px at 400px 350px,#fff,transparent),
+ radial-gradient(6px 6px at 500px 100px,#fff,transparent),
+ radial-gradient(3px 3px at 50px 200px,#fff,transparent),
+ radial-gradient(4px 4px at 150px 300px,#fff,transparent),
+ radial-gradient(6px 6px at 250px 400px,#fff,transparent),
+ radial-gradient(3px 3px at 350px 500px,#fff,transparent),
+ radial-gradient(4px 4px at 550px 550px,#fff,transparent);
+ background-size: 650px 650px;
+ animation: SnowAnim 3s linear infinite;
+}
+.snow:after {
+ margin-left: -250px;
+ opacity: 0.5;
+ filter: blur(2px);
+ animation-direction: reverse;
+ animation-duration: 6s;
+}
+.snow::before {
+ margin-left: -350px;
+ opacity: 0.7;
+ filter: blur(1px);
+ animation-direction: reverse;
+ animation-duration: 9s;
+}
+@keyframes SnowAnim {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(650px);
+ }
+}
(DIR) diff --git a/narrowcasting/fun/soccer/ball.svg b/narrowcasting/fun/soccer/ball.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
+ <title>ball</title>
+ <desc>Created with Sketch.</desc>
+ <defs/>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <g id="ball" sketch:type="MSLayerGroup">
+ <g id="Page-1" sketch:type="MSShapeGroup">
+ <circle id="Oval-1" fill="#FFFFFF" cx="20" cy="20" r="20"/>
+ <g id="noun_52564_cc" fill="#000000">
+ <path d="M38.0764789,11.4325687 C35.9095754,6.8668251 32.1349263,3.3154938 27.4484811,1.4332349 C25.0812755,0.4823344 22.5755019,0 20,0 C17.5421922,0 15.141677,0.4410295 12.8655179,1.3102085 C8.4486587,2.9974906 4.7566175,6.2134974 2.4706875,10.3648598 C0.8545035,13.2975062 0,16.6294331 0,20.0004441 C0,20.8936066 0.0595132,21.7920988 0.1767632,22.6710488 C0.3619648,24.0612023 0.6955054,25.4322578 1.1667259,26.7460194 L1.1667259,26.7460194 C2.5088826,30.4958806 4.9222775,33.7340943 8.1444306,36.1093469 L8.2234855,36.1670849 L8.225262,36.1670849 C11.509149,38.5641003 15.3939421,39.8867447 19.4657133,39.9924496 C19.6371469,39.9977793 19.8116895,40 19.9995559,40 C25.3308758,40 30.3464203,37.9276498 34.1215136,34.1622438 C37.5639545,30.7294975 39.6358145,26.1757456 39.955143,21.3395217 C39.9844555,20.894939 40,20.4441385 40,20.0004441 C40,17.0025094 39.3533487,14.1200506 38.0764789,11.4325687 L38.0764789,11.4325687 L38.0764789,11.4325687 Z M33.6693907,33.1611556 L36.0654646,26.7677822 L38.9771718,21.2631298 L39.3502398,21.481646 C39.0087049,25.9954254 37.0945106,30.2444982 33.9372002,33.5031423 L33.6693907,33.1611556 L33.6693907,33.1611556 Z M12.1473619,35.8970487 L10.5875822,30.8058893 L16.8240362,27.992272 L24.3271451,30.3333259 L25.7470243,35.327219 L19.4550542,38.2851813 L12.1473619,35.8970487 Z M13.2692308,5.160445 L19.7348552,6.8459506 L20.7416948,13.7687371 L14.937822,19.2871577 L8.0649316,17.5927694 L6.9124178,10.5887056 L13.2692308,5.160445 L13.2692308,5.160445 Z M38.5468112,20.8078879 L35.6550897,26.2752326 L31.1307515,24.5386512 L29.4808136,16.4566632 L32.7025227,11.2740112 L36.823148,12.8129511 L38.5468112,20.8078879 L38.5468112,20.8078879 Z M21.1356369,14.2133197 L28.9114408,16.6316537 L30.5471665,24.6443561 L24.5012436,29.7661611 L17.0572038,27.4433168 L15.3504175,19.7139748 L21.1356369,14.2133197 L21.1356369,14.2133197 Z M37.4649138,11.5316116 L36.9692663,12.2342386 L32.7509327,10.6588794 L27.6341268,4.9619151 L27.6341268,2.1527392 C31.9403979,3.9954698 35.4139279,7.3082987 37.4649138,11.5316116 L37.4649138,11.5316116 L37.4649138,11.5316116 Z M27.0412151,1.911572 L27.0412151,4.8340032 L20.0075502,6.3041016 L13.4761947,4.6012747 L13.2825546,1.7889898 C15.4299165,0.9966468 17.6883105,0.5938132 20,0.5938132 C22.4320483,0.593369 24.7992539,1.0375075 27.0412151,1.911572 L27.0412151,1.911572 L27.0412151,1.911572 Z M2.9081542,10.8032244 L6.3412684,10.7708023 L7.4973352,17.796629 L4.7899272,24.1144989 L1.6934624,24.1144989 L0.7576834,22.5329218 C0.6488719,21.6983856 0.5933558,20.8469721 0.5933558,20.0004441 C0.5933558,16.7875464 1.3936756,13.6115121 2.9081542,10.8032244 L2.9081542,10.8032244 L2.9081542,10.8032244 Z M1.7449813,26.5985654 L1.8107124,24.7083121 L4.8467756,24.7083121 L9.9613608,30.7872355 L11.49849,35.8046679 L8.4282288,35.5812662 C5.3499734,33.2912882 3.0409487,30.1880926 1.7449813,26.5985654 L1.7449813,26.5985654 L1.7449813,26.5985654 Z M19.7717179,39.4061868 L19.7717179,38.7919433 L26.2093622,35.7655837 L33.2265944,33.5582155 L33.515278,33.9259621 C29.8743116,37.4621927 25.0857168,39.4070751 20,39.4070751 C19.9218334,39.4070751 19.8463315,39.406631 19.7717179,39.4061868 L19.7717179,39.4061868 L19.7717179,39.4061868 Z" id="Shape"/>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
+\ No newline at end of file
(DIR) diff --git a/narrowcasting/fun/soccer/snippet.html b/narrowcasting/fun/soccer/snippet.html
@@ -0,0 +1,3 @@
+<canvas id="canvas" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999" width="1920" height="1080"></canvas>
+<script type="text/javascript" src="soccer.js">
+</script>
+\ No newline at end of file
(DIR) diff --git a/narrowcasting/fun/soccer/soccer.js b/narrowcasting/fun/soccer/soccer.js
@@ -0,0 +1,72 @@
+(function() {
+ var fps = 120;
+ var now;
+ var then = performance.now();
+ var interval = 1000 / fps;
+ var delta;
+
+ var canvas = document.getElementById("canvas");
+ if (!canvas)
+ return;
+ var ctx = canvas.getContext("2d");
+ if (!ctx)
+ return;
+
+ var x = 0;
+ var y = 0;
+ var stepx = 3; // speed
+ var stepy = 3; // speed
+ var canvasw = canvas.width;
+ var canvash = canvas.height;
+ var w = 32, h = 32;
+
+ var anim_img = new Image(w, h);
+ anim_img.src = "fun/soccer/ball.svg";
+ anim_img.width = w;
+ anim_img.height = h;
+
+ var degrees = 0.0; // current ball rotation / spin.
+
+ function update() {
+ if (x < 0 || x > canvasw - w)
+ stepx = -stepx; // change direction
+ if (y < 0 || y > canvash - h)
+ stepy = -stepy; // change direction
+
+ x += stepx;
+ y += stepy;
+
+ degrees += 3; // spin speed
+ if (degrees > 360.0)
+ degrees = 0.0;
+ }
+
+ function dodraw() {
+ ctx.clearRect(0, 0, canvasw, canvash);
+
+ ctx.save();
+
+ // rotate / spin ball.
+ ctx.translate(x + w / 2, y + h / 2);
+ ctx.rotate(degrees * Math.PI / 180.0);
+ ctx.translate(-x - w / 2, -y - h / 2);
+ ctx.drawImage(anim_img, x, y, w, h);
+
+ ctx.restore();
+ }
+
+ function draw() {
+ requestAnimationFrame(draw);
+
+ now = performance.now();
+ delta = now - then;
+
+ if (delta > interval) {
+ update();
+ dodraw();
+ then = now - (delta % interval);
+ }
+ }
+
+ draw();
+})();
(DIR) diff --git a/narrowcasting/index.html b/narrowcasting/index.html
@@ -4,11 +4,21 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Narrowcasting</title>
<link rel="stylesheet" type="text/css" href="style.css" />
+<!-- fun: -->
+<!-- snow -->
+<link rel="stylesheet" type="text/css" href="fun/snow/snow.css" />
+
<link rel="icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
+
+<!-- fun: snow -->
+<div class="snow_wrap">
+<div class="snow"></div>
+</div>
+
<div class="screen check-updates" data-update="120000" data-url="data/updated.txt">
<div class="logo"></div>
<div class="topbar-right">
@@ -41,10 +51,24 @@
<video loop data-reset-on-play="1" style="width: 100%; height: 100%"><source src="https://codemadness.org/paste/oh-my-god-wow.mp4" type="video/mp4"></video>
</div>
- <div class="progressbar"></div>
+ <!-- default progressbar -->
+ <!--<div class="progressbar"></div>-->
+
+ <!-- fun: -->
+ <!-- gary -->
+ <!--<div class="progressbar"><img class="gary" src="fun/progressbar/gary-optimized.png" alt="" /></div>-->
+
+ <!-- santa -->
+ <div class="progressbar"><img class="santa" src="fun/progressbar/santa.png" alt="" /></div>
</div>
</div>
<script type="text/javascript" src="script.js">
</script>
+
+<!-- fun: soccer -->
+<canvas id="canvas" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999" width="1920" height="1080"></canvas>
+<script type="text/javascript" src="fun/soccer/soccer.js">
+</script>
+
</body>
</html>
(DIR) diff --git a/narrowcasting/sfeed/update.sh b/narrowcasting/sfeed/update.sh
(DIR) diff --git a/narrowcasting/style.css b/narrowcasting/style.css
@@ -236,3 +236,48 @@ body > .screen > .slides > .slide-2 {
height: 365px;
font-weight: bold;
}
+
+/* fun: */
+/* for progressbar image */
+.progressbar {
+ background: none;
+ text-align: right;
+ vertical-align: bottom;
+ height: 32px;
+}
+@keyframes move-snail {
+ 0% {
+ padding-left: -4px;
+ }
+ 20% {
+ padding-left: -4px;
+ }
+ 40% {
+ padding-left: 30px;
+ }
+ 60% {
+ padding-left: 20px;
+ }
+ 80% {
+ padding-left: 0px;
+ }
+ 100% {
+ padding-left: -4px;
+ }
+}
+/* gary moves like a snail */
+.gary {
+ position: absolute;
+ margin-left: -36px;
+ height: 32px;
+
+ animation: linear move-snail 2s;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+}
+/* santa slides his sled */
+.santa {
+ position: absolute;
+ margin-left: -36px;
+ height: 32px;
+}
+\ No newline at end of file