A p5.js library for rendering Platonic solids in WEBGL.
solid(args)
Where solid
can be one of the following functions:
tetrahedron
hexahedron
(orcube
)octahedron
dodecahedron
icosahedron
length
: Number — Edge length (default:100
).center
:p5.Vector
— Center position (default: origin).colors
: Array of colors (eitherp5.Color
or string).fuse
: Boolean — Whether to fuse vertex colors across faces (default:false
).
function draw() {
dodecahedron(50, ['yellow', 'blue', 'red'])
}
let geom
function setup() {
createCanvas(400, 400, WEBGL)
geom = platonicGeometry(dodecahedron, 50, ['yellow', 'blue', 'red'])
}
function draw() {
background(0)
orbitControl()
model(geom)
}
let geom
function setup() {
createCanvas(400, 400, WEBGL)
geom = buildGeometry(() => {
dodecahedron(50, ['yellow', 'blue', 'red'])
})
geom.clearColors()
geom.computeNormals()
}
function draw() {
background(0)
orbitControl()
model(geom)
}
Install:
npm install p5 p5.platonic
Then in main.js
:
import p5 from 'p5'
import 'p5.platonic'
// Retained mode
let dodecahedronGeom, icosahedronGeom
new p5(p => {
p.setup = () => {
p.createCanvas(400, 400, p.WEBGL)
dodecahedronGeom = p.platonicGeometry(p.dodecahedron, 50, true, ['yellow', 'blue', 'red'], true)
icosahedronGeom = p.buildGeometry(() => {
p.icosahedron(50, ['yellow', 'blue', 'red'])
})
// icosahedronGeom.clearColors() // optional
icosahedronGeom.computeNormals() // optional
}
p.draw = () => {
p.background(255)
p.orbitControl()
// Retained mode rendering
p.model(dodecahedronGeom)
p.push()
p.translate(-p.width / 4, -p.height / 4, 0)
p.rotateZ(p.frameCount * 0.01)
p.rotateX(p.frameCount * 0.01)
p.rotateY(p.frameCount * 0.01)
p.model(icosahedronGeom)
p.pop()
// Immediate mode rendering
p.push()
p.translate(-p.width / 4, +p.height / 4, 0)
p.rotateZ(p.frameCount * 0.01)
p.rotateX(p.frameCount * 0.01)
p.rotateY(p.frameCount * 0.01)
p.fill('DarkTurquoise')
p.tetrahedron()
p.pop()
}
})
Include after p5.js
:
<script src="https://cdn.jsdelivr.net/npm/p5.platonic/dist/p5.platonic.js"></script>
<!-- or minified -->
<script src="https://cdn.jsdelivr.net/npm/p5.platonic/dist/p5.platonic.min.js"></script>
git clone https://github.com/VisualComputing/p5.platonic
cd p5.platonic
npm install