p5sketch

learning p5.js and webGL

sketches

• oscillosketch
• oscillosketch_vertex
  • ostensibly the same animation, but the meat of the algorithm takes place in a vertex shader. i was hoping this would be much more efficient, but it doesn't look like that's the case. the code is way easier to read though.
• genuary 20230101
  • prompt is "perfect loop/infinite loop". i repeatedly draw a square using a vertex shader. that's it. that's the tweet.
• genuary 20230102
  • prompt is "made in 10 minutes". i planned to just draw more squares by passing a bunch of center coords into the vertex shader. but i am slow in both JS and GLSL, and i ran into an issue where i couldn't figure out how to send a vector of float2s to the shader. took closer to an hour and a half. not a good sign for completing genuary in a good state of mind.
• genuary 20230103
  • prompt is "glitch art". i wasn't really sure what to do, but eventually settled on trying to randomly manipulate the coordinates of one vertex. doing rand inside a shader is trickier than it looks.
• genuary 20230104
  • prompt is "intersection". i stole some of adam ferriss' code again. and then i made the ugliest thing i've ever made. rotating polygons of different colors whose colors add when they overlap. took me too long, way too long.
• genuary 20230105
  • prompt is "debug mode". phoned it in. i need a break.

acknowledgements

so far, i haven't done anything more than hack around on already-written code, specifically Adam Ferriss' genuary repo and Justin Shrake's vertex shader repo.

notes

• using VSCode to write code, blus a couple helpful plugins:
  • Live Server will serve up your page/sketch and reload when you save. nice for quick iterations
  • WebGL GLSL Editor for syntax highlighting, signature info, and code completion in the shaders and offline documentation.
  • p5.vscode to help on the p5.js side of things.

lessons learned

• must use const to specify constraints on for loops
• looks better if you center the canvas
• if the fragment shader doesn't receive a uniform that it expects, it will just quietly fail

resources

• Adam Ferriss genuary 2022
• Adam Ferriss' p5jsShaderExamples
• p5.js shaders
• the book of shaders
• openGL api docs
• Justin Shrake's vertex shader repo

open questions

i really don't get why i can't just draw a vertex and have it show up somehow—feels like i shouldn't need to draw a square or a triangle in order for something to show up:

// why do these need to be triangles? why can't i use a point?
  beginShape(TRIANGLES);
  for (let i = 0; i < numParticles; i++) {
    // triangle 1
    vertex(-0.01, -0.01);
    vertex(-0.01, 0.01);
    vertex(0.01, 0.01);
    // triangle 2
    vertex(-0.01, -0.01);
    vertex(0.01, 0.01);
    vertex(0.01, -0.01);
  }
  endShape();

  // beginShape(POINTS);
  // for (let i = 0; i < numParticles; i++) {
  //   vertex(0.01, 0.01);
  // }
  // endShape();
}