# 3D Wire Frame Surface Plots

**URL:** <https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532>\
**Category:** Project Guidance\
**Created:** [May 12, 2026, 11:04pm UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532 "2026-05-12T23:04:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![crm114](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@crm114](https://discourse.processing.org/u/crm114)\
**Post date:** [May 12, 2026, 11:04pm UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532/1 "2026-05-12T23:04:02Z")

</div>

I have fond memories of running programs to create images similar to this at some time in the past on some sort of home computer. Has anything like this been done in j5.ps? It would be even better if these were animated with radiating surface motion! These are from Jim’s Demo Film: [https://www.youtube.com/watch?v=lbxJajIGBWo](https://www.youtube.com/watch?v=lbxJajIGBWo)

TIA

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/5/3509e27ff7163b20ba7a83c56f0e8a8fa36dccc2.jpeg)

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 13, 2026, 7:44am UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532/2 "2026-05-13T07:44:56Z")

</div>

Welcome to the forum.

Amazing how far computer animation has advanced since 1985.

Although I personally haven’t created similar plots using p5.js you might explore [OpenProcessing](https://openprocessing.org/) as there are 10s of thousands of sketches on there.

You might also try the [p5js web editor](https://editor.p5js.org/) to create your own sketches and examine sketches created by othersl.

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [May 13, 2026, 3:11pm UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532/3 "2026-05-13T15:11:46Z")

</div>

A modern equivalent is to use voxels: [https://openprocessing.org/@u465377/2412876](https://openprocessing.org/@u465377/2412876)

If you want your example animated, the most efficient way would be to render a grid of triangles and animate them in the vertex shader. For your lines to occlude, you’d create a mesh of alternating rows of narrow green and wider black triangle strips so that the black hide the green strips that are behind.

You also might find something similar on [https://www.vertexshaderart.com/](https://www.vertexshaderart.com/)

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [May 14, 2026, 6:09am UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532/4 "2026-05-14T06:09:56Z")

</div>

Here’s a version using the vertex shader: [https://openprocessing.org/@u465377/2939374](https://openprocessing.org/@u465377/2939374)

I’m drawing the lines in the fragment shader, so they get stretched when the triangles stretch on steep slopes. I suppose you could make them more uniform by dividing their width by the slope, but I kind of like them as they are.

---

<div class="post-metadata">

**Author:** ![crm114](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@crm114](https://discourse.processing.org/u/crm114)\
**Post date:** [May 18, 2026, 10:09pm UTC](https://discourse.processing.org/t/3d-wire-frame-surface-plots/48532/5 "2026-05-18T22:09:57Z")

</div>

Thank you for the help!

With the assistance of AI, here’s what I have so far:

> **[3D-Wire-Frame-Surface-5 by crm114 -p5.js Web Editor](https://editor.p5js.org/crm114/sketches/WfIYszkbo)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

> **[3D-Wire-Frame-Surface-4 by crm114 -p5.js Web Editor](https://editor.p5js.org/crm114/sketches/-3UpWC92V)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.