bretttolbert / snapgrid

An HTML5 canvas proof-of-concept experiment with grid-snapping.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

=== snapgrid ===

== Saving And Loading ==

You can save and load grid contents using the source textarea. The source 
displayed in the source textarea represents the current contents of the 
grid. You can save the grid by copying the contents of the source textarea
and saving it somewhere. The source textarea can also be used to edit the 
source. Changes are applied when the Enter key is pressed.

Fig. SL.1: Spaceship source

{lineSegments:[
{p1:{x:112,y:272},p2:{x:240,y:272}},
{p1:{x:144,y:240},p2:{x:144,y:272}},
{p1:{x:160,y:272},p2:{x:160,y:224}},
{p1:{x:240,y:144},p2:{x:240,y:224}},
{p1:{x:240,y:272},p2:{x:240,y:256}},
{p1:{x:112,y:272},p2:{x:240,y:144}},
{p1:{x:240,y:224},p2:{x:256,y:224}},
{p1:{x:240,y:256},p2:{x:256,y:256}},
{p1:{x:256,y:224},p2:{x:272,y:240}},
{p1:{x:256,y:256},p2:{x:272,y:240}},
{p1:{x:272,y:240},p2:{x:320,y:240}},
{p1:{x:320,y:240},p2:{x:336,y:224}},
{p1:{x:320,y:240},p2:{x:336,y:256}},
{p1:{x:336,y:256},p2:{x:352,y:256}},
{p1:{x:336,y:224},p2:{x:352,y:224}},
{p1:{x:352,y:272},p2:{x:352,y:144}},
{p1:{x:352,y:272},p2:{x:480,y:272}},
{p1:{x:480,y:272},p2:{x:352,y:144}},
{p1:{x:448,y:272},p2:{x:448,y:240}},
{p1:{x:432,y:272},p2:{x:432,y:224}},
{p1:{x:256,y:224},p2:{x:272,y:192}},
{p1:{x:336,y:224},p2:{x:320,y:192}},
{p1:{x:256,y:256},p2:{x:272,y:288}},
{p1:{x:336,y:256},p2:{x:320,y:288}},
{p1:{x:272,y:288},p2:{x:320,y:288}},
{p1:{x:272,y:192},p2:{x:272,y:80}},
{p1:{x:320,y:192},p2:{x:320,y:80}},
{p1:{x:320,y:80},p2:{x:336,y:96}},
{p1:{x:272,y:80},p2:{x:256,y:96}},
{p1:{x:240,y:96},p2:{x:272,y:48}},
{p1:{x:272,y:48},p2:{x:272,y:80}},
{p1:{x:320,y:80},p2:{x:320,y:48}},
{p1:{x:320,y:48},p2:{x:352,y:96}},
{p1:{x:352,y:96},p2:{x:336,y:96}},
{p1:{x:272,y:48},p2:{x:288,y:16}},
{p1:{x:288,y:16},p2:{x:304,y:16}},
{p1:{x:304,y:16},p2:{x:320,y:48}},
{p1:{x:240,y:96},p2:{x:256,y:96}},
{p1:{x:288,y:48},p2:{x:304,y:48}},
{p1:{x:304,y:48},p2:{x:304,y:96}},
{p1:{x:304,y:96},p2:{x:288,y:96}},
{p1:{x:288,y:96},p2:{x:288,y:48}},
{p1:{x:288,y:96},p2:{x:272,y:192}},
{p1:{x:304,y:96},p2:{x:320,y:192}},
{p1:{x:272,y:240},p2:{x:288,y:176}},
{p1:{x:304,y:176},p2:{x:320,y:240}},
{p1:{x:288,y:176},p2:{x:304,y:176}},
{p1:{x:288,y:176},p2:{x:288,y:96}},
{p1:{x:288,y:96},p2:{x:304,y:96}},
{p1:{x:304,y:96},p2:{x:304,y:176}},
{p1:{x:272,y:240},p2:{x:288,y:272}},
{p1:{x:288,y:272},p2:{x:304,y:272}},
{p1:{x:304,y:272},p2:{x:320,y:240}},
{p1:{x:272,y:288},p2:{x:288,y:272}},
{p1:{x:304,y:272},p2:{x:320,y:288}},
{p1:{x:240,y:144},p2:{x:272,y:144}},
{p1:{x:272,y:144},p2:{x:272,y:160}},
{p1:{x:272,y:160},p2:{x:240,y:160}},
{p1:{x:320,y:144},p2:{x:352,y:144}},
{p1:{x:352,y:160},p2:{x:320,y:160}},
{p1:{x:240,y:304},p2:{x:352,y:304}},
{p1:{x:352,y:304},p2:{x:352,y:272}},
{p1:{x:240,y:304},p2:{x:240,y:272}},
{p1:{x:240,y:304},p2:{x:112,y:304}},
{p1:{x:112,y:304},p2:{x:112,y:272}},
{p1:{x:352,y:304},p2:{x:480,y:304}},
{p1:{x:480,y:304},p2:{x:480,y:272}},
{p1:{x:480,y:304},p2:{x:304,y:336}},
{p1:{x:304,y:336},p2:{x:288,y:336}},
{p1:{x:288,y:336},p2:{x:112,y:304}},
{p1:{x:240,y:304},p2:{x:288,y:336}},
{p1:{x:304,y:336},p2:{x:352,y:304}},
{p1:{x:240,y:304},p2:{x:272,y:288}},
{p1:{x:272,y:288},p2:{x:320,y:288}},
{p1:{x:320,y:288},p2:{x:352,y:304}},
{p1:{x:240,y:224},p2:{x:240,y:256}},
{p1:{x:352,y:256},p2:{x:352,y:224}},
{p1:{x:240,y:224},p2:{x:160,y:272}},
{p1:{x:352,y:224},p2:{x:432,y:272}},
{p1:{x:336,y:256},p2:{x:336,y:224}},
{p1:{x:336,y:224},p2:{x:336,y:224}},
{p1:{x:256,y:256},p2:{x:256,y:224}}
]}

About

An HTML5 canvas proof-of-concept experiment with grid-snapping.


Languages

Language:JavaScript 100.0%