Giter VIP home page Giter VIP logo

polyhedra-viewer's Introduction

Polyhedra Viewer

An interactive tool that lets you transform various convex polyhedra and view information about them.

Polyhedra include:

Geometric data taken from George W. Hart's Virtual Polyhedra.

Getting started

  1. git clone https://github.com/tesseralis/polyhedra-viewer
  2. cd polyhedra-viewer
  3. yarn

Running locally

Run yarn start to start the site locally on http://localhost:3000.

Testing

Run yarn test to run the test suite.

Contributing

Check out the open issues, especially the ones labelled help wanted for issues that you can help out on!

All contributors are expected to abide by the Code of Conduct.

polyhedra-viewer's People

Contributors

dependabot-preview[bot] avatar jewel-andraia avatar mjdominus avatar tesseralis avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

polyhedra-viewer's Issues

[Enhancement] Custom eases and timings for different operations

All the operations use the same ease function (easeQuadInOut) and have the same timing (default 1 sec). This leads to some animations seeming too slow, and some seeming too fast for the current speed. By giving each one a different ease and timing, we can give them more personality.

Question about JSON export

Is "Edges" neccesary? My initial thought was that the geometry is fully defined by just vertices and faces. An edge is just where two faces share two vertices.

Related question - is the JSON format specific to this codebase or is it also used somewhere else?

[Feature] Keyboard shortcuts for operations

Add keyboard shortcuts for the different operators and operator options and update the UI to teach users what shortcuts are available.

Thoughts:

  • truncate: t
  • rectify: a (for ambo)
  • expand: e
  • snub: s

TODO: figure out the rest

☂️[Feature] New polyhedra!

Umbrella issue for new types of polyhedra and shapes that we can include in the Polyhedra Viewer.

The main thing to note is that the Polyhedra Viewer is about polyhedra and their relationships to each other. For inclusion in the app, I'd like a set of shapes that come with their own set of operations that tie them to each other. For example, the Catalan solids can be generated from the Platonic and Archimedean solids through Conway operators.

Polyhedra

Non-polyhedra

  • Regular polygons ▵ □ ⬠ - be able to do stuff like "elongating" a triangle to get a triangular prism.
  • Polychora - Requires custom rendering engine for 4D geometry; Probably going to save this for a "Polychora Viewer"
  • Uniform tilings - These are degenerate uniform polyhedra, in that they're what happens when you try to make a uniform polyhedron and end up too flat. Or you can think of uniform polyhedra as uniform tilings on a sphere!

If there are any other polyhedra or shapes, or math objects that you'd like to see, respond with a comment and I can add it to the list!

[Refactor] Switch to react-three-fiber

The app currently uses X3DOM which does what we want, but comes with some severe limitations:

  • Has a fixed rotation system -- as far as I can tell, you can't "turn off" the ability to rotate the scene with the mouse, meaning we can't make scenes with, say, multiple polyhedra in a top-down view.
  • Outdated, doesn't support builders and requires a custom webpack loader to run.
  • Much smaller community than three.js

I've been meaning to switch to THREE.js for a while, and now that react-three-fiber exists it seems like the perfect opportunity!

