Toodle

Appearance

Quickstart ​

This guide assumes some familiarity with web development and bundling.

We recommend running Vite with Bun, but you can use any js runtime and bundler you like, e.g. node with webpack for React or NextJS.

Create a vite project ​

bash
bun create vite

Add toodle ​

bash
bun add @bloopjs/toodle

Draw a kitten at 0,0 ​

index.html

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Toodle</title>

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      canvas {
        display: block;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <canvas style="width: 100vw; height: 100vh"></canvas>
    <script type="module" src="./src/main.ts"></script>
  </body>
</html>

src/main.ts

ts
import { Toodle } from "@bloopjs/toodle";

const canvas = document.querySelector("canvas")!;
const toodle = await Toodle.attach(canvas, {
  limits: { textureArrayLayers: 5 },
});

await toodle.assets.loadTexture(
  "kitten",
  new URL(
    "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Juvenile_Ragdoll.jpg/440px-Juvenile_Ragdoll.jpg",
  ),
);

const quad = toodle.Quad("kitten", {
  size: {
    width: 100,
    height: 100,
  },
});

toodle.startFrame();
toodle.draw(quad);
toodle.endFrame();