Skip to content

Latest commit

 

History

History
109 lines (76 loc) · 3.62 KB

README.md

File metadata and controls

109 lines (76 loc) · 3.62 KB
Raw

p5.platonic

p5.js library for rendering of platonic solids.

Platonic solids.

Usage

solid(args)

Where solid can be one of the following functions: tetrahedron, hexahedron (or cube), octahedron, dodecahedron, or icosahedron, and args are:

  • length: Defines the length of the solid (default is 100).
  • center: A p5.Vector defining the location of the solid center (default is (0, 0, 0)).
  • colors: An array containing the p5.Color elements used to color faces or vertices. If no colors are provided, style the solid using p5 fill, stroke, etc.
  • fuse: A boolean. If true, defines per-vertex coloring (colors will fuse within faces); if false, defines per-face coloring (faces will have uniform coloring). The default is false.

All args are optional and may be specified in any order. For example, calling in draw:

function draw() {
  dodecahedron(50, ['yellow', 'blue', 'red'])
}

would draw a dodecahedron with a length of 50, with faces colored yellow, blue, and red (non-fused colors).

Retained Mode

There are two ways to define retained mode geometry of the solid function with args (refer to the previous section for solid and args) in setup.

Using platonicGeometry (Recommended Way)

Call platonicGeometry(solid, args), for example:

let dodecahedronGeom

function setup() {
  dodecahedronGeom = platonicGeometry(dodecahedron, 50,
                                      ['yellow', 'blue', 'red'])
}

Or call platonicGeometry(args) to define a random Platonic solid.

Using beginGeometry / endGeometry

Using beginGeometry and endGeometry. For example, the following snippet defines a retained mode dodecahedronGeom:

let dodecahedronGeom

function setup() {
  beginGeometry()
  dodecahedron(50, ['yellow', 'blue', 'red']) // See the previous section for arguments
  dodecahedronGeom = endGeometry()
  dodecahedronGeom.clearColors() // Optional
  dodecahedronGeom.computeNormals() // Optional
}

Rendering

To render a retained-mode Platonic solid, call model. For example:

function draw() {
  model(dodecahedronGeom)
}

Installation

Link the p5.platonic.js library into your HTML file, after you have linked in p5.js. For example:

<!doctype html>
<html>
<head>
  <script src="p5.js"></script>
  <script src="p5.sound.js"></script>
  <script src=https://cdn.jsdelivr.net/gh/VisualComputing/p5.platonic/p5.platonic.js></script>
  <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

to include its minified version use:

<script src=https://cdn.jsdelivr.net/gh/VisualComputing/p5.platonic/p5.platonic.min.js></script>

instead.

vs-code & vs-codium & gitpod hacking instructions

Clone the repo (git clone https://github.com/VisualComputing/p5.platonic) and open it with your favorite editor.

Don't forget to check these p5.js references:

  1. Library creation.
  2. Software architecture.
  3. Webgl mode.