The main issues for this are:

  1. Creating a version of <PolyhedronGeometry> allows polyhedra with more than three vertices per face. (when I tried it out a while back, I couldn't figure out how to get the lighting to not light each of the coplanar faces separately.
  2. Finding a control system that mimics X3DOM's (TrackballControls should work!)
  3. replicating the current materials, colors, and options.

Moving to Three.js also means that we no longer need toxiclibsjs.

[Enhancement] More advanced color coding for polyhedra

Right now the faces on the polyhedra are colored solely on their number of sides. This is simple but this loses us contextual information on what each face represents. For example, look at the wikipedia images of a rhombicuboctahedron and a snub cube:

rhombicuboctahedron

snub cube

They have cube and triangle faces colored differently based on whether they are "cap" faces from the original solid they were based on or "edge" faces if they were created in the expansion.

Ideally, this would come in a consistent theme that associates different tints, shapes, or materials with a specific role. For example, maybe faces that make up a cupola cap are more saturated than ones that make up the sides of a prism or antiprism.

This would also cause us to need to change what we allow for configurations. Perhaps instead of allowing any color for a polyhedron we allow from a specific set of themes. We'd also need to change the way the color transformations are calculated.

[Feature] Polyhedral nets

Support the display of polyhedral nets.

Initially, we'd just want a toggle somewhere in the Viewer that lets the user switch between the net and the polyhedron.

Considerations:

  • operations should be disabled when on the net view
  • probably want to display it as an svg
  • the net calculation algorithm should determine a "pretty" net. i.e. one that fits the viewport, and one that keeps interesting facets of the polyhedron intact, like cupola faces.

If we're super cool, we could do a folding/unfolding animation: https://www.youtube.com/watch?v=Igf4BXkERyI

But this is actually really really hard, so it's not a priority.

☂️Roadmap to Polyhedra Viewer 4.0!

This issue lists all significant "breaking" changes to the Polyhedra Viewer that feel like they belong to a major version release—those that require significant changes to the flow of the app, or that I just can't figure out how to "fit" in the current app right now. I plan on working on some other projects in the near future, but this is something I'd like to get back to when I have time.

The Roadmap

  • #55 Design system: actually have an identity for the app instead of using default fonts.
  • #53 Redesign the home page: would change the main flow of the app significantly, and would require an "encyclopedia" section.
  • #13 Switch to react-three-fiber: would drastically change how our polyhedra are rendered (plus open up a lot of possibilities for features).
  • #57 3D table of polyhedra: after switching to ThreeJS, we can use a fully 3D scene as our "periodic table" of polyhedra.
  • #36 More sophisticated coloring for polyhedron facets

Nice-to-haves

  • #54 Polyhedra Encyclopedia: a whole new section of the website with lots more work.
  • #35 Advanced search and filter on polyhedra: this would require a new view, or heavily changing a currently existing view.
  • #56 "Bird's Eye View": Change the operations view to make more apparent the graph relationship among different polyhedra.

Why v4.0?

I haven't really been keeping explicit version numbers (how do you version a web app?) but in my mind:

[Feature][Operation] Twisting snub antiprisms <-> gyrobicupolae

Description

Implement the twist operation on snub antiprisms so they can be turned into gyrobicupolae and vice versa:

Implementation details

  1. Add the proper edges to the operation graph
  2. Update the twist operator to work on those additional polyhedra.

[Design] Come up with a design system

My "design system" for the polyhedra viewer is pretty loose. I've been exclusively using standard web fonts and colors so far. As part of a big v4 update I want to actually come up with a codified and unique design system/theme for the app.

[Enhancement] Updated model and thumbnail data

My polyhedra data is adapted from George Hart's Virtual Polyhedra. It's a great resource and helped me take the polyhedra viewer off the ground. However, the data for many of the polyhedra -- particularly the Johnson solids, doesn't adhere to any particular alignment, meaning that some polyhedra end up with a really weird initial view:

subsection of polyhedra table showing a backwards pentagonal prism

The data should be updated so that . There are two ways to do this:

  1. create a transformer script that takes our current data and transforms it to align with the correct axes, or
  2. (my preferred approach) generate the polyhedra from "first principles", ie. using the vertex coordinates available through wikipedia and other sources.

2 is my preferred approach, but it runs into the problem that it requires additional computation to create each polyhedron, though this can be bypassed by using something like preval.macro to generate the data at compile time.

Another consideration is that most sources I can find only post vertex data, meaning we'd need some sort of convex hull algorithm to get the face data.

Once this is done, we'd just need to update the thumbnails with our fancy new aligned polyhedra!

[Enhancement] "Bird's Eye View" of operations

One problem that I have with the current polyhedra viewer is that it's hard for users to really tell how an operation "moves" you across the map of polyhedra. The set of polyhedra is a graph connected with operations as edges:

polyhedra table showing graph of operations between the polyhedra

However, it's not clear when doing operations on polyhedra that this "movement along the graph" is happening. I want to find a way to make this more apparent, like having a "map" of the entire graph visible in a corner (like how code editors have a minimap). Or perhaps, this requires rethinking how the app is laid out in its entirety.

about citation of animations in Polyhedra Viewer

Dear Sir or Madam,

I am a student who recently reads the website Polyhedra Viewer https://polyhedra.tessera.li/.

I am wondering if I want to put some figures of polyhedra into my papers, what should be the right reference and citation format? I usually cite contents from papers but never from a specific website so I have no experience on that.

  1. Please provide details about it as far as possible. e.g. in figure, I say "figure is reproduced from Ref. []" or "These structures are created by... []" In bibliography, "author/title/website/HRC/..."

The possible scenaria for use:

One is for my course assignment. (quite simple)

The other is for future possible published papers. (may involve copyright issue)

  1. If copying these fantastic figures from this website is not a good idea, could you also recommend some software for me to create polyhedra?

I appreciate it.

Thanks,
Ruikang

PNG Thumbnails being modified on clone

I get the following warning when cloning the repo:

Encountered 121 file(s) that should have been pointers, but weren't:
	src/images/sad-scutoid.png
	src/images/thumbnails/augmented-dodecahedron.png
	src/images/thumbnails/augmented-hexagonal-prism.png
	src/images/thumbnails/augmented-pentagonal-prism.png
	src/images/thumbnails/augmented-sphenocorona.png
	src/images/thumbnails/augmented-triangular-prism.png
	src/images/thumbnails/augmented-tridiminished-icosahedron.png
	src/images/thumbnails/augmented-truncated-cube.png
	src/images/thumbnails/augmented-truncated-dodecahedron.png
	src/images/thumbnails/augmented-truncated-tetrahedron.png
	src/images/thumbnails/biaugmented-pentagonal-prism.png
	src/images/thumbnails/biaugmented-triangular-prism.png
	src/images/thumbnails/biaugmented-truncated-cube.png
	src/images/thumbnails/bigyrate-diminished-rhombicosidodecahedron.png
	src/images/thumbnails/bilunabirotunda.png
	src/images/thumbnails/cube.png
	src/images/thumbnails/cuboctahedron.png
	src/images/thumbnails/decagonal-antiprism.png
	src/images/thumbnails/decagonal-prism.png
	src/images/thumbnails/diminished-rhombicosidodecahedron.png
	src/images/thumbnails/disphenocingulum.png
	src/images/thumbnails/dodecahedron.png
	src/images/thumbnails/elongated-pentagonal-bipyramid.png
	src/images/thumbnails/elongated-pentagonal-cupola.png
	src/images/thumbnails/elongated-pentagonal-gyrobicupola.png
	src/images/thumbnails/elongated-pentagonal-gyrobirotunda.png
	src/images/thumbnails/elongated-pentagonal-gyrocupolarotunda.png
	src/images/thumbnails/elongated-pentagonal-orthobicupola.png
	src/images/thumbnails/elongated-pentagonal-orthobirotunda.png
	src/images/thumbnails/elongated-pentagonal-orthocupolarotunda.png
	src/images/thumbnails/elongated-pentagonal-pyramid.png
	src/images/thumbnails/elongated-pentagonal-rotunda.png
	src/images/thumbnails/elongated-square-bipyramid.png
	src/images/thumbnails/elongated-square-cupola.png
	src/images/thumbnails/elongated-square-gyrobicupola.png
	src/images/thumbnails/elongated-square-pyramid.png
	src/images/thumbnails/elongated-triangular-bipyramid.png
	src/images/thumbnails/elongated-triangular-cupola.png
	src/images/thumbnails/elongated-triangular-gyrobicupola.png
	src/images/thumbnails/elongated-triangular-orthobicupola.png
	src/images/thumbnails/elongated-triangular-pyramid.png
	src/images/thumbnails/gyrate-bidiminished-rhombicosidodecahedron.png
	src/images/thumbnails/gyrate-rhombicosidodecahedron.png
	src/images/thumbnails/gyrobifastigium.png
	src/images/thumbnails/gyroelongated-pentagonal-bicupola.png
	src/images/thumbnails/gyroelongated-pentagonal-birotunda.png
	src/images/thumbnails/gyroelongated-pentagonal-cupola.png
	src/images/thumbnails/gyroelongated-pentagonal-cupolarotunda.png
	src/images/thumbnails/gyroelongated-pentagonal-pyramid.png
	src/images/thumbnails/gyroelongated-pentagonal-rotunda.png
	src/images/thumbnails/gyroelongated-square-bicupola.png
	src/images/thumbnails/gyroelongated-square-bipyramid.png
	src/images/thumbnails/gyroelongated-square-cupola.png
	src/images/thumbnails/gyroelongated-square-pyramid.png
	src/images/thumbnails/gyroelongated-triangular-bicupola.png
	src/images/thumbnails/gyroelongated-triangular-cupola.png
	src/images/thumbnails/hebesphenomegacorona.png
	src/images/thumbnails/hexagonal-antiprism.png
	src/images/thumbnails/hexagonal-prism.png
	src/images/thumbnails/icosahedron.png
	src/images/thumbnails/icosidodecahedron.png
	src/images/thumbnails/metabiaugmented-dodecahedron.png
	src/images/thumbnails/metabiaugmented-hexagonal-prism.png
	src/images/thumbnails/metabiaugmented-truncated-dodecahedron.png
	src/images/thumbnails/metabidiminished-icosahedron.png
	src/images/thumbnails/metabidiminished-rhombicosidodecahedron.png
	src/images/thumbnails/metabigyrate-rhombicosidodecahedron.png
	src/images/thumbnails/metagyrate-diminished-rhombicosidodecahedron.png
	src/images/thumbnails/octagonal-antiprism.png
	src/images/thumbnails/octagonal-prism.png
	src/images/thumbnails/octahedron.png
	src/images/thumbnails/parabiaugmented-dodecahedron.png
	src/images/thumbnails/parabiaugmented-hexagonal-prism.png
	src/images/thumbnails/parabiaugmented-truncated-dodecahedron.png
	src/images/thumbnails/parabidiminished-rhombicosidodecahedron.png
	src/images/thumbnails/parabigyrate-rhombicosidodecahedron.png
	src/images/thumbnails/paragyrate-diminished-rhombicosidodecahedron.png
	src/images/thumbnails/pentagonal-antiprism.png
	src/images/thumbnails/pentagonal-bipyramid.png
	src/images/thumbnails/pentagonal-cupola.png
	src/images/thumbnails/pentagonal-gyrobicupola.png
	src/images/thumbnails/pentagonal-gyrocupolarotunda.png
	src/images/thumbnails/pentagonal-orthobicupola.png
	src/images/thumbnails/pentagonal-orthobirotunda.png
	src/images/thumbnails/pentagonal-orthocupolarotunda.png
	src/images/thumbnails/pentagonal-prism.png
	src/images/thumbnails/pentagonal-pyramid.png
	src/images/thumbnails/pentagonal-rotunda.png
	src/images/thumbnails/rhombicosidodecahedron.png
	src/images/thumbnails/rhombicuboctahedron.png
	src/images/thumbnails/snub-cube.png
	src/images/thumbnails/snub-disphenoid.png
	src/images/thumbnails/snub-dodecahedron.png
	src/images/thumbnails/snub-square-antiprism.png
	src/images/thumbnails/sphenocorona.png
	src/images/thumbnails/sphenomegacorona.png
	src/images/thumbnails/square-antiprism.png
	src/images/thumbnails/square-cupola.png
	src/images/thumbnails/square-gyrobicupola.png
	src/images/thumbnails/square-orthobicupola.png
	src/images/thumbnails/square-pyramid.png
	src/images/thumbnails/tetrahedron.png
	src/images/thumbnails/triangular-bipyramid.png
	src/images/thumbnails/triangular-cupola.png
	src/images/thumbnails/triangular-hebesphenorotunda.png
	src/images/thumbnails/triangular-orthobicupola.png
	src/images/thumbnails/triangular-prism.png
	src/images/thumbnails/triaugmented-dodecahedron.png
	src/images/thumbnails/triaugmented-hexagonal-prism.png
	src/images/thumbnails/triaugmented-triangular-prism.png
	src/images/thumbnails/triaugmented-truncated-dodecahedron.png
	src/images/thumbnails/tridiminished-icosahedron.png
	src/images/thumbnails/tridiminished-rhombicosidodecahedron.png
	src/images/thumbnails/trigyrate-rhombicosidodecahedron.png
	src/images/thumbnails/truncated-cube.png
	src/images/thumbnails/truncated-cuboctahedron.png
	src/images/thumbnails/truncated-dodecahedron.png
	src/images/thumbnails/truncated-icosahedron.png
	src/images/thumbnails/truncated-icosidodecahedron.png
	src/images/thumbnails/truncated-octahedron.png
	src/images/thumbnails/truncated-tetrahedron.png

And, with git status:

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   src/images/sad-scutoid.png
	modified:   src/images/thumbnails/augmented-dodecahedron.png
	modified:   src/images/thumbnails/augmented-hexagonal-prism.png
	modified:   src/images/thumbnails/augmented-pentagonal-prism.png
	modified:   src/images/thumbnails/augmented-sphenocorona.png
	modified:   src/images/thumbnails/augmented-triangular-prism.png
	modified:   src/images/thumbnails/augmented-tridiminished-icosahedron.png
	modified:   src/images/thumbnails/augmented-truncated-cube.png
	modified:   src/images/thumbnails/augmented-truncated-dodecahedron.png
	modified:   src/images/thumbnails/augmented-truncated-tetrahedron.png
	modified:   src/images/thumbnails/biaugmented-pentagonal-prism.png
	modified:   src/images/thumbnails/biaugmented-triangular-prism.png
	modified:   src/images/thumbnails/biaugmented-truncated-cube.png
	modified:   src/images/thumbnails/bigyrate-diminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/bilunabirotunda.png
	modified:   src/images/thumbnails/cube.png
	modified:   src/images/thumbnails/cuboctahedron.png
	modified:   src/images/thumbnails/decagonal-antiprism.png
	modified:   src/images/thumbnails/decagonal-prism.png
	modified:   src/images/thumbnails/diminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/disphenocingulum.png
	modified:   src/images/thumbnails/dodecahedron.png
	modified:   src/images/thumbnails/elongated-pentagonal-bipyramid.png
	modified:   src/images/thumbnails/elongated-pentagonal-cupola.png
	modified:   src/images/thumbnails/elongated-pentagonal-gyrobicupola.png
	modified:   src/images/thumbnails/elongated-pentagonal-gyrobirotunda.png
	modified:   src/images/thumbnails/elongated-pentagonal-gyrocupolarotunda.png
	modified:   src/images/thumbnails/elongated-pentagonal-orthobicupola.png
	modified:   src/images/thumbnails/elongated-pentagonal-orthobirotunda.png
	modified:   src/images/thumbnails/elongated-pentagonal-orthocupolarotunda.png
	modified:   src/images/thumbnails/elongated-pentagonal-pyramid.png
	modified:   src/images/thumbnails/elongated-pentagonal-rotunda.png
	modified:   src/images/thumbnails/elongated-square-bipyramid.png
	modified:   src/images/thumbnails/elongated-square-cupola.png
	modified:   src/images/thumbnails/elongated-square-gyrobicupola.png
	modified:   src/images/thumbnails/elongated-square-pyramid.png
	modified:   src/images/thumbnails/elongated-triangular-bipyramid.png
	modified:   src/images/thumbnails/elongated-triangular-cupola.png
	modified:   src/images/thumbnails/elongated-triangular-gyrobicupola.png
	modified:   src/images/thumbnails/elongated-triangular-orthobicupola.png
	modified:   src/images/thumbnails/elongated-triangular-pyramid.png
	modified:   src/images/thumbnails/gyrate-bidiminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/gyrate-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/gyrobifastigium.png
	modified:   src/images/thumbnails/gyroelongated-pentagonal-bicupola.png
	modified:   src/images/thumbnails/gyroelongated-pentagonal-birotunda.png
	modified:   src/images/thumbnails/gyroelongated-pentagonal-cupola.png
	modified:   src/images/thumbnails/gyroelongated-pentagonal-cupolarotunda.png
	modified:   src/images/thumbnails/gyroelongated-pentagonal-pyramid.png
	modified:   src/images/thumbnails/gyroelongated-pentagonal-rotunda.png
	modified:   src/images/thumbnails/gyroelongated-square-bicupola.png
	modified:   src/images/thumbnails/gyroelongated-square-bipyramid.png
	modified:   src/images/thumbnails/gyroelongated-square-cupola.png
	modified:   src/images/thumbnails/gyroelongated-square-pyramid.png
	modified:   src/images/thumbnails/gyroelongated-triangular-bicupola.png
	modified:   src/images/thumbnails/gyroelongated-triangular-cupola.png
	modified:   src/images/thumbnails/hebesphenomegacorona.png
	modified:   src/images/thumbnails/hexagonal-antiprism.png
	modified:   src/images/thumbnails/hexagonal-prism.png
	modified:   src/images/thumbnails/icosahedron.png
	modified:   src/images/thumbnails/icosidodecahedron.png
	modified:   src/images/thumbnails/metabiaugmented-dodecahedron.png
	modified:   src/images/thumbnails/metabiaugmented-hexagonal-prism.png
	modified:   src/images/thumbnails/metabiaugmented-truncated-dodecahedron.png
	modified:   src/images/thumbnails/metabidiminished-icosahedron.png
	modified:   src/images/thumbnails/metabidiminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/metabigyrate-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/metagyrate-diminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/octagonal-antiprism.png
	modified:   src/images/thumbnails/octagonal-prism.png
	modified:   src/images/thumbnails/octahedron.png
	modified:   src/images/thumbnails/parabiaugmented-dodecahedron.png
	modified:   src/images/thumbnails/parabiaugmented-hexagonal-prism.png
	modified:   src/images/thumbnails/parabiaugmented-truncated-dodecahedron.png
	modified:   src/images/thumbnails/parabidiminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/parabigyrate-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/paragyrate-diminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/pentagonal-antiprism.png
	modified:   src/images/thumbnails/pentagonal-bipyramid.png
	modified:   src/images/thumbnails/pentagonal-cupola.png
	modified:   src/images/thumbnails/pentagonal-gyrobicupola.png
	modified:   src/images/thumbnails/pentagonal-gyrocupolarotunda.png
	modified:   src/images/thumbnails/pentagonal-orthobicupola.png
	modified:   src/images/thumbnails/pentagonal-orthobirotunda.png
	modified:   src/images/thumbnails/pentagonal-orthocupolarotunda.png
	modified:   src/images/thumbnails/pentagonal-prism.png
	modified:   src/images/thumbnails/pentagonal-pyramid.png
	modified:   src/images/thumbnails/pentagonal-rotunda.png
	modified:   src/images/thumbnails/rhombicosidodecahedron.png
	modified:   src/images/thumbnails/rhombicuboctahedron.png
	modified:   src/images/thumbnails/snub-cube.png
	modified:   src/images/thumbnails/snub-disphenoid.png
	modified:   src/images/thumbnails/snub-dodecahedron.png
	modified:   src/images/thumbnails/snub-square-antiprism.png
	modified:   src/images/thumbnails/sphenocorona.png
	modified:   src/images/thumbnails/sphenomegacorona.png
	modified:   src/images/thumbnails/square-antiprism.png
	modified:   src/images/thumbnails/square-cupola.png
	modified:   src/images/thumbnails/square-gyrobicupola.png
	modified:   src/images/thumbnails/square-orthobicupola.png
	modified:   src/images/thumbnails/square-pyramid.png
	modified:   src/images/thumbnails/tetrahedron.png
	modified:   src/images/thumbnails/triangular-bipyramid.png
	modified:   src/images/thumbnails/triangular-cupola.png
	modified:   src/images/thumbnails/triangular-hebesphenorotunda.png
	modified:   src/images/thumbnails/triangular-orthobicupola.png
	modified:   src/images/thumbnails/triangular-prism.png
	modified:   src/images/thumbnails/triaugmented-dodecahedron.png
	modified:   src/images/thumbnails/triaugmented-hexagonal-prism.png
	modified:   src/images/thumbnails/triaugmented-triangular-prism.png
	modified:   src/images/thumbnails/triaugmented-truncated-dodecahedron.png
	modified:   src/images/thumbnails/tridiminished-icosahedron.png
	modified:   src/images/thumbnails/tridiminished-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/trigyrate-rhombicosidodecahedron.png
	modified:   src/images/thumbnails/truncated-cube.png
	modified:   src/images/thumbnails/truncated-cuboctahedron.png
	modified:   src/images/thumbnails/truncated-dodecahedron.png
	modified:   src/images/thumbnails/truncated-icosahedron.png
	modified:   src/images/thumbnails/truncated-icosidodecahedron.png
	modified:   src/images/thumbnails/truncated-octahedron.png
	modified:   src/images/thumbnails/truncated-tetrahedron.png

no changes added to commit (use "git add" and/or "git commit -a")

Seems to be related to Git LFS but I'm not sure what is going on. I'd like to open a PR but not add these image modifications if unnecessary. Is there a way around this issue, or should I just commit these changes along with my other changes?

[Feature] Redesign the home page

Instead of a giant home page with all the information and tables at once, make the homepage a splash screen and separate out information:

  • Home page should be a splash screen with a rotating model of polyhedra that automatically transform
  • The page should have two main links: "Learn" and "Play"
  • "Learn" should take you to an Explorable Article with information on each type of polyhedron and operation #54
  • "Play" should take you to the current front-page content, a table of all the polyhedra that you can play with, or give you the option to pick a random polyhedron

transitions between platonic solids

hi, I'd like to use your program to demonstrate the transition between platonic solids. the illustration would go something like this:

  1. start with a tetrahedron, such that it's not pointing upward (like how it's normally seen), but with its two edges opposite to each other forming a cross (to visualise this, imagine I'm looking from the top looking down: one edge will go horizontally left-to-right, then just above or below that is another edge that goes top-to-bottom. connected to each of these two edges are two triangles, which swing up (or down) to meet the end of the above (or below) edge -- not sure if that makes sense). (TH standing on it's edge?)
  2. the points of the TH will be selected, and then they will be pushed inward to form planes (this is effectively the same as trucating or rectifying the tetrahedron, but the visual of them being pushed, is because it's designed to show the platonic solids being creating from a contracting or constraining force). once the points have been pushed in such that all of the planes meet each other, it should form an octahedron.
  3. again we're going to take the octahedron now and push it's points inward until the planes meet, and a cube should be formed. (in each one of these transitions, I want to show how the new shape is positioned at a slightly offset angle from the original shape).
    • the cube and octahedron are duals of each other -- and I can't do it in my head, but I believe that if the cube's points are pushed inwards again, it'll form an octahedron again. that'd be cool to show that not only are they duals, but they can be made from each other by continual contraction (pushing their verticies till they become planes).
  4. with the cube, now we're going to do something different: this time, we're going to push the edges inward, forming a plane, and when the planes meet, this will now be a dodecahedron.
  5. again the icosahedron can be created from the dodecahedron by pushing the points inward till they become planes.
    • (it's really hard for me to do this stuff in my head) for this trasformation, it appears different than the cube <-> octahedron one because the planes don't really "meet" in the same way, but kinda stop when they hit the vertex (effectively the same as drawing the triangle around any of the points on the dodecahedron and chopping it there). this is probably significant.
  6. now, there are three duals which transform one to another, each by pushing the points inward (TH and itself, HH <-> OH, DH <-> IH). then, there's two transformation from one solid to another (push TH points into OH (irreversible?), and push cube's edges into DH).
  • TH and itself, each time (half?) the size of the former, and upside-down.
  • the HH <-> OH is turned (by 45(degrees)? -- not sure).
  • the DH <-> IH are also turned a bit as well.
  • I'm not sure the size/volume diffrences, between these solid but it seems it would be interesting to know that.
  1. I find the two contractive transformations of edges and points to be really interesting, because it's paired with three duals: same but an octave bigger (TH), different going from traingles (3) to squares (4) (HH <-> OH), and then harmonius expansive/contractive (DH <-> IH).
  • oscillating between these duals gives me three different feelings:
    • the TH is always double or half (relating to octaves and binary), and because the double or half is pointing the opposite direction, it's like a direct ricochet (180(degrees) reflection)
    • the HH <-> OH transformation is both extremely pointy and sudden. the angles also arrive at 45(degrees from each other), so feels like a very hard ricochet, which gives me the sense of these two being very diffreent from each other. also, the OH looks much more like a sphere than a cube does even though the cube has more points than a sphere. I'm not sure how to capture the feeling of that difference between these two visually though.
      • in traditianl teaching, the difference is between air and earth, which are quite different -- but I don't think that's an effective way of showing the difference -- because air is invisible and earth is visible. these are both visible, so the difference has to be seen in their angles. they're like complete opposites, wheras the IH <-> DH one has much more similarity, and so is therefore more harmonius.
    • the DH <-> IH shows expansion/contraction because the DH's pentagrams become IH's domes, and it feels very smooth, as it's a very slight ricochet (not sure the angle, but much less than 180 or 45). these as water/ether make the calm feeling that happens at the ocean and stuff like that.

ignore all of my extra commentary about their properties at the end there :) each shape produces a strong feeling for me. anyway, next I'd like to show the platonic solids as an expansive transformation, but I haven't figured those ones out yet. I'll explain more later, and maybe you have some ideas.

