Protein Origami

A small browser game about how proteins fold. Fold a toy amino-acid chain on a grid until it reaches its lowest energy. The rules are the HP lattice model: amber beads are water-fearing, blue rings are water-loving.

▶ Play it: https://kraewon7422.github.io/protein-origami/protein-origami.html

One HTML file, no dependencies, no build step. A Korean guide follows the English one below.

Why I made it

I'm learning bioinformatics, and looking at protein structures in PyMOL made me wonder how a chain of amino acids ends up in that shape at all. I thought a game that lets me fold one myself would be a fun way to find out. The HP model is the simplest version of that question: hide the water-fearing parts inside, and see how hard it is to find the best fold.

Play

Open protein-origami.html in any modern browser (desktop or phone).

• Drag any bead. It moves one cell at a time and the rest of the chain follows.
• Click a bead to swing the shorter end of the chain around it (right-click or Shift-click swings the other way).
• Keys: Z undo · R reset · H hint · L levels · N next level · Esc close

The model

• The chain lives on a square grid. Neighbours in the chain sit in neighbouring cells, and no two beads share a cell.
• Each H–H contact is worth −1 energy. A contact is two H beads side by side on the grid that are not already linked in the chain. Lower energy means a more compact, protein-like core.
• Finding the true minimum is NP-hard in general, which is why this toy model is still used to test folding algorithms.

Levels

#	Level	Beads	Target	Source of the target
1–6	warm-ups	4–14	−1 … −6	exact: exhaustive search, checked by the built-in tests
7	Benchmark 20	20	−9	Unger & Moult 1993 benchmark set (best known)
8	Benchmark 24	24	−9	〃
9	Benchmark 25	25	−8	〃
10	Benchmark 36	36	−14	〃
11	Benchmark 48	48	−23	〃

The benchmark targets are the best energies reported in the literature. While developing, a simulated-annealing search using exactly the game's move set reached every one of them, so each target is reachable with in-game moves. The last two are hard by hand.

Open your own chain

Any H/P chain of 4–48 beads can be opened from a link:

protein-origami.html?seq=HPPHHPHPPH&name=My%20chain

It loads as an extra "Imported" level and is never saved over your progress. For chains of up to 14 beads the goal is the exact optimum (exhaustive search). For longer chains it is the best fold a short, seeded simulated-annealing search finds in the page, shown as "computer's best", so you can try to beat it. Codon Forge uses this to send the proteins you build there.

How the moves work

• Drag = pull moves (Lesh, Mitzenmacher & Whitesides 2003). This move set is local, keeps the chain self-avoiding, and can reach every fold. Each frame the game takes the pull move that brings the held bead closest to the pointer, preferring moves that disturb fewer beads.
• Click = pivot move: rotate one side of the chain 90° around a bead, if it fits.
• Hint: searches all single pull moves for one that lowers the energy. If there is none, it looks two moves ahead and shows the first step.

Smoothness

Beads ease to their cells with spring physics, pivots travel along true circular arcs, and the backbone is drawn as one smooth curve. Contacts fade in as a dotted amber glow with a ring pulse. The camera eases to keep the fold framed, and the energy readout counts up or down instead of jumping. Rendering uses Canvas 2D with requestAnimationFrame, and animations respect prefers-reduced-motion for the UI panels.

Tests

Append ?test=1 to the URL. 21 tests run and the results appear on screen and in the console: energy rules, validity checks, 14 000 random pull moves staying valid, pivot collisions, exact optima for the warm-up levels, the hint search, undo, and the ?seq= link (parsing and the goal search).

Files

• protein-origami.html: the whole game (core logic in <script id="core">, then UI)
• README.md, LICENSE (MIT)

References

• K. A. Dill (1985). Theory for the folding and stability of globular proteins. Biochemistry 24, 1501–1509.
• R. Unger & J. Moult (1993). Genetic algorithms for protein folding simulations. J. Mol. Biol. 231, 75–81.
• N. Lesh, M. Mitzenmacher & S. Whitesides (2003). A complete and effective move set for simplified protein folding. RECOMB '03.

---

프로틴 오리가미 (한국어)

단백질이 접히는 원리를 다룬 작은 브라우저 게임입니다. 격자 위의 장난감 아미노산 사슬을 접어서 에너지를 가장 낮게 만드는 것이 목표입니다. 규칙은 HP 격자 모델을 따릅니다. 주황색 구슬은 물을 싫어하는(소수성, H) 아미노산이고, 파란 고리는 물을 좋아하는(친수성, P) 아미노산입니다.

HTML 파일 하나로 되어 있고 설치나 빌드가 필요 없습니다.

만든 이유

생물정보학을 공부하면서 PyMOL로 단백질 구조를 보다 보니, 아미노산 사슬이 애초에 어떻게 그런 모양이 되는지 궁금해졌습니다. 직접 접어 볼 수 있는 게임이 있으면 재미있게 알아갈 수 있을 것 같아서 만들었습니다. HP 모델은 그 질문을 가장 단순하게 만든 버전입니다. 물을 싫어하는 부분을 안쪽에 숨기면서, 가장 좋은 접힘을 찾는 일이 얼마나 어려운지 직접 느껴 볼 수 있습니다.

플레이 방법

protein-origami.html을 브라우저에서 열면 됩니다(PC, 휴대폰 모두 가능).

• 구슬을 드래그하면 한 칸씩 움직이고 나머지 사슬이 따라옵니다.
• 구슬을 클릭하면 사슬의 짧은 쪽 끝이 그 구슬을 중심으로 90° 돌아갑니다(우클릭 또는 Shift+클릭은 반대 방향).
• 단축키: Z 되돌리기 · R 처음으로 · H 힌트 · L 레벨 · N 다음 레벨 · Esc 닫기

규칙

• 사슬에서 이웃한 구슬은 격자에서도 이웃한 칸에 있어야 하고, 한 칸에는 구슬이 하나만 들어갑니다.
• 사슬에서 바로 이어져 있지 않은 H 구슬 두 개가 격자에서 맞닿으면 접촉 1개 = 에너지 −1입니다. 에너지가 낮을수록 실제 단백질처럼 소수성 부분이 안쪽에 뭉친 형태가 됩니다.
• 1–6단계는 연습 단계입니다. 목표 에너지는 모든 접힘을 다 탐색해서 구한 정확한 최솟값입니다.
• 7–11단계는 단백질 접힘 연구에서 쓰는 표준 벤치마크 사슬입니다(Unger & Moult 1993). 목표는 논문에 보고된 최저 에너지이고, 게임과 같은 움직임만 써서 모두 도달할 수 있음을 확인했습니다. 마지막 두 단계는 손으로 풀기에 꽤 어렵습니다.
• 링크로 원하는 사슬을 열 수 있습니다: protein-origami.html?seq=HPPHHPHPPH&name=이름 (H/P 4–48개). "Imported" 단계로 열리고 진행 기록은 바뀌지 않습니다. 14개 이하는 정확한 최솟값, 그보다 길면 페이지 안에서 짧게 돌린 담금질 탐색이 찾은 값("computer's best")이 목표입니다. Codon Forge가 이 방식으로 단백질을 보냅니다.

테스트

주소 뒤에 ?test=1을 붙이면 21개의 테스트가 실행되고 결과가 화면과 콘솔에 표시됩니다.

라이선스

MIT