20: Intro to WEBGL-3D Graphics in p5.js: How to Code Generative Art

Channel:
United States Steve's Makerspace
Subscribers:
7,360
Published on ● Video Link: https://www.youtube.com/watch?v=HJ7D0ysUL74


Category:
Guide
Duration: 18:07
1,934 views
63

Another video in the series on How to Code Generative Art using p5.js. In this video, we'll learn the basics of using WEBGL, which is used to make 3D graphics. # beginner's guide to coding, getting started generative art p5js.

The playlist: https://www.youtube.com/playlist?list=PLnJOmsprq3bE0QLbe7wZ8yb1-Dt0FBcP5

WEBGL examples:
https://editor.p5js.org/StevesMakerspace/sketches/ck0sIFG3k

Texture in WEBGL example:
https://editor.p5js.org/StevesMakerspace/sketches/CV2IyiIBR

3D landscape example:
https://editor.p5js.org/StevesMakerspace/sketches/kiy4ecWze

Steve's video going over 3D landscape:
https://www.youtube.com/watch?v=VoFsB0toORk&t=171s

The Coding Train's WEBGL series:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bPhi8sS1hHJ77n3zRO9FR_

Three.js library:
https://threejs.org/

https://p5js.org/

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

Steve's Patreon page: https://www.patreon.com/steves_makerspace



Other Videos By Steve's Makerspace


2025-03-24Real 3D in p5js - Uses 3D Glasses
2025-03-09Let's Talk - Channel Update & What Steve's Up To
2025-03-02How I Made Little Galleries - p5js generative art
2025-01-05Sedimentary Groove: Gen Art coding and project review in p5js
2024-05-25Fun with MoveNet plus p5play and p5js - Creative Coding
2024-05-14Gen Art Code Review: Surrender to the Dance
2024-01-0724: Where to go from here; the creative process; big list of resources: How to Code Generative Art
2024-01-0523: More Useful Functions in p5.js: How to Code Generative Art
2024-01-0322: Deeper Dive into Color in p5.js: How to Code Generative Art
2024-01-0121: Return, Break & Continue in p5.js: How to Code Generative Art
2023-12-3020: Intro to WEBGL-3D Graphics in p5.js: How to Code Generative Art
2023-12-2819: Clipping Function in p5.js: How to Code Generative Art
2023-12-2618: Perlin Noise Flow Fields in p5.js: How to Code Generative Art
2023-12-2417: Perlin Noise Grid Project in p5.js: How to Code Generative Art
2023-12-2216: Introduction to Perlin Noise in p5.js: How to Code Generative Art
2023-12-2015: Sine and Cosine to make wonky circles and meandering lines in p5.js: How to Code Generative Art
2023-12-1814: Array Examples from Steve's Projects in p5.js: How to Code Generative Art
2023-12-1813: Basics of Arrays in p5.js: How to Code Generative Art
2023-12-1611: Using a Buffer Canvas - createGraphics, Get, Image, Tint in p5.js: How to Code Generative Art
2023-12-1410: Creating Functions in p5.js: How to Code Generative Art
2023-12-139: On Being a Generative Artist - How to Code Generative Art - p5.js


Tags:
getting started coding p5js
getting start p5js
how to code p5js
how to code generative art
learn generative art
beginner's guide p5.js
beginner's guide generative art
webgl
p5js webgl
p5js 3d