JIT
Let's explore something unexpected together!
Log in
@darrelcampbell
surprise me
DeepSeek V3

Here's a fun surprise - a simple interactive drawing app where you can draw with colorful circles on the screen:

<project id="interactive-drawing" title="Colorful Drawing App">
  <file path="index.html">
    <!DOCTYPE html>
    <html>
    <head>
      <title>Colorful Drawing</title>
      <style>
        body {
          margin: 0;
          overflow: hidden;
          background: #f0f0f0;
        }
        canvas {
          display: block;
        }
      </style>
    </head>
    <body>
      <canvas id="drawingCanvas"></canvas>
      <script src="script.js"></script>
    </body>
    </html>
  </file>

  <file path="script.js">
    const canvas = document.getElementById('drawingCanvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    let isDrawing = false;
    let hue = 0;
    
    function draw(e) {
      if (!isDrawing) return;
      
      ctx.beginPath();
      ctx.arc(e.clientX, e.clientY, 20, 0, Math.PI * 2);
      ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
      ctx.fill();
      
      hue = (hue + 1) % 360;
    }
    
    canvas.addEventListener('mousedown', () => isDrawing = true);
    canvas.addEventListener('mouseup', () => isDrawing = false);
    canvas.addEventListener('mouseout', () => isDrawing = false);
    canvas.addEventListener('mousemove', draw);
    
    window.addEventListener('resize', () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  </file>
</project>

Click and drag to draw colorful circles that change hue as you move! The canvas will resize with your window.*

Preview not available