☂️[Feature] More operations!

Umbrella issue for new operations I want to add, and new polyhedra to apply current operations to.

New operations

Coxeter snub / Semi-snub

The coxeter snub is an alternative definition of snub equivalent to truncation and alternation (keeping every other vertex). It operates on:

  • octahedron -> icosahedron
  • cuboctahedron -> snub cube
  • icosidodecahedron -> snub dodecahedron

Alternation

  • bevelled -> snub
  • P(2n) -> An

Double / Halve

This is the lateral expansion of prisms and pyramids - turns a pyramid to a cupola and doubles the base type of prisms and antiprisms. Also works for augmented cupolae, bipyramids, etc.

name ideas:

  • inflate, grow, enlarge, dilate, embiggen
  • shrink, minify, ??

Increment/decrement

Increment adds a size to prisms, pyramids, and cupolae. e.g. triangular pyramid -> square pyramid. Decrement does the opposite.

Fold/unfold

Special one-off operations that create Elementary Johnson solids like the sphenocorona from other solids. Examples include:

Existing operations, new polyhedra

Double/halve more polyhedra

  • augmented prisms
  • gyroelongated capstones

Rectify pyramids into antiprisms + semisnub

  • digonal antiprism (tetrahedron) -> snub disphenoid
  • square antiprism -> snub square antiprism

