Plethora Bit Starter

https://plethora.studio/start
Admin
A guide to creating mobile-first interactive objects (Bits) on the Plethora platform, from setup to...
Tokens:1,510
Snippets:39
Trust Score:4.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Sound Toy Example

Source: https://plethora.studio/start

Example of a sound toy declaring background music and action sounds.

```javascript
ctx.music
```

--------------------------------

### 3D Toy Example

Source: https://plethora.studio/start

Example of a 3D toy using the three.js library pinned to a specific version.

```javascript
pin three@0.164.1
```

```javascript
ctx.createCanvas()
```

--------------------------------

### Small Game Loop Example

Source: https://plethora.studio/start

Example of a small game loop using Plethora's raf, haptics, and completion states.

```javascript
ctx.raf()
```

--------------------------------

### Generative Sketch Example

Source: https://plethora.studio/start

Example of a generative sketch using Plethora's canvas and touch trail features.

```javascript
ctx.createCanvas2D()
```

--------------------------------

### Minimal starter: main.js

Source: https://plethora.studio/start

The main JavaScript file for a minimal Bit, handling touch input to draw reactive circles on a canvas.

```javascript
window.plethoraBit = {
  meta: {
    title: "Touch Sketch",
    runtime: "plethora-bit@1",
    tags: ["creative", "touch"],
    permissions: ["haptics"]
  },

  async init(ctx) {
    const { canvas, context: g } = ctx.createCanvas2D();
    const touches = [];

    function draw() {
      g.clearRect(0, 0, canvas.width, canvas.height);
      g.fillStyle = "#f2c94c";

      for (const touch of touches) {
        g.beginPath();
        g.arc(touch.x, touch.y, touch.r, 0, Math.PI * 2);
        g.fill();
        touch.r += 2;
      }

      while (touches.length && touches[0].r > 96) {
        touches.shift();
      }

      ctx.raf(draw);
    }

    ctx.listen(canvas, "touchstart", event => {
      event.preventDefault();
      ctx.platform.start();
      ctx.platform.haptic("light");

      for (const touch of event.changedTouches) {
        touches.push({
          x: touch.clientX,
          y: touch.clientY,
          r: 12
        });
      }
    }, { passive: false });

    ctx.raf(draw);
    ctx.platform.ready();
  }
};

```

--------------------------------

### Minimal starter: plethora.json

Source: https://plethora.studio/start

The manifest file for a minimal Bit, declaring runtime, entry point, metadata, and permissions.

```json
{
  "schemaVersion": 1,
  "runtime": "plethora-bit@1",
  "entry": "main.js",
  "title": "Touch Sketch",
  "description": "A tiny touch-reactive drawing toy.",
  "tags": ["creative", "touch"],
  "permissions": ["haptics"],
  "dependencies": []
}
```

--------------------------------

### External Script Loading Fix

Source: https://plethora.studio/start

Replace raw CDN imports with Plethora's context-aware script loading methods, ensuring approved registry URLs and matching dependency pins.

```javascript
ctx.loadScript(url)
```

```javascript
ctx.importModule(url)
```

--------------------------------

### Global Event Listener Fix

Source: https://plethora.studio/start

Replace global window or document event listeners with Plethora's context-aware listen method.

```javascript
window.addEventListener(...)
```

```javascript
document.addEventListener(...)
```

```javascript
ctx.listen(target, event, handler)
```

--------------------------------

### Canvas Creation Fix

Source: https://plethora.studio/start

Replace standard canvas creation with Plethora's context-aware methods.

```javascript
document.createElement("canvas")
```

```javascript
ctx.createCanvas2D()
```

```javascript
ctx.createCanvas()
```

--------------------------------

### Animation Loop Fix

Source: https://plethora.studio/start

Replace the browser's requestAnimationFrame with Plethora's context-aware raf.

```javascript
requestAnimationFrame(loop)
```

```javascript
ctx.raf(loop)
```
Tokens:
Raw