git @ Cat's Eye Technologies Erratic-Turtle-Graphics / master
Put the canvas in a scrollable viewport so it looks nicer on mobile. Chris Pressey 9 months ago
2 changed file(s) with 17 addition(s) and 7 deletion(s). Raw diff Collapse all Expand all
00 /*
1 * dam-plus-widgets-web.js, erratic-turtle.js, and erratic-logo.js should be loaded before this.
1 * dam-plus-widgets-0.2.js, erratic-turtle.js, and erratic-logo.js should be loaded before this.
22 * After this is loaded, call launch() to start the gewgaw.
33 */
44
66 var div=DAM.maker('div'), button=DAM.maker('button'), textarea=DAM.maker('textarea'), canvas=DAM.maker('canvas');
77
88 var can = canvas({ width: 1000, height: 400 });
9 config.container.appendChild(can);
9 var viewport = div({ id: "canvas_viewport" });
10 viewport.appendChild(can);
11 config.container.appendChild(viewport);
1012
1113 var turtle = (new ErraticTurtle()).init({ canvas: can });
1214 var options = [
15 {
16 text: 'Stars',
17 value: "setxyp 0.125 0.666 lt 18 repeat 7 [ repeat 500 [ fd 150 lt 144 ] shiftxyp 0.125 0.0 shifterr 0.00375 0.3 ]"
18 },
1319 {
1420 text: 'Lines',
1521 value: "setxyp 0.125 0.666 repeat 7 [ repeat 50 [ fd 150 lt 180 ] shiftxyp 0.125 0.0 shifterr 0.00375 0.3 ]"
2127 {
2228 text: 'Circles',
2329 value: "setxyp 0.125 0.5 repeat 7 [ repeat 4500 [ fd 1.0 lt 4 ] shiftxyp 0.125 0.0 shifterr 0.00375 0.05 ]"
24 },
25 {
26 text: 'Stars',
27 value: "setxyp 0.125 0.666 lt 18 repeat 7 [ repeat 500 [ fd 150 lt 144 ] shiftxyp 0.125 0.0 shifterr 0.00375 0.3 ]"
2830 },
2931 {
3032 text: 'Chain',
33 <title>Erratic Turtle Graphics</title>
44 <meta name="viewport" content="width=device-width, initial-scale=1.0">
55 <style>
6 canvas { border: 1px solid blue; }
6 #canvas_viewport {
7 width: 100%;
8 height: 405px;
9 overflow: scroll;
10 border: 1px solid blue;
11 }
12 textarea {
13 width: 100%
14 }
715 </style>
816 </head>
917 <body>