Dual of more polyhedra

  • Prisms <-> bipyramids
  • Pyramids <-> pyramids

Increment/Decrement more polyhedra

  • cupolae
  • augmented prisms

Truncation of augmented solids

e.g. augmented dodecahedron -> augmented truncated dodecahedron

Resolved with: #168

Rectifying rectified solids

Rectifies and normalizes rectified polyhedra:

  • octahedron (tetratetrahedron) -> cuboctahedron (rhombitetratetrahedron)
    • already possible
  • cuboctahedron -> rhombicuboctahedron
  • icosidodecahedron -> rhombicosidodecahedron

This can be considered the equivalent operation of the Coxeter snub/semi-snub.

Truncated -> Rectified

There should be an operation that takes a truncated polyhedron and "continues" the truncation, turning it to the properly rectified version. The "sharpen" operation will similarly need to be updated/split to allow sharpening a rectified polyhedron into a truncated solid or a platonic solid.

Expand prisms -> elongated orthobicupolae

  • triangular prism -> elongated triangular orthobicupola
  • cube -> rhobmicuboctahedron
  • pentagonal prism -> elongated pentagonal orthobicupola

Twist on snub antiprisms

Issue: #32

The snub antiprisms can be twisted to form gyrobicupolae:

  • Snub disphenoid -> gyrobifastigium
  • snub triangular antiprism (icosahedron) -> triangular gyrobicupola (cuboctahedron)
    • (already implemented)
  • snub square antiprism -> square gyrobicupola

