You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>License is <ahref="https://creativecommons.org/licenses/by-nc-sa/3.0/">CreativeCommons Attribution NonCommercial ShareAlike</a>.</p>
74
74
<p>The original sketch has been ported from p5js to p5nim.</p>
75
-
<scriptdefer>/* Generated by the Nim Compiler v1.6.0 */
75
+
<olstart="8">
76
+
<li><ahref="./instances.html">Instances</a>: This program creates a canvas in a local p5 instance using "instance mode", which allows to place a P5 instance into a specific <code><div></code> if desired. Otherwise this is the same example as <code>get_started</code>.</li>
77
+
</ol>
78
+
<scriptdefer>/* Generated by the Nim Compiler v1.7.3 */
{"data":[{"filename":"./get_started.html","title":"Get started","description":"This program creates a canvas that is 400 pixels wide and 400 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black.\n","numbering":1},{"filename":"./flashing_canvas.html","title":"Flashing canvas","description":"A canvas that flashes random colors (shows how to change frameRate)","numbering":2},{"filename":"./easing.html","title":"Easing","description":"Move the mouse across the screen and the symbol will follow.\n","numbering":3},{"filename":"./keyboard.html","title":"Keyboard","description":"Click on the image to give it focus and press the letter keys to create forms in time and space. Each key has a unique identifying number. These numbers can be used to position shapes in space.\n","numbering":4},{"filename":"./polygons.html","title":"Polygons","description":"What is your favorite? Pentagon? Hexagon? Heptagon? No? What about the icosagon? The polygon() function created for this example is capable of drawing any regular polygon. Also shows [possible inputs for colors](https://p5js.org/reference/#/p5/fill).\n","numbering":5},{"filename":"./okazz_220919a.html","title":"Okazz 220919a","description":"Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&o=31),\noriginal at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1653811).\n\nLicense is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).\n\nThe original sketch has been ported from p5js to p5nim.\n","numbering":6},{"filename":"./okazz_221026a.html","title":"Okazz 221026a","description":"Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&o=31),\noriginal at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1711659).\n\nLicense is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).\n\nThe original sketch has been ported from p5js to p5nim.\n","numbering":7}]}
1
+
{"data":[{"filename":"./get_started.html","title":"Get started","description":"This program creates a canvas that is 400 pixels wide and 400 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black.\n","numbering":1},{"filename":"./flashing_canvas.html","title":"Flashing canvas","description":"A canvas that flashes random colors (shows how to change frameRate)","numbering":2},{"filename":"./easing.html","title":"Easing","description":"Move the mouse across the screen and the symbol will follow.\n","numbering":3},{"filename":"./keyboard.html","title":"Keyboard","description":"Click on the image to give it focus and press the letter keys to create forms in time and space. Each key has a unique identifying number. These numbers can be used to position shapes in space.\n","numbering":4},{"filename":"./polygons.html","title":"Polygons","description":"What is your favorite? Pentagon? Hexagon? Heptagon? No? What about the icosagon? The polygon() function created for this example is capable of drawing any regular polygon. Also shows [possible inputs for colors](https://p5js.org/reference/#/p5/fill).\n","numbering":5},{"filename":"./okazz_220919a.html","title":"Okazz 220919a","description":"Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&o=31),\noriginal at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1653811).\n\nLicense is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).\n\nThe original sketch has been ported from p5js to p5nim.\n","numbering":6},{"filename":"./okazz_221026a.html","title":"Okazz 221026a","description":"Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&o=31),\noriginal at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1711659).\n\nLicense is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).\n\nThe original sketch has been ported from p5js to p5nim.\n","numbering":7},{"filename":"./instances.html","title":"Instances","description":"This program creates a canvas in a local p5 instance using \"instance mode\", which allows to place a P5 instance into a specific `<div>` if desired. Otherwise this is the same example as `get_started`.\n","numbering":8}]}
<p>This program creates a canvas in a local p5 instance using "instance mode", which allows to place a P5 instance into a specific <code><div></code> if desired. Otherwise this is the same example as <code>get_started</code>.</p>
This program creates a canvas in a local p5 instance using "instance mode", which allows to place a P5 instance into a specific `<div>` if desired. Otherwise this is the same example as `get_started`.
140
+
"""</span>)
141
+
nbJsFromCode:
142
+
<spanclass="hljs-keyword">import</span> jsffi, p5
143
+
<spanclass="hljs-comment"># to test that a local proc is not converted</span>
instance: <spanclass="hljs-comment"># call with `instance("<name of my div>")` to place into specific div</span>
147
+
<spanclass="hljs-keyword">let</span> x = <spanclass="hljs-number">5</span>
148
+
<spanclass="hljs-keyword">let</span> y = <spanclass="hljs-number">10</span>
149
+
setup: <spanclass="hljs-comment"># `setup` and `draw` are templates shadowing the global templates</span>
150
+
<spanclass="hljs-keyword">let</span> bar = foo() <spanclass="hljs-comment">## this won't be replaced, as there's no `foo` in p5 that we wrapped</span>
151
+
createCanvas(bar, <spanclass="hljs-number">400</span>) <spanclass="hljs-comment"># each call will be checked against calls wrapped in the p5nim wrapper.</span>
152
+
<spanclass="hljs-comment"># If a name matches, it will be replaced by `p5Inst.<the call>` instead.</span>
153
+
background(<spanclass="hljs-number">200</span>)
154
+
155
+
draw:
156
+
<spanclass="hljs-comment"># similar to calls, idents are also compared with known fields of the</span>
157
+
<spanclass="hljs-comment"># `P5Instance` type and replaced by `p5Inst.<field>` in case of a match</span>
0 commit comments