• Stars
    star
    1,083
  • Rank 42,742 (Top 0.9 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Realtime WebGL origami simulator

OrigamiSimulator

Live demo at origamisimulator.org

This app allows you to simulate how any origami crease pattern will fold. It may look a little different from what you typically think of as "origami" - rather than folding paper in a set of sequential steps, this simulation attempts to fold every crease simultaneously. It does this by iteratively solving for small displacements in the geometry of an initially flat sheet due to forces exerted by creases. You can read more about it in our paper:

If you have feedback about features you want to see in this app, please see this thread.

All simulation methods were written from scratch and are executed in parallel in several GPU fragment shaders for fast performance. The solver extends work from the following sources:

This app also uses the methods described in Simple Simulation of Curved Folds Based on Ruling-aware Triangulation to import curved crease patterns and pre-process them in a way that realistically simulates the bending between the creases.

Originally built by Amanda Ghassaei as a final project for Geometric Folding Algorithms. Other contributors include Sasaki Kosuke, Erik Demaine, and others. Code available on Github. If you have interesting crease patterns that would make good demo files, please send them to me (Amanda) so I can add them to the Examples menu. My email address is on my website. Thanks!


Instructions:


  • Slide the Fold Percent slider to control the degree of folding of the pattern (100% is fully folded, 0% is unfolded, and -100% is fully folded with the opposite mountain/valley assignments).
  • Drag to rotate the model, scroll to zoom.
  • Import other patterns under the Examples menu.
  • Upload your own crease patterns in SVG or FOLD formats, following these instructions.
  • Export FOLD files or 3D models ( STL or OBJ ) of the folded state of your design ( File > Save Simulation as... ).

  • Visualize the internal strain of the origami as it folds using the Strain Visualization in the left menu of the Advanced Options.


  • If you are working from a computer connected to a VR headset and hand controllers, follow these instructions to use this app in an interactive virtual reality mode. (sorry I think this may be deprecated now!)

External Libraries:


You can find additional information in our 7OSME paper and project website. If you have feedback about features you want to see in this app, please see this thread.

More Repositories

1

gpu-io

A GPU-accelerated computing library for running physics simulations and other GPGPU computations in a web browser.
TypeScript
1,204
star
2

FluidSimulation

WebGL shader for mixed grid-particle fluid simulation
TypeScript
273
star
3

canvas-capture

Record the canvas as an image, mp4 video, or gif from the browser
JavaScript
205
star
4

VortexShedding

A realtime fluid flow simulation on the GPU using WebGL
JavaScript
142
star
5

Fusion360-Scripts

A collection of Fusion360 scripts, mostly for generating animations
Python
103
star
6

LaserCutRecord

generate vector cutting paths from digital audio to make a working record
Processing
55
star
7

SoapFlow

Jupyter Notebook
42
star
8

MassSpringShader

WebGL Shader that implements a mass-spring-damper physical simulation
HTML
41
star
9

3DPrintedRecord

3d printable record stl generator using Processing and Python
Processing
37
star
10

tellurion-orrery

CAD files and info for building an orrery from scratch
JavaScript
34
star
11

ShellFormFinding

Web-based simulation tool that allows you to design 3D forms in pure compression
JavaScript
28
star
12

ConwayShader

WebGL Shader for Conway's Game of Life
TypeScript
22
star
13

Lithograph3DPrint

converts an image to a 3d printable heightmap or lithophane (http://en.wikipedia.org/wiki/Lithophane)
Processing
20
star
14

MeshWriter

Live three.js coding with STL and OBJ export
JavaScript
19
star
15

botanigram

Create "growing" animations of plants from a single photograph
TypeScript
18
star
16

Sugarcube-Arduino-Library

A grid-based midi instrument, with accelerometer and gyroscope for playful interactions
Max
18
star
17

Genetic-Images

a Processing sketch that generates images from translucent polygons using a genetic algorithm
Processing
18
star
18

marbling-experiment

An early experiment toward building a marbling simulation
TypeScript
16
star
19

msh-parser

Finite element .msh format parser, written in TypeScript
TypeScript
15
star
20

MotionMagnification

Eulerian, Lagrangian, and Phase-Based Motion Magnification in MATLAB
MATLAB
13
star
21

stl-parser

Standalone module for parsing binary and ASCII STL files, written in TypeScript
TypeScript
12
star
22

salesforce-tower

3D visualization for artwork on Salesforce Tower
JavaScript
11
star
23

TrussOptimization2D

Web-based design and optimization tool that uses real-time simulation feedback to inform the design process.
JavaScript
11
star
24

ProjectionMappingAlignment

WebGL app that breaks out many of the threejs camera parameters to fine tune projection mapping alignment
JavaScript
11
star
25

ScratchSerialExtension

A Serial Communication Extension for Scratch
JavaScript
11
star
26

ffmpeg-scripts

A collection of ffmpeg scripts I'm using to generate gifs and mp4
Shell
10
star
27

vector-math

A minimal vector math library to handle 2D/3D translations and rotations.
TypeScript
10
star
28

ReactionDiffusionShader

WebGL Shader for a Gray-Scott reaction diffusion system
JavaScript
10
star
29

MichellStructures

Web-based simulation tool that visualizes geometric properties and static internal forces in a loaded Michell cantilever
JavaScript
9
star
30

CurvedCreases

JavaScript
6
star
31

AMOEBA

JavaScript
5
star
32

LinkageOptimization

JavaScript
4
star
33

Linkages

A planar linkage optimization tool
nesC
3
star
34

LenticularProcessor

a Processing sketch for preparing a stack of images for a lenticlar lens
Processing
2
star
35

AMOEBA-2.5D

JavaScript
2
star
36

NodeSerialPortBoilerplate

Simple demo to get serial ports up and running with node and client-side javascript
JavaScript
2
star
37

event-dispatcher

Parent class to support custom event listeners, written in TypeScript.
TypeScript
2
star
38

StepperRotaryStage

A geared, rotary stage made from 3D printed and laser cut parts (and some off the shelf components). Modeled parametrically in Fusion360.
1
star
39

ActiveBendingHybridStructures

JavaScript
1
star
40

ms-thesis

TeX
1
star
41

Processing-Linkage-Generator

leg linkages designed in Processing, exported to STL for 3D Printing via ModelBuilder Library
Processing
1
star
42

ImageMagick

a collection of ImageMagick scripts
Shell
1
star
43

type-checks

A collection of JavaScript type checks.
TypeScript
1
star
44

RecordProcessor

A web app for designing custom records, outputs to laser cutter, CNC mill...
JavaScript
1
star