Misc. individual operations

And more!

Have you found some cool relationship between polyhedra? Comment here and I'll add it to the list :)

[Maintenance] performance audit of polyhedra operations

My current performance metric is "look at how fast the test suite runs". In my defense, it is pretty thorough -- it runs every possible operation on every possible polyhedron with every possible option.

Right now, my metric for performance is "gut check". "oh this looks like it'll be expensive to calculate -- MEMOIZE". "oh I'm creating a bunch of intermediate objects -- BUILDERS".

I also can't figure out how to use a non-browser profiler for JS.

If anyone wants to test out their perf chops and get my test suite down from 10s to like, 8s, be my guest!

yarn test failure

Hello,
I'm running yarn test on Mac Catalina

FAIL src/math/operations/tests/prismOps.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/polyhedra/Polyhedron.ts:12:1)
  at Object.<anonymous> (src/math/polyhedra/index.ts:3:1)
  at Object.<anonymous> (src/math/operations/prismOps.ts:3:1)
  at Object.<anonymous> (src/math/operations/__tests__/prismOps.test.ts:1:1)

FAIL src/data/specs/tests/getSymmetry.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/data/specs/getConwaySymbol.ts:2:1)
  at Object.<anonymous> (src/data/specs/PolyhedronSpecs.ts:10:1)
  at Object.<anonymous> (src/data/specs/Classical.ts:3:1)
  at Object.<anonymous> (src/data/specs/getSpecs.ts:1:1)
  at Object.<anonymous> (src/data/specs/__tests__/getSymmetry.test.ts:1:1)

