AquaMotion 🌊

by Sharxxy

HTML

<div id="toolbar">
    <button data-tool="brush">🖌️ Brush</button>
    <button data-tool="eraser">🧽 Eraser</button>
    <button data-tool="line">📏 Line</button>
    <button data-tool="rect">⬛ Rect</button>
    <button data-tool="circle">⚪ Circle</button>
    <button data-tool="bucket">🪣 Bucket</button>
    <button data-tool="picker">🎨 Picker</button>
    Size: <input type="range" id="brushSize" min="1" max="30" value="5">
    <input type="color" id="colorPicker" value="#000000">
    <button id="addFrame">➕ Frame</button>
    <button id="play">▶ Play</button>
  </div>

  <div id="canvas-container">
    <canvas id="drawCanvas" width="800" height="500"></canvas>
  </div>

  <div id="timeline"></div>

  <div id="inspector">
    <h3>Inspector</h3>
    <p>Layers, properties, assets will show here.</p>
  </div>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(180deg, #082032, #1a374d);
    color: white;
    height: 100vh;
    display: grid;
    grid-template-rows: 40px 1fr 150px;
    grid-template-columns: 1fr 250px;
    grid-template-areas:
      "toolbar toolbar"
      "canvas inspector"
      "timeline inspector";
  }
  #toolbar {
    grid-area: toolbar;
    background: rgba(0, 80, 120, 0.95);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
  }
  #toolbar button {
    background: #00aaff;
    border: none;
    color: white;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
  }
  #toolbar button:hover {
    background: #008ecc;
  }
  #canvas-container {
    grid-area: canvas;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  canvas {
    background: white;
    border: 2px solid #00d4ff;
  }
  #timeline {
    grid-area: timeline;
    background: rgba(0, 40, 70, 0.9);
    overflow-x: auto;
    display: flex;
    align-items: center;
    padding: 6px;
  }
  .frame {
    width: 40px;
    height: 40px;
    background: #333;
    border: 2px solid transparent;
    margin: 2px;
    cursor: pointer;
  }
  .frame.active {
    border-color: #00d4ff;
  }
  #inspector {
    grid-area: inspector;
    background: rgba(0, 60, 100, 0.95);
    padding: 10px;
    overflow-y: auto;
  }
  h3 {
    margin-top: 0;
  }

JavaScript

const canvas = document.getElementById("drawCanvas");
    const ctx = canvas.getContext("2d");
    let drawing = false;
    let tool = "brush";
    let brushSize = document.getElementById("brushSize").value;
    let brushColor = document.getElementById("colorPicker").value;

    // Toolbar tool selection
    document.querySelectorAll("#toolbar button[data-tool]").forEach(btn => {
      btn.onclick = () => tool = btn.dataset.tool;
    });
    document.getElementById("brushSize").oninput = e => brushSize = e.target.value;
    document.getElementById("colorPicker").oninput = e => brushColor = e.target.value;

    // Frames
    let frames = [ctx.getImageData(0, 0, canvas.width, canvas.height)];
    let currentFrame = 0;
    function renderTimeline() {
      const timeline = document.getElementById("timeline");
      timeline.innerHTML = "";
      frames.forEach((f, i) => {
        const div = document.createElement("div");
        div.className = "frame" + (i === currentFrame ? " active" : "");
        div.onclick = () => {
          currentFrame = i;
          ctx.putImageData(frames[currentFrame], 0, 0);
          renderTimeline();
        };
        timeline.appendChild(div);
      });
    }
    renderTimeline();

    document.getElementById("addFrame").onclick = () => {
      const blank = ctx.createImageData(canvas.width, canvas.height);
      frames.push(blank);
      currentFrame = frames.length - 1;
      ctx.putImageData(blank, 0, 0);
      renderTimeline();
    };

    document.getElementById("play").onclick = () => {
      let i = 0;
      const interval = setInterval(() => {
        ctx.putImageData(frames[i], 0, 0);
        i++;
        if (i >= frames.length) clearInterval(interval);
      }, 200);
    };

    // Drawing logic
    let lastX = 0, lastY = 0;
    function startDraw(e) {
      drawing = true;
      lastX = e.offsetX;
      lastY = e.offsetY;
      ctx.beginPath();
     ...