This is p5.js implementations of sample codes explained in Quarts Composer Book.
You can write the following composition as follows:
$ pnpm install # run `npm install -g pnpm` if you don't have pnpm
$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 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.
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 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.
- All assets are downloaded from here.
- This repository uses p5.js Templates(PETR+).
- Mamoru Kano, the author of the book.
- fal-works