PASS src/data/tests/symmetry.test.ts
FAIL src/math/operations/tests/chainedOperations.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/polyhedra/Polyhedron.ts:12:1)
  at Object.<anonymous> (src/math/polyhedra/index.ts:3:1)
  at Object.<anonymous> (src/math/operations/__tests__/chainedOperations.test.ts:1:1)

FAIL src/math/operations/tests/resizeOps.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/data/specs/getConwaySymbol.ts:2:1)
  at Object.<anonymous> (src/data/specs/PolyhedronSpecs.ts:10:1)
  at Object.<anonymous> (src/data/specs/Classical.ts:3:1)
  at Object.<anonymous> (src/math/operations/resizeOps.ts:4:1)
  at Object.<anonymous> (src/math/operations/__tests__/resizeOps.test.ts:1:1)

FAIL src/components/ViewerPage/tests/operations.test.tsx
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/polyhedra/Polyhedron.ts:12:1)
  at Object.<anonymous> (src/math/polyhedra/index.ts:3:1)
  at Object.<anonymous> (src/components/ViewerPage/__tests__/operations.test.tsx:10:1)

FAIL src/math/operations/cutPasteOps/tests/augment.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/data/specs/getConwaySymbol.ts:2:1)
  at Object.<anonymous> (src/data/specs/PolyhedronSpecs.ts:10:1)
  at Object.<anonymous> (src/data/specs/Capstone.ts:3:1)
  at Object.<anonymous> (src/math/operations/cutPasteOps/augment.ts:4:1)
  at Object.<anonymous> (src/math/operations/cutPasteOps/__tests__/augment.test.ts:1:1)

