Skip to content

Instantly share code, notes, and snippets.

@mattdesl
Last active August 15, 2020 18:50
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mattdesl/618cf3fdaf5c6aabbdbd70a6ef5a2796 to your computer and use it in GitHub Desktop.
Save mattdesl/618cf3fdaf5c6aabbdbd70a6ef5a2796 to your computer and use it in GitHub Desktop.
// We'll use an npm module here (probably won't be possible in the Figma plugin...)
import triangulate from 'delaunay-triangulate';
// Export your generative program
export default {
props: {
// Number of points (e.g. 1D data structure)
shape: 125
},
// Here the 'vertex' shader generates random points in 2D
vertex (_, { util }) {
return [
util.random.range(-1, 1),
util.random.range(-1, 1)
];
},
// Render the output by triangulating all the 2D screen positions
render (vertices) {
// Screen-space positions are in XYZW by default, trim it to just XY
const positions = vertices.map(p => p.position.slice(0, 2));
// Triangulate the positions
const cells = triangulate(positions);
// Get renderable circles
const points = positions.map(position => {
return {
type: 'circle',
position,
radius: 8
};
});
// Get renderable lines
const lines = cells.map(cell => {
const path = cell.map(i => positions[i]);
return {
lineWidth: 1,
type: 'path',
closed: true,
path
};
});
// Compose output
return [
lines,
points
];
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment