Skip to content

hirohitokato/quartzComposerBook-p5js

Repository files navigation

About

This is p5.js implementations of sample codes explained in Quarts Composer Book.

You can write the following composition as follows:

Setup

$ pnpm install # run `npm install -g pnpm` if you don't have pnpm

Build and Run

$pnpm run build

If you use vscode, you can do it by selecting Run Build Task ...(Ctrl/Cmd-Shift-B).

Then, open dist/index.html via any browser. (Live Server vscode plugin may help you)

Supported Patches

Supported patches are the following:

  • Sprite
  • Image
  • LFO(Wave generator)
  • Interpolation
  • Gradient
  • Patch Time
  • Math
  • Round
  • Random
  • 3D Transformation
  • Iterator
  • Iterator Variables
  • HSL Color
  • Image Texturing Properties
  • Cube
  • Replicate in Space X/Y/Z
  • Image with String
  • Multiplexer
  • [ ]
  • [ ]
  • [ ]
  • etc.

How to change the target composition

In src/main.ts, you can find the following code:

import { Basic03 } from "./examples/basic03";

setTargetComposition(new Basic03());

change the argument(Basic03) as you like. Of course, you can create your own drawings with a similar way.

Create a custom component

Create a class implemented QuartzComposition interface, and pass the instance to setTargetComposition().

export class MyCustomComposition implements QuartzComposition {
  preload(p: p5) {
    // Load images ...
  }

  setup(p: p5, consumers: Consumer[]) {
    // Construct and bind patches.
    ...
    // After construction, push all consumers(without inside macro patches)
    // to the `consumers`.
  }

preload() and setup() work as same as p5js' same name function.

Notes

Special thanks

  • Mamoru Kano, the author of the book.
  • fal-works

About

p5.js implementation of Quartz Composer Book written by Mamoru Kano.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published