FAIL src/math/operations/tests/truncateOps.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/polyhedra/Polyhedron.ts:12:1)
  at Object.<anonymous> (src/math/polyhedra/index.ts:3:1)
  at Object.<anonymous> (src/math/operations/truncateOps.ts:2:1)
  at Object.<anonymous> (src/math/operations/__tests__/truncateOps.test.ts:1:1)

FAIL src/math/operations/cutPasteOps/tests/diminish.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/data/specs/getConwaySymbol.ts:2:1)
  at Object.<anonymous> (src/data/specs/PolyhedronSpecs.ts:10:1)
  at Object.<anonymous> (src/data/specs/Prismatic.ts:1:1)
  at Object.<anonymous> (src/math/operations/cutPasteOps/diminish.ts:3:1)
  at Object.<anonymous> (src/math/operations/cutPasteOps/__tests__/diminish.test.ts:1:1)

FAIL src/math/polyhedra/tests/Polyhedron.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/polyhedra/Polyhedron.ts:12:1)
  at Object.<anonymous> (src/math/polyhedra/__tests__/Polyhedron.test.ts:1:1)

PASS src/components/ViewerPage/common/SolidScene/tests/X3dPolyhedron.test.tsx
FAIL src/math/operations/cutPasteOps/tests/gyrate.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/polyhedra/Polyhedron.ts:12:1)
  at Object.<anonymous> (src/math/polyhedra/index.ts:3:1)
  at Object.<anonymous> (src/math/operations/cutPasteOps/gyrate.ts:2:1)
  at Object.<anonymous> (src/math/operations/cutPasteOps/__tests__/gyrate.test.ts:1:1)

FAIL src/math/operations/tests/applyOperation.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/math/operations/__tests__/applyOperation.test.ts:2:1)

FAIL src/data/tests/alternates.test.ts
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/data/__tests__/alternates.test.ts:1:1)

FAIL src/components/HomePage/tests/HomePage.test.tsx
● Test suite failed to run

TypeError: groups.flatMap is not a function

  4 | 
  5 | const groups = ["platonic", "archimedean", "prisms", "antiprisms", "johnson"]
