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 2023

• 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.

genuary 2025

okay, let's give this a go again. strategy is to do bite-sized chunks (what's a shader lol) and try to be quick.

• genuary 20250101
  • prompt is "vertical or horizontal lines only." well, i did that.
• genuary 20250102
  • "layers upon layers upon layers". aliasing is fun.
• genuary 20250103
  • okay, i drew 42 lines of code, exactly.
• genuary 20250104
  • i call this one "i am milking this chunk of code for all its worth, also, i'm sorry it's a little unkind"
• genuary 20250105
  • i don't know. turns out i'm excited about aliasing until about 1 AM and then i turn into a primitive animal that can't reason about mod or whatever
• genuary 20250106
  • okay, how many people did i copy 🙈
• genuary 20250108
  • looking down on a million embers (eventually)
• genuary 20250109
  • i figure this is what some of the riders of the W line see when they're on the train
• genuary 20250110
  • okay darien brito, smart aleck, hope you're happy
• genuary 20250111
  • not impossible, but i did have to break out graphtoy and bang my head through the brain fog
• genuary 20250112
  • okay, how many kinds of aliasing can we have in one animation. three?

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();
}