Model profile
llama3.1
26/36answered (R6–R42)
10DNF / pending
1.3 smedian latency
2.69avg. score · 16 scored rounds (R6–R42)
Low participation: this average is drawn from only 16 of 36 rounds (44%). Not directly comparable to models with fuller participation.
Rounds & answers 24
▶ R6 · Extraction → JSON1.1 s Open round →
{"name": "AquaPur X2 Trinkbrunnen", "brand": "PetFlow", "price_eur": 29.99, "weight_g": 800, "features": ["Dreifach-Filter", "leisem 2-Watt-Pumpsystem", "spuelmaschinenfest Edelstahlaufsatz"], "in_stock": false}▶ R7 · Sentiment classification1.4 s Open round →
[
{"id":1,"sentiment":"positive"},
{"id":2,"sentiment":"negative"},
{"id":3,"sentiment":"neutral"},
{"id":4,"sentiment":"negative"},
{"id":5,"sentiment":"positive"},
{"id":6,"sentiment":"neutral"},
{"id":7,"sentiment":"neutral"},
{"id":8,"sentiment":"negative"},
{"id":9,"sentiment":"positive"},
{"id":10,"sentiment":"neutral"}
]▶ R8 · Translation DE↔EN1.2 s Open round →
A) "Old hat — he who arrives late will be punished by life. We got the cart out of the mud, but now we must not take a second step before a first one." --- B) "Das Beweis der Schuldigkeit liegt im Geschmack: Unser Schraubenzieher-Budget zwang uns zu Ersparnissen; dennoch erfolgte die Einführung ohne einen Rückschlag."
▶ R9 · One-liner code1.3 s Open round →
1. ^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$
2. SELECT TOP 5 customer_id, SUM(amount) AS total_order_value FROM orders GROUP BY customer_id ORDER BY total_order_value DESC;
3. .items[].id
4. nav a[href^='http']
5. grep -oE '[0-9]+(\.[0-9]+)?' access.log | sort -u | wc -l▶ R10 · Facts quiz0.9 s Open round →
1. Canberra 2. 1989 3. W 4. I'm a teapot 5. Kafka 6. Jupiter 7. 101010 8. 443 9. Linus 10. 97
▶ R11 · Micro-copy & slogans0.9 s Open round →
1. Purr-fectly clean drinking for your feline friend. 2. Bake fresh in the comfort of home. 3. Compare, don't settle - choose the best AI. 4. Silence is bliss with QuietWave headphones always. 5. Secure all devices easily with CodeGuard.
▶ R13 · Image prompts1.3 s Open round →
1. A sleek ergonomic gaming chair placed center-stage in a dimly lit streaming room, surrounded by neon lights and soft, wispy fog. 2. A single, elegantly crafted gin bottle sits atop a polished bar, illuminated by the warm, golden hues of a moody evening sky just beyond. 3. An urban e-scooter leans casually against a vibrant graffiti wall, the morning sun casting long shadows amidst a haze of gentle city activity.
▶ R14 · Product names1.0 s Open round →
1. HydroHint — Stay hydrated every step of the way 2. WaterMind — Drink up for a clearer mind 3. AquaMinder — Always remember to drink water 4. HydratePro — Expert care in every bottle 5. DrinkDetect — Drink more, live better now
▶ R15 · CSS spinner1.3 s Open round →
```
<div class="spinner"></div>
<style>
.spinner {
width: 40px;
height: 40px;
border-radius: 50%;
animation: spin 2s linear infinite;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
```▶ R16 · Explain it to a child (German)1.3 s Open round →
Ein Akku ist wie ein Wasserbehälter für Energie. Wenn du Wasser zum Behälter hineinpumpst, kann er langsam das Wasser drücken und es wird frei fließen. Ein Akku funktioniert ähnlich, indem er Energie speichert und sie dann entweder schnell oder langsam ausgibt, je nachdem wie oft man ihn lädt. Wenn der Behälter leer ist, benötigst du wieder Energie zum "Wasser" hinzufügen.
▶ R17 · Logic riddle1.2 s★ 1.5/10 Open round →
Ziehen Sie zunächst aus der "Äpfel"-Kisten. Alle genannten Früchte sind falsch. Wenn Äpfel ist, dann ist Birne die Gemischte und der dritte ist das Original. Wenn Birnen ist, dann ist das Gemischte die Äpfelkiste. Dann sollte man aus der Äpfelkiste nehmen, weil sie die wahrhaftige Gemischte kisten ist.
📝 wrong box (apples), incoherent
▶ R18 · German registers & tone1.2 s★ 6/10 Open round →
1. "Sehr geehrte Damen und Herren, leider teilen wir Ihnen mit, dass wir nicht in der Lage sein werden, den angekündigten Liefertermin einzuhalten." 2. "Der geplante Liefertermin wird aufgrund von Faktoren die nicht unsere Verantwortung sind nicht gehalten werden können." 3. "Entschuldigung für das Problem - der Termin wird sich leider verschieben."
▶ R19 · Table QA0.8 s★ 3.5/10 Open round →
1. 54,00 2. 830 3. 19,99 4. 19,51 5. 2
📝 misread the question: values instead of product names, warehouse count wrong (2)
▶ R20 · JSON repair1.1 s★ 7.5/10 Open round →
```json
{
"name": "Trinkflasche Pro",
"price": 29.90,
"tags": ["outdoor", "sport"],
"stock": {
"berlin": 12,
"muenchen": 7,
"hamburg": null
},
"active": true
}
```📝 Markdown fence despite explicit ban (−2.5)
▶ R21 · Sorting race bubble/insertion/selection25.5 sERRSTATLIM★ 1.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sorting Algorithms</title>
<style>
canvas {
border: 1px solid black;
width: 300px;
height: 200px;
display: inline-block;
}
label {
font-size: 24pt;
}
span {
padding-left: 5px;
}
</style>
</head>
<body>
<canvas id="bCanvas" width="100"></canvas>
<label for="bubbleSort">Bubble Sort:</label> <span id="bsStatus"></span><br>
<canvas id="iCanvas" width="100"></canvas>
<label for="insertionSort">Insertion Sort:</label> <span id="isStatus"></span><br>
<canvas id="sCanvas" width="100"></canvas>
<label for="selectionSort">Selection Sort:</label> <span id="ssStatus"></span>
<script>
let bubblesortCanvas = document.getElementById("bCanvas");
let insertionSortCanvas = document.getElementById("iCanvas");
let selectionSortCanvas = document.getElementById("sCanvas");
function shuffle(arr) {
for (let i = arr.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
}
shuffle([3,7,9,2,4,6]);
console.log(shuffle([3,7,9,2,4,6]));
function bubbleSort(arr) {
let len = arr.length;
for (let i = 0; i < len - 1; ++i) {
let swapped = false;
for(let j=0;j<len-i-1;j++) {
if(arr[j] > arr[j+1]) {
[arr[j], arr[j+1]] = [arr[j+1], arr[j]];
swapped = true;
let ctx = bubblesortCanvas.getContext("2d");
ctx.fillStyle = "blue";
for (let k=0;k<arr.length;k++)
ctx.fillRect(k*10, 200-arr[k]*2, 5, -arr[k]*2);
if (swapped) {
document.getElementById('bsStatus').innerText="Swap: " + i+j;
} else break;
const wait= () => { return new Promise(resolve=> setTimeout(() => {resolve()},100))};
const render = async() => {
let swapped=false
let len=bubbleSortCanvas.width/10//arr.length
for (j=0;j<len-1; j++) {
let ctx=bubblesortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (k=0;k<arr.length;k++)
ctx.fillRect(k*10,200-arr[k]*2,5,-arr[k]*2);
if(swapped){
document.getElementById('bsStatus').innerText="Done"
}else{
if(arr[j]>arr[j+1]){
[arr[j], arr[j+1]] =[arr[j+1], arr[j]];
swapped=true;
ctx.fillStyle = "orange";
ctx.fillRect(j*10, 200-arr[j]*2, 5,-arr[j]*2);
wait().then(render);
}}}
}
}
async function renderBubbleSort() {
document.getElementById('bsStatus').innerText="Sort in progress...";
const ctx=bubblesortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (let k=0;k<array.length;k++)
ctx.fillRect(k*10,200-array[k]*2,5,-array[k]*2);
for(let i=0;i<array.length-1;++i) {
let swapped = false;
for(let j=0;j<parseInt(bubblesortCanvas.width/10)-1;j++) {
let swapCount=bubbleSortArray[i+j]
if(array[j]>array[j+1]){
array[j], array[j+1]= [array[j + 1], array[j]];
document.getElementById('bsStatus').innerText="Swap: "+(i+j)
ctx.fillStyle = "orange";
ctx.fillRect(swapCount * 10, 200-array[swapCount]*2, 5,-array[swapCount]*2);
ctx.clearRect(j*10+5,0,j*10+20,200);
}
await wait();}
if(!swapped) break;
document.getElementById('bsStatus').innerText="Done";
bubblesortCanvas.width=bubbleSortCanvas.width;
}
async function renderBubbleSort() {
document.getElementById('bsStatus').innerText="Sort in progress...";
const ctx=bubblesortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (let k=0;k<array.length;k++)
ctx.fillRect(k*10,200-array[k]*2,5,-array[k]*2);
for(let i=0;i<array.length-1;++i) {
let swapped = false;
for(let j=0;j<parseInt(bubblesortCanvas.width/10)-1;j++) {
let swapCount=bubbleSortArray[i+j]
if(array[j]>array[j+1]){
array[j], array[j+1]= [array[j + 1], array[j]];
document.getElementById('bsStatus').innerText="Swap: "+(i+j)
ctx.fillStyle = "orange";
ctx.fillRect(swapCount * 10, 200-array[swapCount]*2, 5,-array[swapCount]*2);
ctx.clearRect(j*10+5,0,j*10+20,200);
}
await wait()
}
if(!swapped) break;
document.getElementById('bsStatus').innerText="Done";
bubblesortCanvas.width=bubbleSortCanvas.width;
}
async function renderBubbleSort() {
document.getElementById('bsStatus').innerText="Sort in progress...";
const ctx=bubblesortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (let k=0;k<array.length;k++)
ctx.fillRect(k*10,200-array[k]*2,5,-array[k]*2);
for(let i=0;i<array.length-1;++i) {
let swapped = false;
for(let j=0;j<parseInt(bubblesortCanvas.width/10)-1;j++) {
let swapCount=bubbleSortArray[i+j]
if(array[j]>array[j+1]){
array[j], array[j+1]= [array[j + 1], array[j]];
document.getElementById('bsStatus').innerText="Swap: "+(i+j)
ctx.fillStyle = "orange";
ctx.fillRect(swapCount * 10, 200-array[swapCount]*2, 5,-array[swapCount]*2);
ctx.clearRect(j*10+5,0,j*10+20,200);
}
}
if(!swapped) break;
document.getElementById('bsStatus').innerText="Done";
bubblesortCanvas.width=bubbleSortCanvas.width;
}
const wait= async() => {await new Promise(resolve=>setTimeout(() => {
resolve()
},100))};
function startBubbleSort() {
array=[3,7,9,2,4,6];
console.log([3,7,9,2,4,6]);
render =async () =>{
let swapped=false
let len=bubbleSortCanvas.width/10//arr.length
for (j=0;j<len-1; j++) {
let ctx=bubblesortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (k=0;k<array.length;k++)
ctx.fillRect(k*10,200-array[k]*2,5,-array[k]*2);
if(swapped){
document.getElementById('bsStatus').innerText="Done"
}else{
if(array[j]>array[j+1]){
[array[j], array[j+1]] =[array[j+1], array[j]];
swapped=true;
ctx.fillStyle = "orange";
ctx.fillRect(j*10, 200-array[j]*2, 5,-array[j]*2);
ctx.clearRect(swapCount*j/j*j+j,j*k,j*k-j);
}
await wait().then(render);
}}}
document.getElementById('bsStatus').innerText="Sort in progress..";
}
async function insertionSort(arr) {
let len = arr.length;
for (let i = 1; i < len; ++i) {
let swapped=false
for(let j=i;j>0;j--) {
if(arr[j]<arr[j-1]){
[arr[j], arr[j-1]] =[ arr[j - 1], arr[j]];
document.getElementById('isStatus').innerText='Swap:'+(j)
let ctx = insertionSortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (k=0;k<arr.length;k++)
ctx.fillRect(k*10,200-arr[k]*2,5,-arr[k]*2);
await wait();
}
if(swapped)break
document.getElementById('isStatus').innerText='Done!'
await insertionSort(arr)}
}
let ctx=isCanvas.getContext("2d")
for (k=0;k<array.length;k++)
ctx.fillRect(k*10,200-array[k]*2,5,-array[k]*2)
}
async function selectionSort(arr) {
let len = arr.length;
for (let i = 0; i < len - 1; ++i) {
let minPos=i
for(let j=i+1;j<len;j++) {
if(arr[j] < arr[minPos]) {
[arr[i],arr[minPos]] =[ arr[minPos], array[i]];
document.getElementById('ssStatus').innerText = 'Swap: '+j
let ctx= selectionSortCanvas.getContext("2d");
ctx.fillStyle="blue";
for (k=0;k<arr.length;k++)
ctx.fillRect(k*10,200-arr[k]*2,5,-arr[k]*2);
}
const wait1 = () => { return new Promise(resolve=> setTimeout(() => {
resolve()} ,
100))}
await wait1();
if(minPos!=i) break;
document.getElementById('ssStatus').innerText="Done"
ctx.fillStyle = "orange";
ctx.fillRect((i+1)*10,200-array[i+1]*2,5,-array[i+1]*2);
}
}
}
async function renderSelectionSort() {
document.getElementById('ssStatus').innerText="Sort in progress..";
const ctx = selectionSortCanvas.getContext("2d");
let arr=shuffle([3,2,4,7,9,6]);
for (let k=0;k<arr.length;k++)
ctx.fillRect(k*10,200-arr[k]*2,5,-arr[k]*2);
await selectionSort(arr);
document.getElementById('ssStatus').innerText="Done"
}
</script>
</body>
</html>
```▶ R22 · Hexagon balls16.9 sERRBLANKLIM★ 0.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const balls = [];
const hexagon = {
x: canvas.width / 2,
y: canvas.height / 2,
angle: 0,
speed: Math.PI * .05
};
let gravity = 1;
class Ball {
constructor() {
this.x = Math.random() * (canvas.width - 20);
this.y = Math.random() * (canvas.height - 20);
this.vx = Math.random() * 4 - 2;
this.vy = Math.random() * 4 + 2;
this.r = 10;
}
}
for(let i=0; i<8; ++i) {
balls[i] = new Ball();
}
function drawHexagon() {
ctx.beginPath();
ctx.moveTo(hexagon.x, hexagon.y);
for(let i=1; i<=6; ++i) {
const a = hexagon.angle + Math.PI * (3*i - 1)/2;
const r = canvas.width / 200;
ctx.lineTo(hexagon.x + Math.cos(a)*r*20,
hexagon.y + Math.sin(a)*r*20);
}
ctx.strokeStyle='#ff0000';
ctx.stroke();
}
function drawBall(b) {
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, 2*Math.PI);
ctx.fill();
}
function ballCollide(b1, b2, wall) {
const d = Math.pow((b1.x - b2.x), 2) + Math.pow((b1.y - b2.y), 2);
if (d <= (Math.max(b1.r,b2.r)*2)**2) return true;
const n1 = [{x:b2.x-b1.x, y:b2.y-b1.y}];
const n2 = [
{x: Math.cos(hexagon.angle + Math.PI*3/4), y:-Math.sin(hexagon.angle + Math.PI*3/4)},
{x: -Math.cos(hexagon.angle + Math.PI*5/4), y: Math.sin(hexagon.angle + Math.PI*5/4)}
];
const p = [{x:b1.x, y:b1.y},{x:b2.x,y:b2.y}]
for (let i=0; i<=p.length-2; ++i) {
if ((n1[0].x*p[i+1].x + n1[0].y*p[i+1].y)*wall +
(Math.pow(p[i+1].x - p[i].x, 2)+ Math.pow( p[i+1]. y- p[i]. y,
2)) < 0) { const d = Math.max(
Math.abs((p[i]. x* n2[0]. y + p[i].y *n2[0].x)-(b1.x*n2[0]. y
+(b1.y * n2[0]
.x)),Math.abs((p[i+1].x * n2[0].y+p[i+1].y *
n2[ 0 ].x))
-wall*( Math.pow(p[i].
x ,2)))+ Math.pow(
2)* n2
.x))), Math.pow( p.
[i].
ix), d = (Math.abs((p[i].
y)*n2[
1
.
x)-(b1.
.
x- Math.pow(p[i+3]. y*p[i],*n*
Math.pow p[ i ],*Math.
wall (
0.*
p[ i ]**2.5
**2)* Math).
n2 .
return true;
}
function update() {
requestAnimationFrame(update);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(let b=balls; b!=null; ++i) {
b.x += b.vx;
b.y += b.vy;
drawBall(b);
if (b.x - b.r < 0 || b.x + b.r > canvas.width) {
b.vx = -b.vx
drawBall(b);
} else if (b.y - b.r < 0 || b.y + b.r > canvas.height) {
b.vy=-b .vy;
ballCollide (balls[b ],walls ) || ballCollid e(balls[b]. n2 .
wall, wall );
gravity +=.001*ballr)
} else if (dist(b, {x:hexagon.x + 200*Math.
sin(hexagon.angle), y: hexagon.y - 100
0 * Math.cos(hexagon.angle)}) < 30) drawHexagon ( );
}
hexagon.angle += hexagon.speed;
for(let i=0; i<balls.length(); balls[i].v y += gravity; ++i) }
</script>
</body>
</html>
```▶ R23 · Pendulum wave11.3 sERRBLANK★ 1/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #f0f0f0; }
</style>
</head>
<body>
<canvas id="screen" width="600" height="200"></canvas>
<script>
document.addEventListener("DOMContentLoaded", init);
var ctx = document.getElementById('screen').getContext2D();
function init() {
var pendulums = [], count=15, dx = (document.body.getBoundingClientRect().width - 10) / count;
for(var i=0; i<count; i++) {
pendulums.push(new Pendulum(i*dx,150,Math.random()*100+20));
}
loop(pendulums);
}
class Pendulum {
constructor(x,y,len) {
this.x = x;
this.y = y;
this.len = len;
this.angle = Math.PI / 2;
}
draw() {
ctx.lineCap = "round";
ctx.lineWidth = 1.5;
ctx.strokeStyle = "#808080";
ctx.beginPath();
ctx.arc(this.x, this.y,3,0,Math.PI*2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(this.x,this.y);
let px = this.x + this.len * Math.cos(this.angle), py = this.y + this.len * -Math.sin(this.angle);
ctx.lineTo(px,py);
ctx.stroke();
}
update() {
this.angle-=0.02;
if (this.angle<-Math.PI/2) {
this.angle += 2*Math.PI; // "reset" pendulum
}
this.x+=0.5 * Math.sin(this.angle +Math.PI/4) / this.len;
}
}
function loop(pendulums) {
let current = new Date().getTime();
ctx.clearRect(0, 0, document.body.getBoundingClientRect().width,200);
for(let pendulum of pendulums) {
pendulum.update();
pendulum.draw();
}
requestAnimationFrame(loop.bind(null,pendulums));
}
</script>
</body>
</html>
```▶ R24 · Maze race BFS/DFS/A*21.8 sERRSTATLIM★ 1.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: monospace; }
</style>
</head>
<body>
<div id="algs">BFS (red), DFS (green), A* (blue)</div>
<canvas width=250 height=500 id=bfs style="background-color: #fff"></canvas>
<canvas width=250 height=500 id=dfrs style="background-color: #fff"></canvas>
<canvas width=250 height=500 id=aStars style="background-color: #fff"></canvas>
<script>
var w = new Array(25);
for(var i = 0; i < 25; ++i) {
w[i] = new Array(25);
for(var j = 0; j < 25; ++j)
w[i][j] = (Math.random() > 0.3 ? 0 : 1);
}
var goali = 24, goalj = 24;
var xofs = 250/25;
function drawAlg(cvsId) {
var ctx = document.getElementById(cvsId).getContext("2d");
ctx.fillStyle="#EEE";
for(var i = 0; i < 25; ++i)
for(var j = 0; j < 25; ++j)
ctx.fillRect(xofs*i, xofs*j, xofs-1, xofs-1);
}
function bfsSearch(goalx, goaly) {
var openl = [`${[0*4+7]*3}`], closedl = [];
drawAlg("bfs");
drawLoop:;
while(openl.length > 0) {
var node = eval(openl.shift());
var i = Math.floor(node/16)%25, j = (node%16)/4 | 0;
if(i == goali && j == goalj) { document.getElementById("algs").innerHTML = "DONE BFS"; break; }
closedl.push(i*100+j);
ctx.fillStyle="#F00";
for(var k in node)
ctx.fillRect(xofs+k-1, xofs*(i%25), 2, 2);
var newNoods = [];
if(w[i][j+1] == 0 && !(closedl.includes(100*i+j+4) || openl.join().includes(100*i+j+4))) newNoods.push((100*i+j+4));
if(w[i-1][j] == 0 && !(closedl.includes(100*(i-1)+j) || openl.join().includes(100*(i-1)+j))) newNoods.push((99+(i-1)*100+j));
if(w[i+1][j] == 0 && !(closedl.includes((100*i+j+2)) || openl.join().includes(100*i+j+2))) newNoods.push(100*i+j+2);
if(w[i][j-1] == 0 && !(closedl.includes(100*(i)+ (j-1)*100) || openl.join().includes(100*i+(j-1)*100))) newNoods.push((100*i)+(99-(j==0)));
openl = openl.concat(newNoods);
}
document.getElementById("bfs").title += " BFS search took: "+(performance.now()/1000);
document.getElementById("algs").innerHTML += "<br>BFS found in: "+(perfBfs/1000)+"s";
}
function dfrsSearch(goalx, goaly) {
drawAlg("dfrs");
drawLoop:;
var stackL = [[{i:0,j:7}, 16]], closedl = [];
while(stackL.length > 0) {
var stackT = stackL[stackL.length - 1][0];
var i = stackT.i, j = stackT.j;
if(i == goali && j == goalj) { document.getElementById("algs").innerHTML = "DONE DFS"; break; }
console.log(i,j);
ctx.fillStyle="#FFC";
for(var k in node)
ctx.fillRect(xofs+k-1, xofs*(i%25), 2, 2);
var newNoods = [];
if(w[i+1][j] == 0 && !(closedl.includes(i+1,j))) stackL[stackL.length - 1][1] |= {3};
if(w[i-1][j] == 0) stackL[stackL.length - 1][1] |= {2}
if(w[i][j-1] == 0) stackL[stackL.length - 1][1] |= {1};
var tmp = {i: i, j: j}, lastn = stackL[stackL.length-1];
while(stackT && !(stackT.aa & lastn[1])) {
node = (Math.floor(stackT.i)*16)+j*4;
closedl.push(node);
ctx.fillStyle="#00F";
for(var k in stackT)
ctx.fillRect(xofs+k-1, xofs*(stackT.i%25), 2, 2);
newNoods = [];
if(w[Math.floor(stackT.i)][Math.floor(j)+1] == 0) {tmp.j++; newNoods.push((Math.floor(stackT.i)*16)+(j+1)*4)}
else stackT.aa |= 64;
if(w[Math.floor(stackT.i)-1][j] == 0) {tmp.i--; tmp.j = j; newNoods.push(( (Math.floor(stackT.i)-1) * 16 ) + j*4);}
else stackT.aa |= 32;
if(w[Math.floor(stackT.i)][j-1] == 0 && j > 0) {tmp.j--;}
else stackT.aa |= 8}
ctx.fillStyle="#F00";
for(var k in node)
ctx.fillRect(xofs+k-1, xofs*(stackT.i%25), 2, 2);
stackL.pop()[1] |= lastn[1];
document.getElementById("dfrs").title += " DFS search took: "+(performance.now()/1000);
}
}
function aStarsSearch(goalx, goaly) {
drawAlg("aStars");
drawLoop:;
var openl = [7], costl = Array(25*25+1);
closedl = [];
costInit:;
for(var i = 0; i < 6255; ++i)
costl[i] = 10000000;
drawAlg("aStars");
while(openl.length > 0) {
var node, fpos;
var mindx = 1e20, mine;
while(fpos = openl.shift()) {
node = eval(fpos);
closedl.push(node.i*100+node.j);
if(i == goali && j == goalj) { document.getElementById("algs").innerHTML = "DONE A "; break; }
var fval0, fval1;
ctx.fillStyle="#00F";
for(var k in node)
ctx.fillRect(xofs+k-1, xofs*(node.i%25), 2, 2);
}
startLoop:;
var newNoods = [];
if(w[node.i][node.j+1] == 0 && costl[100*node.i+(node.j+1)] == null) {
newNoods.push((fpos+"4"));
costl[costs[i]+102] = costs[fpos]+"7"}
}
var fval = (costs[fpos]+"7");
if(w[node.i-1][node.j] == 0 && costs[100*(node.i-1)+node.j] == null
{ newNoods.push((fpos+"3"));
costl[costs[i]+101] = costs[fpos]+"6"});
if(w[node.i+1][node.j] == 0) {
newNoods.push((fpos+"2"));
costl[(costs[fpos]+102)] = "8"};
if(w[node.i][node.j-1] == 0 && node.j > 0
{ newNoods.push((fpos+"1"));}
costl[costs[i]+100] = costs[fpos]+"5"});
openl = (openl.concat(newNoods));
}
}
</script>
<style>
#algs {
background-color: #F00;
}
</style>
<script>
bfsSearch();
dfsrstSearch();
aStarsSearch();
</script>
</body>
</html>
```▶ R25 · Sorting race quick/merge/heap18.7 sERRBLANKLIM★ 0.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<title>Sorting Algorithms</title>
<style>
body { margin: 0; }
#sortable-containers {
display: flex;
}
</style>
</head>
<body>
<canvas id="sortable-containers" width="350" height="250"></canvas>
<script>
const canvas = document.getElementById("sortable-containers");
const ctx = canvas.getContext("2d");
function generateRandomArray(size) {
let arr = [];
for (let i = 0; i < size; ++i)
arr.push(Math.floor(Math.random() * 300));
return arr;
}
function sortAndDraw(arr, algorithm) {
const xMargin = canvas.width / arr.length;
const barHeight = canvas.height / arr.length;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < arr.length; i++) {
ctx.fillStyle = "lightblue";
let yStart = i * barHeight;
let height = barHeight * arr[i] / (arr[arr.length-1]+1);
ctx.fillRect(xMargin*i, yStart, xMargin, height);
if (i < arr.length - 1) {
ctx.font="10px Arial";
ctx.fillStyle="black"
ctx.textAlign='left';
ctx.textBaseline = 'top';
ctx.fillText(Math.floor(arr[i]),xMargin * (i+1)- 5,yStart);
}
}
let count = 0;
const steps = getSteps(algorithm, arr.slice());
for(const step of steps) {
if(step.stepType === "write") drawBars(canvas, xMargin, barHeight, arr, step.stepPos[0]);
if (step.stepType != "done" ) {
ctx.fillStyle = "black";
ctx.font="14px Arial";
const posTop = canvas.height / 2 + yMargin * count - 15;
ctx.textAlign='left';
ctx.textBaseline = 'top';
ctx.fillText(step.message,posLeft/6, posTop);
}
++count;
requestAnimationFrame(animationCallback);
}
let xPos = canvas.width / arr.length;
function animationCallback() {
if (count === steps.length) {
const posBottom = canvas.height / 2 + yMargin * count - 20;
ctx.font="14px Arial";
ctx.textAlign='left';
ctx.textBaseline = 'top';
switch(algorithm) {
case "quicksort":
ctx.fillStyle = "red";
break;
case "mergesort":
ctx.fillStyle = "green";
break;
default:
ctx.fillStyle = "blue";
}
ctx.fillText("DONE",xPos/4, posBottom);
} else {
drawBars(canvas, xMargin, barHeight,arr);
requestAnimationFrame(animationCallback);
}
}
}
function getSteps(algorithm, arr) {
switch(algorithm){
case "quicksort":
return quicksort(arr.slice());
case "mergesort":
return mergeSort(arr.slice());
default:
return heapSort(arr.slice());
}
}
const shuffle = arr => { for (let j = arr.length - 1; j > 0; --j)
[arr[j], arr[(Math.floor(Math.random() * (j + 1)))] ] = [arr[(Math.floor(Math.random() * (j + 1)))],
arr[j]];
};
const yMargin = canvas.height / arr.length;
function drawBars(canvas, xMargin, barHeight,arr){
const ctx2 = canvas.getContext("2d");
ctx.fillstyle="white"
for(let i=0;i<arr.length;i++){
let height=barHeight*arr[i]/(arr[arr.length-1]+1);
ctx.fillRect(xMargin*i+1,canvas.height-yMargin-h*height-10,xMargin - 1,height);
}
}
const arr = generateRandomArray(60);
canvas.width = 420;
document.addEventListener("DOMContentLoaded", () => {
sortAndDraw(arr, "quicksort");
}, false);
function quicksort(arr) {
let i,j,pivot,k=0;
for(i=0;i<arr.length-1;++i){
[pivot,arr[i]]= [arr[arr.length - 1], arr[i]];
k=i
for(j=k+1;j<arr.length; ++j)
if (arr[j] < pivot) {
arr[k + 1 ] = arr[j];
--k;
arr[k+1] =pivot;
}
return { swap:[pivot,arr[0]], stepType:'write', message:"Partition",pos: [i,j]} ;}
}
function merge(left, right) {
const result = []
let i = 0, j = 0
while (result.length < left.length + right.length) {
if (j >= right.length) {result=result.concat(left); break;}
if (left[i] <= right[j]) result.push(left[ i++]);else result.result.push(right[ j++])
}
return { swap:[result, left.concat(right)],stepType:'write', message:"Merging",pos: [0,left.length]} ;
}
const mergeSort = arr => {
if (arr.length > 1) {
const midpoint = Math.floor(arr.length / 2);
const left = arr.slice(0,midpoint);
const right = arr.slice(midpoint);
return [
mergeSort(left),
merge(right),
stepType:'write', message:"Partition", pos: ["left","mid"]]} }
}
const heapify = (heap, n, i) => {
let largest = i
let left = 2 * i + 1
let right = 2 * i + 2
if (heap[left] > heap[i]) larger = left
if(heap[right]>heap[largest]) large =right;
if(largest != i){
[heap[largest], heap[i]] =[heap[i], heap[largest]];
if(right<arr.length) [heap[mag, heap[left]]= [heap[left], heap[largest]]; }
return {swap: [`larger`,`i`],stepType:'write', message:"Heapify" ;pos:[];};
}
function heapSort(arr){
let end = arr.length -1;
while(end >0) {
if(heapify(arr, end)) --end;
return heapify(arr,end)}
}
</script>
</body>
</html>
```▶ R26 · Projectile ballistics14.5 sERRBLANK★ 1/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<script>
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
let ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
ctx.fillStyle = 'black';
ctx.fillRect(0,0,canvas.width,canvas.height);
function ball(x,y,angle,vx,vy,distance){
this.x = x;
this.y = y;
this.angle = angle;
this.vx = vx;
this.vy = vy;
this.distanceCovered = distance;
}
ball.prototype.draw = function(){
ctx.beginPath();
ctx.arc(this.x,this.y,3,0,2*Math.PI);
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.moveTo(this.x,this.y);
this.x += this.vx;
this.y += this.vy;
const previousX = this.x - this.vx * 10 / 100;
const previousY = this.y - this.vy * 10 / 100;
if(previousX>0 && previousX<canvas.width){
ctx.lineTo(previousX,previousY);
this.distanceCovered -= Math.sqrt(Math.pow(previousX-this.x,2) + Math.pow(previousY-this.y,2));
ctx.strokeStyle='lightgrey';
ctx.lineWidth=1;
ctx.stroke();
}
}
function animate(){
ctx.fillStyle='#000000';
ctx.fillRect(0,canvas.height-10,canvas.width,canvas.height)
let balls = [];
const speed = 3.5; // initial speed of the projectile in pixels per second
const g = 2.5; // constant acceleration due to gravity by second
for(let j=0;j<5;j++){
const distanceCovered = j * canvas.width / 4;
balls.push(new ball(50,150 + (canvas.height - 10)/2, Math.PI*(35+(j*15)),
speed*Math.cos(((Math.PI)*3/180)*(20+j*15)) ,
-(speed*g+0.1*Math.sqrt((distanceCovered))*Math.sin(((Math.PI)*3/180)*(20+j*15))), distanceCovered));
}
for(let j=0;j<balls.length;j++){
balls[j].draw();
balls[j].x += balls[j].vx;
balls[j].y += balls[j].vy;
if((balls[j].y>canvas.height) || (Math.sqrt(Math.pow(balls[j].x,2) + Math.pow(balls[j].y - 150,2)) > canvas.width/2)){
delete balls[j];
}else{
ctx.beginPath();
ctx.font="10pt Arial";
const xx = balls[j].y<canvas.height?balls[j].x-5:balls[j].distanceCovered*Math.sin(Math.atan((balls[j].y-canvas.height)/(canvas.width/2)));
const yy = canvas.height - 5;
ctx.fillText(25*j + '°',xx,yy)
}
}
if(balls.some(ball => ball.y > -10 || ball.distanceCovered < canvas.width/2)){
globalThis.requestAnimationFrame(animate); // animate()
}else{
ctx.fillStyle='black';
ctx.fillRect(0, 0, canvas.width,canvas.height),
ctx.font = "36pt Arial";
ctx.textAlign = 'center',
ctx.textBaseline = 'middle'
ctx.fillText(`CANNONBALLS LANDED... AUTO RELAUNCH`,canvas.width/2,-50)
for (let x=25; x<=225;x+=25)
textShadow = 0, this.ctx.fillStyle='lightgrey',this.ctx.fillText(x+'°',x+10,250)
ctx.font = "48pt Arial";
ctx.textAlign = 'center',
ctx.textBaseline = 'middle'
ctx.fillText('CLICK TO RELAUNCH...',canvas.width/2,-50),
}
}
globalThis.requestAnimationFrame(animate);
</script>
</head>
</html>
```▶ R27 · Double-pendulum chaos17.2 sERRBLANKLIM★ 0.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title<Double Pendulum Chaos></title>
<style>
body {
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: none;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', () => {
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
let dt = 0.05;
let g = 9.81;
function pendulum(a, l, theta) {
this.x = l * Math.cos(theta);
this.y = -l + l * Math.sin(theta);
this.a = a;
this.l = l;
this.theta = theta;
this.update = () => {
let alpha1 = (-g * (2 * l * math.cos(theta) / a));
if (Math.abs(theta) < 0.5) alpha1 += (l * (theta - 0.001 / 4));
this.theta += alpha1 * dt;
let alpha2 = ((- g * Math.sin(theta) / (this.a + l * math.cos(theta))) + (2 * l * theta * alpha1 + 2 * l * math.cos(theta) * theta ** 2 )/ (Math.pow(a,3)));
this.theta += alpha2 * dt;
if (theta > Math.PI || theta < -Math.PI) {
let ntheta = (a / (l * (-math.sin(theta))));
this.theta = theta;
theta = 1 / (this.a / (ntheta + l ** 3 /4));
}
}
this.draw = () => {
ctx.beginPath();
ctx.arc(this.x, this.y, 10, 0, Math.PI*2);
ctx.fillStyle = `#${(360 * this.theta / (2 * Math.PI)).toString(16).slice(-6)}`;
ctx.fill();
if (!trail[trail.length - 1]) {
trail[Math.floor(pendulumA.l * this.theta / Math.PI)] = {x: pendulumA.x, y: pendulumA.y};
}
}
}
let math = () => {
function pow(x, n) {
if (n == 0) return 1;
else if (n < 0) return 1 / pow(x, -n);
else return x * pow(x, n-1)
}
return {pow: Math.pow}
}()
let mass = 10;
let len = 200;
class Animation {
constructor(p1x=0, p2x=100, p3y=400) {
this.p1 = new pendulum(-len * (p2x / window.innerWidth), len, -p3y);
this.p2 = new pendulum(-len * (p2x / window.innerWidth), len, -Math.PI + 0.01);
this.trail = [];
let requestAnimFrame = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 1; i < trail.length; i++) {
if (trail[i - 1]) {
let cX = ((i) / trail.length * -255 + trail[i].x);
let cY = (-(i) / trail.length * -127.5 + trail[i-1].y);
ctx.beginPath();
ctx.lineWidth = (Math.sqrt((2)**2+(1)**2)/3)*150
ctx.strokeStyle=`#${(360*(trail[i].theta-trail[i-1].theta)/(2*Math.PI)).toString(16).slice(-6)}`
ctx.moveTo(cX, cY);
ctx.lineTo(Math.max(cX + pendulumA.l * (this.p1.theta - this.p1._theta),0), Math.max(cY + pendulumA.l *(this.p1.y-this.p1.y_p))),4
ctx.stroke();
}
}
this.p1.update();
this.p2.update();
for (let key in this) {
if (!key.includes('_')) {
let keyOld = `${key}_`
delete(this[keyOld]);
```
```
this[p1.key] = this.p1.theta;
this[p2.key]=this.p2.theta;
ctx.beginPath();
ctx.lineWidth = 4;
ctx.strokeStyle='#00ff00';
pendulumA.ctx.lineCap='round'
ctx.moveTo(pendulumA.l * -math.pow(this.p1.x, -1) - window.innerWidth / 2 + window.innerWidth / len, 0.9*window.innerHeight);
pendulumA.ctx.lineTo(Math.max(-400+p1,0),Math.max(50+trail.length*-60*len/255-10*p1,15));
pendulumA.ctx.stroke();
this[p3.key]= this.p2.y;
ctx.beginPath();
ctx.lineCap='round';
ctx.strokeStyle='#ffffff'
ctx.moveTo(window.innerWidth/2, canvas.height - len - p1);
ctx.lineTo(Math.max(pendulumA.l * math.sin(this.p2.theta+p4)- window.innerWidth / 2,0),60 + trail.length*(-len/255)*200)
ctx.fill()
pendulumA.ctx.stroke();
this.p1.draw();
this.p2.draw();
```
```
requestAnimFrame = requestAnimationFrame(requestAnimFrame);
}
}
let animation1=new Animation(10)
let canvas = document.getElementById("c");
// ctx.clearRect(0,window.innerHeight/3,canvas.width,window.innerHeight)
})
</script>
<body>
</body>
</html>
```▶ R28 · Particle fountain18.2 sERRSTATLIM★ 1.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
body {
padding: 0;
margin: 0;
}
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<input type="range" id="s" min="-10" max="10" value="5" />
<script>
const c = document.getElementById('c');
const s = document.querySelector('#s');
let p, g = 0.2 * Math.PI / 180, w;
function f(x, y) {
return x + Math.random() / 100;
}
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.addEventListener(
'DOMContentLoaded',
function() {
requestAnimationFrame(t);
p = [];
for (let i = 0; i < 200; i++) {
const vx = f(Math.sin(Date.now() + i) * 2, Math.cos(Date.now()));
const vy = -1;
const x = canvas.width / 2,
y = canvas.height;
p[i] = { x, y, vx, vy, r: Math.random() * 3 };
}
},
false
);
s.addEventListener('input', function() {
w = s.value;
});
function t(_t) {
let e;
for (let i =
0,
l = p.length;
i < l; ++i) {
const x = p[i].x += p[i].vx,
y = p[i].y += p[i].vy;
if (
w &&
-w <= (canvas.width / 2 * Math.random() + Math.cos(Date.now())) &&
(canvas.width / 2 * Math.random() + Math.cos(Date.now)) <=
w
) {
e = f(Math.sin(Date.now()) * 10, w);
p[i].vx =
-8 *
(1 - Math.tan(w) * 0.05)
+ 2 * e;
if (+p[i].y > y / 100) {
for (
i = l > 1 ? l - 1 : 0,
s = false,
p = [];
~s) {
c.getContext("2d");
c.fillStyle =
typeof String.fromCharCode !== 'string' ||
!/\n/.test(String.fromCharCode) ?
"rgba(221,135,49,0.9)" :
"#FFA07A";
for (let i in p) {
c.beginPath();
c.arc(p[i].x, p[i].y += s ? -Math.abs(p[i].vy++ * 100 + 40) : Math.abs(-p[i].vy-- * 100 + 120), p[i].r,
0, 2 *
Math.PI);
c.fill();
}
s ^= true;
}
for (; i < l; ++i) {
e =
(1 - p[i].y / y)
* 5
* f(Math.sin(Date.now()), w || -10),
x = canvas.width / 2,
y += s ? -Math.abs(p[
v =
i != l - 1 ? i + 1 : 0
].vy++ * 100 + 40) : Math.abs(-p[
l > 2 && v) {
vx = w ? w / (1 +
p[i].y / y)
*
f(
e =
s || -w < i != l- 1 ? (i + 1) :
0,
Math.sin(Date.now() * 5),
i == 3) - g : e = w / 16;
vx *= 0.97; vy *= 0.98;
p[i].x -= s || -w < l > i ? vx + x : x;
}
for (i = l - 1 ; ~i;) {
c.fillStyle =
"rgba(169, 169, 169,
y / 100 * (
g =
typeof String.fromCharCode !== 'string' ||
!/\n/.test(String.fromCharCode) ? 0.5 :
"#FFFFFF";
c.fillRect(p[i].x, Math.floor(
p[i].y += s ? -vy++ * 10 : vy-- * 10), 5, 3);
if (+p[
i].
y >
l < 9 || g <= (Date.now%1.6e4).toString().
charCodeAt(0) % 32)
p.pop(); else ++i;
}
}(g / e), f(e * Math.cos(Date.now()), w *
(-g - (
24 >
y / 100 ? g = 10 :
(
g =
1 + (e / y + (- Date.
toLocaleString()),
'0'.charCodeAt(
i == e ||
e = p[
l-1].y
>= c.height,
s ? -w <= l > i :
s || w<=l>i?'':1),
18)));
vy += g * 400;
}
if (p[i].r += s) {
y -= p[
~i++ && p.length
< 8 ?
vy &&
y >
l <
4 ?
(l =
i,
Vy =
p[--l].y ) :
(c.getContext(
'2d'));c.fillStyle ='#666';
for (; l < 9; ++l) {
c.fillRect(p[l].x, Math.floor(p[l].vy *= -0.02 * p[l].r + 1)-40,
5);
Vy = ((+Vy *=
p[
i =
g <= l && ~i ? l - 1 : -1]
.
vy));
}
}
}
);
requestAnimationFrame(t);
</script>
</body>
</html>
```▶ R29 · Orbital mechanics15.0 sERRBLANK★ 1/10 Open round →
Show code
```html
<!DOCTYPE html>
<html>
<head>
<title>Orbital Mechanics Demo</title>
<style>
canvas { border: 1px solid black; }
</style>
<script>
const GRAVITATIONAL_CONSTANT = 0.001;
let sun = { x: 200, y: 200, vx: 0, vy: 0 };
let planets = [
{ r: 10, angle: Math.PI / 2 },
{ r: 30, angle: 3 * Math.PI / 4 },
{ r: 60, angle: Math.PI }
];
let comet = {
r: 50,
e: 0.75,
x: 200 + Math.random() * 100 - 50,
y: Math.random() * 300 - 150,
vx: (sun.x - this.x) / ((Math.pow(sun.x, 2) + Math.pow(sun.y, 2)) ** 0.5),
vy: (sun.y - this.y) / ((Math.pow(sun.x, 2) + Math.pow(sun.y, 2)) ** 0.5)
};
let drawSun = (canvas) => {
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'yellow';
ctx.fill();
}
let updatePlanets = () => {
planets.forEach(p => {
const dx = p.x - sun.x;
const dy = p.y - sun.y;
p.vx += (GRAVITATIONAL_CONSTANT * 1 / (Math.pow(dx, 2) + Math.pow(dy, 2))) * (dx/sun.y);
p.vy += (GRAVITATIONAL_CONSTANT * 1 / (Math.pow(dx, 2) + Math.pow(dy, 2))) * (dy/sun.y);
p.x += p.vx;
p.y += p.vy;
});
}
let updateComet = () => {
comet.vx += GRAVITATIONAL_CONSTANT * ((sun.x - comet.x) / (Math.pow(comet.x - sun.x, 2) + Math.pow(comet.y - sun.y, 2)));
comet.vy += GRAVITATIONAL_CONSTANT * ((sun.y - comet.y) / (Math.pow(comet.x - sun.x, 2) + Math.pow(comet.y - sun.y, 2)));
comet.x += comet.vx;
comet.y += comet.vy;
if (comet.y < sun.y && comet Vy > 0) {
comet Vy = -comet Vy * comet.e;
}
}
let clearCanvas = (canvas) => {
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
let drawTrail = (ctx, p) => {
let l = 1
while (l >= 5) {
drawPlanet(ctx, Math.cos(p.angle), Math.sin(p.angle));
if(l%10 === 0)
break;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSun(canvas.getContext('2d'));
};
};
let drawPlanets = (ctx, p) => {
const c = new Array();
for (let [x, y] of planets) {
c.push([x,y]);
}
};
function drawPlanet(ctx, x, y)
{
ctx.beginPath();
ctx.arc(200+x*30, 200+y*30, 10, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
}
let animate = (timestamp) => {
updatePlanets();
updateComet()
const canvas = document.querySelector('canvas');
clearCanvas(canvas);
drawSun(canvas);
planets.forEach(planet =>
drawTrail(
canvas.getContext('2d'),
planet
)
);
requestAnimationFrame(animate);
}
let initialize = () => {
let canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
animate();
};
document.addEventListener("DOMContentLoaded", function() {
document.body.appendChild(document.createElement('canvas'));
});
</script>
</head>
<body>
</body>
</html>
```▶ R30 · Spring-mass chain16.0 sERRBLANKLIM★ 0.5/10 Open round →
Show code
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spring-Mass Chain</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<script>
const ctx = document.createElement('canvas').getContext('2d');
document.body.appendChild(ctx.canvas);
ctx.fillStyle = 'black';
ctx.font = '14pt sans-serif';
function mass(num) {
let x = num * (200 / 12);
return {x, spring: null};
}
function update() {
ctx.clearRect(0, 0, 400, 300);
ctx.beginPath();
for (let i = 0; i < masses.length; i++) {
const m = masses[i];
const n = masses[(i + 1) % masses.length];
if (!m.sprung && !n.sprung) continue;
ctx.moveTo(m.x, 150);
ctx.lineTo(n.x, 150);
ctx.stroke();
massDraw(ctx, m.x, i);
if (i === 0 || i === masses.length - 1) {
ctx.fillStyle = 'blue';
ctx.font = '14pt sans-serif';
ctx.fillText('Anchor', m.x + 10, 160);
}
}
requestAnimationFrame(update);
}
function massDraw(ctx, x, num){
if (mouseDown && mouse !== null && mass === num) {
ctx.fillStyle = 'red';
} else {
ctx.fillStyle = 'black';
}
ctx.beginPath();
ctx.arc(x, 150, 10, 0, Math.PI * 2);
ctx.fill();
}
function spring(ctx, a, b) {
const x1 = masses[a].x;
const x2 = masses[b].x;
if (!a.sprung && !b.sprung) return;
let len = Math.sqrt(Math.pow(x2 - x1, 2));
ctx.beginPath();
ctx.moveTo(x1 + (len / 2), 150);
ctx.lineTo(x2 - (len / 2), 150);
ctx.stroke();
}
function simulate() {
let damping = 0.97;
for (let i = masses.length - 2; i >= 0; i--) {
if (masses[i + 1].sprung) {
const a = Math.abs(masses[(i + 1) % masses.length].x - masses[i].x);
masses[i].spring = a;
if (!mouseDown || mass !== i) {
if (damping < 5) {
masses[i].pos += ((masses[i].mass - damping * Math.sqrt(masses[i].pos * masses[i].masl)) / masses[i].mass);
} else {
masses[i].pos += ((100 + num * dampVal) / masses[i].mass);
}
}
}
}
}
function mouseDrag(x, y) {
const m = Math.floor((x - ctx.canvas.offsetLeft) / (220 / masses.length));
if (m > 0 && Math.abs(x - (220 / masses.length * m)) < 2) {
massDraw(ctx, x, m);
}
}
function mouseMove(x, y) {
const pos = ctx.canvas.getBoundingClientRect();
ctx.mouse = {x: x - pos.x + ctx.canvas.offsetLeft,
y: y - pos.y + ctx.canvas.offsetTop
};
if (ctx.mouse.x > 0 && ctx.mouse.x < 190 &&
ctx.mouse.y > 50 && ctx.mouse.y < 210) {
}
}
let mouse = null;
let mouseDown = false;
const dampVal = 9.8 / masses[0].mass;
let num = 0;
ctx.canvas.width = 400;
ctx.canvas.height = 300;
const masses = Array(12).fill().map(mass);
document.addEventListener('mousedown', (e) => {
const pos = ctx.canvas.getBoundingClientRect();
if (ctx.mouse.x > e.clientX - pos.x && ctx.mouse.x < e.clientX + pos.x &&
ctx.mouse.y > e.clientY - pos.y && ctx.mouse.y < e.clientY + pos.y &&
i === 0 || i === masses.length - 1) {masses[i].sprung = true;} else {
mouseDown = true;
const massNum = Math.floor((e.clientX - ctx.canvas.offsetLeft) / (220 / masses.length));
mouse = massNum;
massDraw(ctx, (220 / masses.length * massNum) + 10, massNum);
}
});
document.addEventListener('mousemove', (e) => {
const pos = ctx.canvas.getBoundingClientRect();
let x = e.clientX - pos.x;
let y = e.clientY - pos.y;
mouseMove(x, y);
});
document.addEventListener('mouseup', () => {
mouseDown = false;
});
update();
</script>
```Answer excerpts above cover R6–R30. Blind rounds R31+ are only linked, not excerpted, to keep the blind-test experience intact for new visitors.