> 6 | export const allSolidNames = groups.flatMap(getPolyhedraNames)
    |                                     ^
  7 | 
  8 | export function isValidSolid(solidName: string) {
  9 |   return allSolidNames.includes(solidName)

  at Object.<anonymous> (src/data/common.ts:6:37)
  at Object.<anonymous> (src/data/conway.ts:2:1)
  at Object.<anonymous> (src/components/HomePage/PolyhedronTable.tsx:3:1)
  at Object.<anonymous> (src/components/HomePage/TableSection.tsx:8:1)
  at Object.<anonymous> (src/components/HomePage/HomePage.tsx:9:1)
  at Object.<anonymous> (src/components/HomePage/__tests__/HomePage.test.tsx:3:1)

Test Suites: 13 failed, 2 passed, 15 total
Tests: 25 passed, 25 total
Snapshots: 0 total
Time: 68.411s

[Enhancement] Name explanation pop-overs

Description

Be able to mouse over polyhedron names and display information about what each part of the name means

Example

"Gyroelongated square bipyramid"

  • gyroelongated: the polyhedron is extended by an antiprism
  • square: the polyhedron has a square base
  • bi-: the polyhedron has two capstones attached to it
  • pyramid: a figure made of triangles connected to a base

[Feature] Advanced search and filter on polyhedra

A page that lets you search by specific criteria based on polyhedral data and filter which polyhedra match that criteria:

  • Name
  • Number of vertices, edges, faces of each type

Also lets you do things like:

  • Group and count polyhedra by criteria
  • Sort polyhedra based on attributes like sphericity

[Refactor] Switch to Emotion/theme-ui

I originally made polyhedra viewer yeeearrs ago when the hot new styling library was Aphrodite. Since then, stuff like styled components and emotion have arisen with new paradigms on how to style stuff.

Instead of switching over to that stuff, I decided it would be a wise idea to make my own weird useStyles hook, still using Aphrodite, thus getting the worst of all worlds. It's time to bring my css-in-js to the modern era (until something new comes along next year and everything becomes outdated again).

In particular, I got to use Theme UI through my work at Gatsby and it seems like it encapsulates a lot of the design choices I made (media queries, a binary scale based on rem size, etc.)

It would make it easier to do stuff like add a dark mode!

[Feature] Polyhedra encyclopedia

One of the ideas I had for the polyhedra viewer was to make it into a full-fledged interactive encyclopedia with pages and information about individual polyhedra, groups of polyhedra, operations, etc. It ended up not coming to fruition because of the amount of work/information it would take, but someday I'd like to be able to do it become the one-stop shop for all polyhedra info!

I wonder if Gatsby is a good idea for making a bunch of articles for an encyclopedia…

[Bug] testing error "Cannot flush updates when React is already rendering."

I’m getting this weird warning on npm test:

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.
          in video (at Masthead.tsx:24)
          in a (created by LinkAnchor)
          in LinkAnchor (created by Context.Consumer)
          in Link (at Masthead.tsx:22)
          in VideoLink (at Masthead.tsx:93)
          in div (at Masthead.tsx:91)
          in Masthead (at HomePage.tsx:23)
          in main (at HomePage.tsx:22)
          in Main (at HomePage.tsx:79)
          in div (at HomePage.tsx:78)
          in HomePage (at App.tsx:27)
          in Route (at App.tsx:23)
          in Switch (at App.tsx:22)
          in Suspense (at App.tsx:21)
          in _default (at AppPage.tsx:31)
          in Router (at AppPage.tsx:30)
          in WrapperComponent

It's probably because I'm setting muted on the video which is needed to have the video autoplay on mobile.

It's annoying but not a high-priority issue -- I'm planning on replacing the video with something more interactive anyways.

I am getting Property 'value' does not exist on type 'number as an error when i try to run this

This is what i did:

$yarn
$yarn start

I am super new to javascript. Do please have any ideas why i would get this error ?

Thank you !

$yarn --version
1.13.0

$node --version
v8.11.3

git sha: 251caf1

/data/3rdp/github/react/polyhedra-viewer/src/math/operations/makeOperation.ts
Type error: Property 'value' does not exist on type 'number | Relation | ((...items: Relation[]) => number) | (<U>(callbackfn: (value: Relation, index: number, array: Relation[]) => U, thisArg?: any) => U[]) | (() => string) | { (...items: ConcatArray<Relation>[]): Relation[]; (...items: (Relation | ConcatArray<...>)[]): Relation[]; } | ... 24 more ... | (() => Iterab...'.
  Property 'value' does not exist on type 'number'.  TS2339

    133 |     .filter(!_.isEmpty(filterOpts) ? filterOpts : _.stubTrue)
    134 |     .value();
  > 135 |   return fromConwayNotation(getSingle(next).value);
        |                                             ^
    136 | }
    137 | 
    138 | function normalizeOpResult(

[Feature] Interactive operation transitions

Summary

Allow operation transitions to be "interactive": instead of automatically playing an operation, pull up a slider that the user can slide across, pause, or play the current transition. This can probably be enabled/disabled via config.

Motivation

I've had a couple of people approach me with this as a feature request.

Uncaught TypeError when disabling "Show Faces"

When removing the checkmark of "Show Faces" in the options section, both the Polyhedron and the Sidebar are removed (page turns blank) and the following error is thrown:

react-dom.production.min.js:4408 TypeError: Cannot read property '_listeners' of undefined
    at HTMLUnknownElement.removeEventListener (x3dom.js:23010)
    at X3dPolyhedron.tsx:100
    at lodash.js:5287
    at qr (lodash.js:3246)
    at lodash.js:5252
    at Function.$u (lodash.js:9984)
    at X3dPolyhedron.tsx:98
    at hu (react-dom.production.min.js:4436)
    at react-dom.production.min.js:5047
    at f (scheduler.production.min.js:49)

react-dom.production.min.js:5940 Uncaught TypeError: Cannot read property '_listeners' of undefined
    at HTMLUnknownElement.removeEventListener (x3dom.js:23010)
    at X3dPolyhedron.tsx:100
    at lodash.js:5287
    at qr (lodash.js:3246)
    at lodash.js:5252
    at Function.$u (lodash.js:9984)
    at X3dPolyhedron.tsx:98
    at hu (react-dom.production.min.js:4436)
    at react-dom.production.min.js:5047
    at f (scheduler.production.min.js:49)

[Feature] 3D table of polyhedra

Description

Use actual 3D models of polyhedra in our main "periodic table", laid out in a manner similar to Shirley Wu's "Legends" visualization.

Motivation

The reason we use 2D screenshots and thumbnails is becuase X3DOM has a default camera behavior that's difficult/impossible to turn off: you can scroll around 360 degrees in all directions. This is bad for a scenario where we want a relatively static camera that should only be able to "pan" in orthogonal directions as we see the different types of polyhedra. If we switch to threejs (#13) it would make it a lot easier to set up this scene.

Other considerations

Other stuff we can do if we have 3D models for our table:

  • Be able to spin the polyhedra
  • Be able to use user-defined color schemes
  • Be able to resize the polyhedra based on edge length or volume

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.