gpt-oss-120 task ball

by itbeard

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bouncing Yellow Ball Inside a Rotating Square</title>
<style>
  body { margin:0; background:#111; overflow:hidden;}
  canvas { display:block; margin:auto; background:#222;}
</style>
</head>
<body>

<canvas id="scene"></canvas>

<script>
// ------------------------------------------------------------
// Utility – simple 2‑D vector class
// ------------------------------------------------------------
class Vec2 {
    constructor(x = 0, y = 0) { this.x = x; this.y = y; }
    clone()            { return new Vec2(this.x, this.y); }
    add(v)             { this.x += v.x; this.y += v.y; return this; }
    sub(v)             { this.x -= v.x; this.y -= v.y; return this; }
    mul(s)             { this.x *= s;   this.y *= s;   return this; }
    static add(a,b){return new Vec2(a.x+b.x, a.y+b.y);}
    static sub(a,b){return new Vec2(a.x-b.x, a.y-b.y);}
    static mul(v,s){return new Vec2(v.x*s, v.y*s);}
}

// ------------------------------------------------------------
// Rotation helpers (counter‑clockwise positive)
// ------------------------------------------------------------
function rotate(vec, angle) {
    const c = Math.cos(angle);
    const s = Math.sin(angle);
    return new Vec2(
        vec.x * c - vec.y * s,
        vec.x * s + vec.y * c
    );
}

// ------------------------------------------------------------
// Main simulation parameters
// ------------------------------------------------------------
const canvas   = document.getElementById('scene');
const ctx      = canvas.getContext('2d');

const W = window.innerWidth;
const H = window.innerHeight;
canvas.width  = W;
canvas.height = H;

// Square
const SQUARE_SIZE = 400;           // side length in pixels
const HALF_S       = SQUARE_SIZE / 2;
const ROT_SPEED    = 0.01;         // rad per animation frame

// Ball
const BALL_RADIUS = 15;
let ballPos   = new Vec2(0, 0);     // world...