Shader File Paths in p5.js

p5.js Coding Questions
1

Hi all -

I just watched an excellent tutorial to get started with shaders (located here) - but I’m having some difficulty creating my “example.vert” and “example.frag” files in the basic Processing IDE.

It works fine to create these files via the p5.js online editor - but when making a new tab/file in the Processing IDE, it says “vert”, “frag”, “jxs” and “glsl” are all not acceptable extensions. What is the common practice for doing this?

Thanks!

2

I’ve also tried downloading the P5.js sketch and importing it into my Processing IDE and ran into errors there as well. Specifically, no display loaded in the default web browser.
I’m curious to hear if there’s a standard offline workflow that someone could share for this stuff.

3

Most basic workflow is having a folder containing these 2 files:

index.html:

<script defer src=//cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

sketch.js:

'use strict';

function preload() {
}

function setup() {
  createCanvas(800, 600).mousePressed(redraw);
  noLoop();
  fill('yellow').stroke(0).strokeWeight(1.5);
}

function draw() {
  background('#' + hex(~~random(0x1000), 3));
}

But in order to run it we need to setup a local server.

Simplest 1 I use is this Node.js package “servor”, which we can globally install it by typing in the following inside a terminal after installing Node.js: npm -g i servor

Now just include this batch script file in the same folder as the other previous 2 files:

run.bat:

set /a port = %random% * 40000 / 32768 + 10000
start servor . index.html %port%
start http://localhost:%port%

Double-click it to run it, which will open the default browser and run the “index.html” file.

You can also take a look at some sketches I have using this workflow:
https://Gist.GitHub.com/GoSubRoutine

1 Like
4

I find it significantly simpler to include the shader code as variables directly in the .js file.

See https://infinitefunspace.com/p5/ball/ with the source file https://infinitefunspace.com/p5/ball/p5Ball.js as an example.

The version of p5 included with the processing 4.3 download is several versions out of date and I notice that the IDE is not mentioned anywhere on the p5js.org site. To use a modern version of p5.js, I download it and save it to the libraries/ subfolder for each p5 sketch that I make. I don’t know if there is a cleaner way to get the IDE to use the latest version.

2 Likes
5

very cool : )
Thanks for sharing