無料GitHub で公開

example-p5-animation

Learn how to use P5.js with Helios. Use when creating creative coding sketches or generative art.

日本語の概要は準備中です。原文の説明を表示しています。

BintzGavin/heliosスター 123(GitHub 123 + cccskills 0)

実行スコア未検証

インストール方法を見る

含まれるファイル（1）

SKILL.md1.7 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

P5.js Animation

Integrate P5.js with Helios by using P5's Instance Mode and driving the draw() loop via Helios's state.

Quick Start

import { Helios } from '@helios-project/core';
import p5 from 'p5';

const helios = new Helios({ duration: 10, fps: 60 });
window.helios = helios; // lets the renderer and player drive it

const sketch = (p: p5) => {
  p.setup = () => {
    p.createCanvas(1920, 1080);
    p.noLoop(); // Disable P5's internal loop
  };

  p.draw = () => {
    // Get time from Helios
    const { currentFrame, fps } = helios.getState();
    const time = currentFrame / fps;

    p.background(200);
    p.fill(255, 0, 0);

    // Animate based on time
    const x = time * 100;
    p.circle(x, 540, 50);
  };
};

const instance = new p5(sketch, document.getElementById('canvas-container'));

// Drive P5 from Helios: redraw on every frame change.
helios.subscribe(() => instance.redraw());

Key Patterns

Instance Mode

Always use Instance Mode (new p5(sketch)) instead of Global Mode. This prevents global variable pollution and ensures compatibility with module bundlers.

Disable Internal Loop

Call p.noLoop() in setup(). P5's internal loop uses requestAnimationFrame which runs independently of Helios. By disabling it, you ensure P5 only draws when Helios updates.

Reactive Drawing

Instead of relying on P5's frameCount, calculate positions based on helios.getState().currentFrame.

helios.subscribe(() => {
   // Assuming 'myp5' is your instance
   myp5.redraw();
});

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

同じリポジトリのスキル

animated-video-philosophy

無料

Story-first motion design philosophy for animated video: motion must earn its place; arc (establish, complicate, resolve); show vs tell; shots as units of thought; quiet vs loud motion; Disney principles with restraint; timing heuristics; composition; grammar by medium (product demos, logos, data viz, explainers); technical commitments (deterministic time, scrubbability, refs); cutting discipline; explicit anti-patterns. Use when planning, storyboarding, critiquing, or implementing programmatic or motion-driven video (Helios, Remotion, explainers, loops, UI capture, logo reveals), or when the user asks for motion direction, pacing, or visual-story structure.

日本語の概要は準備中です。原文の説明を表示しています。