{"id":15724485,"url":"https://github.com/jshrake/p5js-vertex-shader","last_synced_at":"2025-05-13T05:32:23.969Z","repository":{"id":150740894,"uuid":"239533295","full_name":"jshrake/p5js-vertex-shader","owner":"jshrake","description":"Animating vertex attributes on the GPU w/ p5.js","archived":false,"fork":false,"pushed_at":"2020-02-10T14:38:07.000Z","size":686,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T23:32:30.159Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jshrake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-10T14:36:21.000Z","updated_at":"2024-08-01T23:51:55.000Z","dependencies_parsed_at":"2023-04-12T06:22:03.394Z","dependency_job_id":null,"html_url":"https://github.com/jshrake/p5js-vertex-shader","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshrake%2Fp5js-vertex-shader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshrake%2Fp5js-vertex-shader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshrake%2Fp5js-vertex-shader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jshrake%2Fp5js-vertex-shader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jshrake","download_url":"https://codeload.github.com/jshrake/p5js-vertex-shader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253882807,"owners_count":21978549,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T22:16:49.426Z","updated_at":"2025-05-13T05:32:23.949Z","avatar_url":"https://github.com/jshrake.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vertex Shader Programming with p5.JS\n\n## Getting started\n\nYou can run any of the examples locally with Python's SimpleHTTPServer:\n\n```\ncd step-0\npython -m SimpleHTTPServer\n```\n\nThen open [localhost:8000](localhost:8000) in your browser. Or just follow along online with the p5.js editor.\n\nNote that this tutorial uses WEBGL2 and will only work [on browsers that support WEBGL 2](https://caniuse.com/webgl2). In practice, this means you need to use Firefox or Chrome. Safari will not work!\n\n## Step 0: Draw one square\n\n[p5.js editor](https://editor.p5js.org/jshrake/sketches/SeJW2yt_)\n\n- Understand how to configure p5js for WebGL 2\n- Understand the jobs of the vertex and fragment shaders\n- Configure a simple sketch with shaders\n\n## Step 1: Multiple animated squares\n\n[p5.js editor](https://editor.p5js.org/jshrake/sketches/0ungywqG)\n\n- Understand how to animate attributes\n    * Attributes are properties such as position, color, alpha, scale, rotation\n- Distinguishing geometry with gl_VertexID\n    * For each vertex, we want to know which square the vertex belongs to\n    * If we want to specify per-square attributes (position, color, scale), then \n      all vertices belonging to the same square should share the same attributes\n    * If each square has 6 vertices, then we can calculate a unique id for each square as\n      `int square_id = floor(gl_VertexID / 6)`\n- Random number generation\n    * Use the square id as a seed, then hash the value\n\n## Step N: Fragment Shading, Noise Functions, and User interaction\n\n[p5.js editor](https://editor.p5js.org/jshrake/sketches/WUyHFW2s)\n\n- Drawing outlined circles in each square\n- Specifying user interaction through uniforms\n- Noise functions\n- Correct aspect ratios\n\n## Resources\n\n- [GLSL shader functions](http://www.shaderific.com/glsl-functions)\n- [p5 js shader guide](https://itp-xstory.github.io/p5js-shaders/#/)\n- [p5js shader examples (Adam Ferriss)](https://github.com/aferriss/p5jsShaderExamples)\n- [Book of Shaders (Patricio Gonzalez Vivo \u0026 Jen Lowe)](https://thebookofshaders.com/)\n- [vertex shader art tutorial](https://www.youtube.com/watch?v=mOEbXQWtP3M\u0026list=PLC80qbPkXBmw3IR6JVvh7jyKogIo5Bi-d)\n- [2D SDF](https://iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm)\n- [OpenGL coordinate system](https://learnopengl.com/Getting-started/Coordinate-Systems)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjshrake%2Fp5js-vertex-shader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjshrake%2Fp5js-vertex-shader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjshrake%2Fp5js-vertex-shader/lists"}