Skip to content

JulesFouchy/p5ShaderTemplate

Repository files navigation

p5 template project

Forked from https://github.com/Gaweph/p5-typescript-starter

Getting Started

You will need to have Node installed (https://nodejs.org/)
Download this repository and open it in your favorite IDE (I would highly recommend VS Code (https://code.visualstudio.com/))
Also, to get autocompletion and other great stuff for the shaders, I would recommend installing the "WebGL GLSL Editor" VS Code extension by Rácz Zalán
Then open a terminal at the root of the folder (you can do it in VS Code by simply dragging up the bottom of the window) and type the following commands :

Installing

npm i -g npm-run-all typescript browser-sync

Only use this command the first time you ever use this template (-g means you install things globally)

Launching

npm start

A local version will now be running at localhost:3000
You can now write all the p5 things you want in src/sketch.ts, and your fragment shader in shader/myShader.frag

Publishing online

Using GitHub Pages

Create a GitHub repository and commit all your files (if that's not already done)

Then in the Settings of your repository, under GitHub Pages set Source to main and click Save.
If you scroll back down to GitHub Pages you can now see the url of your sketch ! (it might take a few minutes to be published online)

Releases

No releases published

Packages

No packages published