├── .nojekyll
├── nimib.toml
├── docs
    ├── assets
    │   └── doorbell.mp3
    ├── head_other.mustache
    ├── index.json
    ├── flashing_canvas.html
    ├── get_started.html
    ├── easing.html
    ├── doorbell.html
    ├── index.html
    ├── polygons.html
    ├── keyboard.html
    ├── sinewave.html
    ├── okazz_220919a.html
    └── okazz_221026a.html
├── src
    ├── p5.nim
    └── p5
    │   ├── p5sound.nim
    │   ├── p5nimib.nim
    │   ├── p5types.nim
    │   ├── p5sugar.nim
    │   └── p5instance_logic.nim
├── docsrc
    ├── flashing_canvas.nim
    ├── get_started.nim
    ├── easing.nim
    ├── doorbell.nim
    ├── sinewave.nim
    ├── keyboard.nim
    ├── polygons.nim
    ├── index.nim
    ├── instances.nim
    ├── okazz_220919a.nim
    └── okazz_221026a.nim
├── p5.nimble
├── LICENSE.md
└── README.MD


/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/nimib.toml:
--------------------------------------------------------------------------------
1 | [nimib]
2 | srcDir = "docsrc"
3 | homeDir = "docs"


--------------------------------------------------------------------------------
/docs/assets/doorbell.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pietroppeter/p5nim/master/docs/assets/doorbell.mp3


--------------------------------------------------------------------------------
/docs/head_other.mustache:
--------------------------------------------------------------------------------
1 | <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script>


--------------------------------------------------------------------------------
/src/p5.nim:
--------------------------------------------------------------------------------
 1 | when defined(js):
 2 |     import p5 / [p5js, p5sugar, p5instance_logic, p5types]
 3 |     export p5js, p5sugar, p5instance_logic, p5types
 4 | 
 5 |     import std / lenientops
 6 |     export lenientops
 7 |     converter toFloat*(n: int): float = float(n)
 8 | else:
 9 |     import p5 / p5nimib
10 |     export p5nimib
11 | 


--------------------------------------------------------------------------------
/src/p5/p5sound.nim:
--------------------------------------------------------------------------------
 1 | # see https://github.com/processing/p5.js-sound/blob/main/src/soundfile.js
 2 | # and https://p5js.org/reference/#/p5.SoundFile
 3 | type SoundFile* = ref object
 4 | 
 5 | {. push importc .}
 6 | 
 7 | proc loadSound*(path: cstring): SoundFile
 8 | 
 9 | {. pop .}
10 | 
11 | {. push importcpp .}
12 | 
13 | proc play*(soundFile: SoundFile)
14 | proc stop*(soundFile: SoundFile)
15 | proc isPlaying*(soundFile: SoundFile): bool
16 | 
17 | {. pop .}


--------------------------------------------------------------------------------
/docsrc/flashing_canvas.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(2, "Flashing canvas", "A canvas that flashes random colors (shows how to change frameRate)")
 5 | nbCodeDisplay(nbJsFromCode):
 6 |   setup:
 7 |     createCanvas(500, 500)
 8 |     frameRate(1) # 1 frame every second (default is 60 frames per second)
 9 |     
10 |   draw:
11 |     background(random()*255, random()*255, random()*255)
12 | 
13 | nbJsShowSource()
14 | nbSave


--------------------------------------------------------------------------------
/docsrc/get_started.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(1, "Get started", """
 5 | 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.
 6 | """)
 7 | nbCodeDisplay(nbJsFromCode):
 8 |   setup:
 9 |     createCanvas(400, 400)
10 |     background(200)
11 |     
12 |   draw:
13 |     if mouseIsPressed:
14 |       fill(0)
15 |     else:
16 |       fill(255)
17 |     ellipse(mouseX, mouseY, 40, 40)
18 | nbSave


--------------------------------------------------------------------------------
/docsrc/easing.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(3, "Easing", """
 5 | Move the mouse across the screen and the symbol will follow.
 6 | """)
 7 | nbCodeDisplay(nbJsFromCode):
 8 |   var x = 1.0
 9 |   var y = 1.0
10 |   var easing = 0.05
11 | 
12 |   setup:
13 |     createCanvas(400, 400)
14 |     noStroke()
15 |     
16 |   draw:
17 |     background(237, 34, 93)
18 |     let targetX = mouseX
19 |     let dx = targetX - x
20 |     x += dx * easing
21 | 
22 |     let targetY = mouseY
23 |     let dy = targetY - y
24 |     y += dy * easing
25 | 
26 |     ellipse(x, y, 66, 66)
27 | 
28 | nbJsShowSource()
29 | nbSave


--------------------------------------------------------------------------------
/src/p5/p5nimib.nim:
--------------------------------------------------------------------------------
 1 | template nbUseP5* =
 2 |   nb.partials["head"] &= """<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>"""
 3 |   nbJsFromCodeGlobal:
 4 |     import p5
 5 | 
 6 | template nbP5Instance*(body: untyped) =
 7 |   let p5instanceId = "p5instance-" & $nb.newId()
 8 |   nbRawHtml: "<div id=\"" & p5instanceId & "\"></div>"
 9 |   nbJsFromCode(p5instanceId):
10 |     instance(p5instanceId):
11 |       body
12 | 
13 | template nbUseP5Sound* =
14 |   nb.partials["head"] &= """<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>"""
15 |   nbJsFromCodeGlobal:
16 |     import p5 / p5sound
17 | 


--------------------------------------------------------------------------------
/p5.nimble:
--------------------------------------------------------------------------------
 1 | # Package
 2 | 
 3 | version       = "0.1.0"
 4 | author        = "Jacob Romano, Pietro Peterlongo"
 5 | description   = "Nim bindings for p5.js"
 6 | license       = "MIT"
 7 | 
 8 | srcDir        = "src"
 9 | 
10 | # Dependencies
11 | 
12 | requires "nim >= 1.6.0"
13 | 
14 | template build(name: string) = exec "nim r docsrc/" & name
15 | 
16 | task index, "rebuild the index":
17 |   build "index"
18 | 
19 | task examples, "rebuild all examples":
20 |   build "get_started"
21 |   build "flashing_canvas"
22 |   build "easing"
23 |   build "keyboard"
24 |   build "polygons"
25 |   build "okazz_220919a"
26 |   build "okazz_221026a"
27 |   build "sinewave"
28 |   build "instances"
29 |   build "doorbell"


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2018 Jacob Romano
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/docsrc/doorbell.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nbUseP5Sound
 5 | 
 6 | nb.addEntry(10, "Doorbell", """
 7 | How to load and play a sound (using [p5sound](https://p5js.org/reference/#/libraries/p5.sound)).
 8 | Adapted from [p5.SoundFile](https://p5js.org/reference/#/p5.SoundFile) reference.
 9 | """)
10 | nbText: """
11 | This uses the additional [p5sound](https://p5js.org/reference/#/libraries/p5.sound) library.
12 | You will need to call `nbUseP5Sound` to use it in nimib.
13 | Loading the sound file does not work when opening the html locally in a browser,
14 | you will need to run a static server (e.g. [nimhttpd](https://github.com/h3rald/nimhttpd)).
15 | """
16 | 
17 | nbCodeDisplay(nbJsFromCode):
18 |   const nimColor = "#ffc200"
19 |   var doorbell: SoundFile
20 | 
21 |   preload:
22 |     doorbell = loadSound("assets/doorbell.mp3")
23 | 
24 |   setup:
25 |     createCanvas(200, 100)
26 |     background(nimColor)
27 |     text("click to play the doorbell 🛎️", 10, 20)
28 | 
29 |   mousePressed:
30 |     play(doorbell)
31 | 
32 | nbSave


--------------------------------------------------------------------------------
/docsrc/sinewave.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(8, "Sine Wave", """
 5 | Render a simple sine wave. Original by Daniel Shiffman <https://p5js.org/examples/math-sine-wave.html>
 6 | """)
 7 | nbCodeDisplay(nbJsFromCode):
 8 |   const xspacing = 16 # Distance between each horizontal location
 9 |   const amplitude = 75.0 # Height of wave
10 |   const period = 500.0 # How many pixels before the wave repeats
11 | 
12 |   var theta: float #  Start angle at 0
13 |   var yvalues: seq[float]
14 | 
15 |   proc calcWave =
16 |     theta+=0.02
17 |     let dx = (TWO_PI / period) * xspacing
18 |     for x in 0..yvalues.len:
19 |       yvalues[x] = sin(x*dx+theta)*amplitude
20 | 
21 |   proc renderWave =
22 |     noStroke()
23 |     colorMode(HSB, 100)
24 |     fill(0)
25 |     for x in 0..yvalues.len:
26 |       fill(25+x*2, 100, 50)
27 |       ellipse(x*xspacing, height/2+yvalues[x], 16, 16)
28 | 
29 |   setup:
30 |     theta = 0.0
31 |     createCanvas(710, 400)
32 |     let nelements = (width+16)/xspacing
33 |     yvalues = newSeq[float](nelements.int)
34 | 
35 |   draw:
36 |     background(0)
37 |     calcWave()
38 |     renderWave()
39 | 
40 | nbJsShowSource()
41 | nbSave
42 | 


--------------------------------------------------------------------------------
/docsrc/keyboard.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(4, "Keyboard", """
 5 | 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.
 6 | """)
 7 | nbCodeDisplay(nbJsFromCode):
 8 |   var rectWidth: float
 9 |   
10 |   setup:
11 |     createCanvas(720, 400)
12 |     noStroke()
13 |     background(230)
14 |     rectWidth = width / 4
15 |   
16 |   draw:
17 |     ## keep draw() here to continue looping while waiting for keys
18 |     discard
19 |   
20 |   keyPressed:
21 |     var keyIndex = -1
22 |     if $key >= "a" and $key <= "z":
23 |       keyIndex = ord(key[0]) - ord('a')
24 |     if keyIndex == -1:
25 |       ## If it's not a letter key, clear the screen
26 |       background(230)
27 |     else:
28 |       ## It's a letter key, fill a rectangle
29 |       let
30 |         randFill_r = floor(random() * 255 + 1)
31 |         randFill_g = floor(random() * 255 + 1)
32 |         randFill_b = floor(random() * 255 + 1)
33 |       fill(randFill_r, randFill_g, randFill_b)
34 |       let x = map(keyIndex, 0, 25, 0, width - rectWidth)
35 |       rect(x, 0, rectWidth, height)
36 | 
37 | nbJsShowSource()
38 | nbSave


--------------------------------------------------------------------------------
/docsrc/polygons.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(5, "Polygons", """
 5 | 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).
 6 | """)
 7 | nbCodeDisplay(nbJsFromCode):
 8 |   proc polygon(x, y, radius, npoints: PNumber) =
 9 |     let angle = TWO_PI / npoints
10 |     beginShape()
11 |     var a = 0.0
12 |     while a < TWO_PI:
13 |       let sx = x + cos(a) * radius
14 |       let sy = y + sin(a) * radius
15 |       a += angle
16 |       vertex(sx, sy)
17 |     endShape(CLOSE)
18 | 
19 |   setup:
20 |     createCanvas(720, 400)
21 | 
22 |   draw:
23 |     background(102) ## grayscale
24 | 
25 |     push()
26 |     fill(255, 204, 0) ## RGB integer values
27 |     translate(width * 0.2, height * 0.5)
28 |     rotate(frameCount / 200.0)
29 |     polygon(0, 0, 82, 3)
30 |     pop()
31 | 
32 |     push()
33 |     fill("red") ## Named SVG/CSS color string
34 |     translate(width * 0.5, height * 0.5)
35 |     rotate(frameCount / 50.0)
36 |     polygon(0, 0, 80, 20)
37 |     pop()
38 | 
39 |     push()
40 |     fill("#fae") ## three-digit (or six-digit) hexadecimal RGB notation
41 |     translate(width * 0.8, height * 0.5)
42 |     rotate(frameCount / -100.0)
43 |     polygon(0, 0, 70, 7)
44 |     pop()
45 | 
46 | nbJsShowSource()
47 | nbSave


--------------------------------------------------------------------------------
/docsrc/index.nim:
--------------------------------------------------------------------------------
 1 | import std / [os, algorithm, sugar, strformat, strutils, tables]
 2 | import nimib except toJson  # we need to remove this from nimib exports! it breaks jsony!
 3 | import jsony
 4 | 
 5 | type
 6 |   Entry* = object
 7 |     filename: string
 8 |     title: string
 9 |     description: string
10 |     numbering: int
11 |   Index* = object
12 |     data: seq[Entry]
13 | 
14 | proc sort*(idx: var Index) =
15 |   idx.data.sort do (e, f: Entry) -> int:
16 |     cmp(e.numbering, f.numbering)
17 | 
18 | proc dump*(idx: Index) =
19 |   var idx = idx
20 |   sort(idx)
21 |   writeFile("index.json", jsony.toJson(idx))
22 | 
23 | proc loadIndex*: Index =
24 |   if fileExists("index.json"):
25 |     result = "index.json".readFile.fromJson(Index)
26 |   else:
27 |     result = Index()
28 |   sort result
29 | 
30 | # requires nb: NbDoc
31 | proc addEntry*(nb: var NbDoc, numb: int, titl, desc: string) =
32 |   let e = Entry(numbering: numb, title: titl, description: desc, filename: nb.filename)
33 |   var idx = loadIndex()
34 |   var found = false
35 |   for f in idx.data.mitems:
36 |     if f.filename == e.filename:
37 |       f = e
38 |       found = true
39 |   if not found:
40 |     idx.data.add e
41 |   dump idx
42 |   let text = "## " &  $(e.numbering) & ". " & e.title & "\n" & e.description
43 |   nbText: text
44 | 
45 | when isMainModule:
46 |   nbInit
47 |   nbText: "## nimp5 documentation"
48 |   let idx = loadIndex()
49 |   var
50 |     listEntries = ""
51 |   for entry in idx.data:
52 |     listEntries.add fmt"{entry.numbering}. [{entry.title}]({entry.filename}): {entry.description}" & "\n"
53 |   nbText: listEntries
54 |   nbSave


--------------------------------------------------------------------------------
/src/p5/p5types.nim:
--------------------------------------------------------------------------------
 1 | type
 2 |   Color* = ref object
 3 | 
 4 |   Touche* = ref object
 5 |     x {.importc.}: float
 6 |     y {.importc.}: float
 7 |     id {.importc.}: int
 8 |   File* = ref object
 9 | 
10 |   Image* = ref object
11 |     width* {.importc.}: float
12 |     height* {.importc.}: float
13 |     pixels* {.importc.}: seq[float]
14 | 
15 |   Vector* = ref object
16 |     x* {.importc.}: float
17 |     y* {.importc.}: float
18 |     z* {.importc.}: float
19 | 
20 |   Graphics* = ref object
21 |     pixels*{.importc.}: seq[float]
22 |     width*{.importc.}: float
23 |     height*{.importc.}: float
24 |     mouseX* {.importc.}: float
25 |     mouseY* {.importc.}: float
26 |     pmouseX* {.importc.}: float
27 |     pmouseY* {.importc.}: float
28 |     winMouseX* {.importc.}: float
29 |     winMouseY* {.importc.}: float
30 |     pwinMouseX* {.importc.}: float
31 |     pwinMouseY* {.importc.}: float
32 |     mouseButton* {.importc.}: cstring
33 |     mouseIsPressed* {.importc.}: bool
34 | 
35 |   Font* = ref object
36 | 
37 |   Geometry* = ref object
38 | 
39 |   Shader* = ref object
40 | 
41 |   XML* = ref object
42 | 
43 |   PrintWriter* = ref object
44 | 
45 |   Table* = ref object
46 | 
47 |   Blob* = ref object
48 | 
49 |   P5Instance* = ref object
50 |     mouseX*: float
51 |     mouseY*: float
52 |     pmouseX*: float
53 |     pmouseY*: float
54 |     winMouseX*: float
55 |     winMouseY*: float
56 |     pwinMouseX*: float
57 |     pwinMouseY*: float
58 |     mouseButton*: cstring
59 |     mouseIsPressed*: bool
60 |     keyIsPressed*: bool
61 |     key*: cstring
62 |     keyCode*: int
63 |     setup*: Closure
64 |     draw*: Closure
65 |     preload*: Closure
66 | 
67 |   InstanceClosure* = proc(s: P5Instance) {.closure.}
68 |   Closure* = proc() {.closure.}
69 | 


--------------------------------------------------------------------------------
/src/p5/p5sugar.nim:
--------------------------------------------------------------------------------
 1 | template setup*(body: untyped) {.dirty.} =
 2 |   proc setup {.exportc.} =
 3 |     body
 4 | 
 5 | template draw*(body: untyped) {.dirty.} =
 6 |   proc draw {.exportc.} =
 7 |     body
 8 | 
 9 | template keyPressed*(body: untyped) {.dirty.} =
10 |   proc keyPressed {.exportc.} =
11 |     body
12 | 
13 | template preload*(body: untyped) {.dirty.} =
14 |   proc preload {.exportc.} =
15 |     body
16 | 
17 | template remove*(body: untyped) {.dirty.} =
18 |   proc remove {.exportc.} =
19 |     body
20 | 
21 | template preload*(body: untyped) {.dirty.} =
22 |   proc preload {.exportc.} =
23 |     body
24 | 
25 | template mouseMoved*(body: untyped) {.dirty.} =
26 |   proc mouseMoved {.exportc.} =
27 |     body
28 | 
29 | template mouseDragged*(body: untyped) {.dirty.} =
30 |   proc mouseDragged {.exportc.} =
31 |     body
32 | 
33 | template mousePressed*(body: untyped) {.dirty.} =
34 |   proc mousePressed {.exportc.} =
35 |     body
36 | 
37 | template mouseReleased*(body: untyped) {.dirty.} =
38 |   proc mouseReleased {.exportc.} =
39 |     body
40 | 
41 | template mouseClicked*(body: untyped) {.dirty.} =
42 |   proc mouseClicked {.exportc.} =
43 |     body
44 | 
45 | template doubleClicked*(body: untyped) {.dirty.} =
46 |   proc doubleClicked {.exportc.} =
47 |     body
48 | 
49 | template mouseWheel*(body: untyped) {.dirty.} =
50 |   proc mouseWheel {.exportc.} =
51 |     body
52 | 
53 | template keyPressed*(body: untyped) {.dirty.} =
54 |   proc keyPressed {.exportc.} =
55 |     body
56 | 
57 | template keyReleased*(body: untyped) {.dirty.} =
58 |   proc keyReleased {.exportc.} =
59 |     body
60 | 
61 | template keyTyped*(body: untyped) {.dirty.} =
62 |   proc keyTyped {.exportc.} =
63 |     body
64 | 
65 | template touchStarted*(body: untyped) {.dirty.} =
66 |   proc touchStarted {.exportc.} =
67 |     body
68 | 
69 | template touchMoved*(body: untyped) {.dirty.} =
70 |   proc touchMoved {.exportc.} =
71 |     body
72 | 
73 | template touchEnded*(body: untyped) {.dirty.} =
74 |   proc touchEnded {.exportc.} =
75 |     body
76 | 
77 | template deviceMoved*(body: untyped) {.dirty.} =
78 |   proc deviceMoved {.exportc.} =
79 |     body
80 | 
81 | template deviceTurned*(body: untyped) {.dirty.} =
82 |   proc deviceTurned {.exportc.} =
83 |     body
84 | 
85 | template deviceShaken*(body: untyped) {.dirty.} =
86 |   proc deviceShaken {.exportc.} =
87 |     body
88 | 


--------------------------------------------------------------------------------
/docs/index.json:
--------------------------------------------------------------------------------
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","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","numbering":7},{"filename":"./sinewave.html","title":"Sine Wave","description":"Render a simple sine wave. Original by Daniel Shiffman <https://p5js.org/examples/math-sine-wave.html>\n","numbering":8},{"filename":"./instances.html","title":"Instance mode","description":"This program creates a canvas in a local p5 instance using\n[instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).\n","numbering":9},{"filename":"./doorbell.html","title":"Doorbell","description":"How to load and play a sound (using [p5sound](https://p5js.org/reference/#/libraries/p5.sound)).\nAdapted from [p5.SoundFile](https://p5js.org/reference/#/p5.SoundFile) reference.\n","numbering":10}]}


--------------------------------------------------------------------------------
/docsrc/instances.nim:
--------------------------------------------------------------------------------
 1 | import nimib, index, p5
 2 | nbInit
 3 | nbUseP5
 4 | nb.addEntry(9, "Instance mode", """
 5 | This program creates a canvas in a local p5 instance using
 6 | [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).
 7 | """)
 8 | nbText: """
 9 | Instance mode allows to place a p5 instance into a specific `<div>`
10 | and to have multiple p5 canvas in the same document.
11 | 
12 | Thanks to nim metaprogramming capabilities, we do not need
13 | to have a different api for instance mode, we can have the same api
14 | we use for global mode, we only need to wrap it in a `instance` call.
15 | This macro will make sure that all the required functions
16 | will have an additional `sketch` argument added.
17 | 
18 | In this example we show two copies of `get_started` example.
19 | The syntax here is explicitly contrived to make sure the `instance`
20 | is able to check all possible syntax variations allowed by nim.
21 | """
22 | nbRawHtml: "<div id=\"canvas1\"></div>"
23 | nbCodeDisplay(nbJsFromCode):
24 |   # to test that a local proc is not converted
25 |   proc foo(): int = 400
26 | 
27 |   instance("canvas1"): # call with `instance("<name of my div>")` to place into specific div
28 |     let x = 5
29 |     let y = 10
30 |     setup: # `setup` and `draw` are templates shadowing the global templates
31 |       let bar = foo() # this won't be replaced, as there's no `foo` in p5 that we wrapped
32 |       createCanvas(bar, 400) # each call will be checked against calls wrapped in the p5nim wrapper.
33 |                              # If a name matches, it will be replaced by `p5Inst.<the call>` instead.
34 |       background(200)
35 | 
36 |     draw:
37 |       # similar to calls, idents are also compared with known fields of the
38 |       # `P5Instance` type and replaced by `p5Inst.<field>` in case of a match
39 |       if mouseIsPressed:
40 |         fill(0)
41 |       else:
42 |         let fillBy = 255 # store in variable to test rewriting of real `nnkDotExpr`
43 |         fillBy.fill # not no `()`
44 |       mouseX.ellipse(mouseY, 40, 40) # even if used in dot expression, rewrite works
45 |                                      # (this is a `nnkCall` with `nnkDotExpr` first child)
46 | nbText: "In this second instance we make use of `nbP5Instance` nimib convenience template:"
47 | nbCodeDisplay(nbP5Instance):
48 |   let x = 5
49 |   let y = 10
50 |   setup: # `setup` and `draw` are templates shadowing the global templates
51 |     let bar = foo() # this won't be replaced, as there's no `foo` in p5 that we wrapped
52 |     createCanvas(bar, 400) # each call will be checked against calls wrapped in the p5nim wrapper.
53 |                             # If a name matches, it will be replaced by `p5Inst.<the call>` instead.
54 |     background(200)
55 | 
56 |   draw:
57 |     # similar to calls, idents are also compared with known fields of the
58 |     # `P5Instance` type and replaced by `p5Inst.<field>` in case of a match
59 |     if mouseIsPressed:
60 |       fill(0)
61 |     else:
62 |       let fillBy = 255 # store in variable to test rewriting of real `nnkDotExpr`
63 |       fillBy.fill # not no `()`
64 |     mouseX.ellipse(mouseY, 40, 40) # even if used in dot expression, rewrite works
65 |                                     # (this is a `nnkCall` with `nnkDotExpr` first child)
66 | nbSave
67 | 


--------------------------------------------------------------------------------
/docsrc/okazz_220919a.nim:
--------------------------------------------------------------------------------
  1 | import nimib, index, p5
  2 | nbInit
  3 | nbUseP5
  4 | nb.addEntry(6, "Okazz 220919a", """
  5 | Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&o=31),
  6 | original at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1653811).
  7 | """)
  8 | nbText: """
  9 | License is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).
 10 | 
 11 | The original sketch has been ported from p5js to p5nim.
 12 | """
 13 | # maybe this will be used to train an automatic translator
 14 | let sourceOriginalJs = """
 15 | let forms = [];
 16 | let colors = ['#f70640', '#f78e2c', '#fdd903', '#cae509', '#63be93', '#81cfe5', '#299dbf', '#38187d', '#a4459f', '#f654a9', '#2F0A30'];
 17 | 
 18 | function setup() {
 19 | 	createCanvas(900, 900);
 20 | 
 21 | 	let c = 18;
 22 | 	let w = width / c;
 23 | 	for (let i = 0; i < c; i++) {
 24 | 		for (let j = 0; j < c; j++) {
 25 | 			let x = i * w + w / 2;
 26 | 			let y = j * w + w / 2;
 27 | 			if ((i + j) % 2 == 0) {
 28 | 				for (let k = 0; k < 5; k++) {
 29 | 					forms.push(new Form(x, y));
 30 | 				}
 31 | 			}
 32 | 		}
 33 | 	}
 34 | 	background(0);
 35 | 
 36 | }
 37 | 
 38 | function draw() {
 39 | 
 40 | 	translate(width / 2, height / 2);
 41 | 	scale(1.1);
 42 | 	translate(-width / 2, -height / 2);
 43 | 	background(255);
 44 | 	for (let i of forms) {
 45 | 		i.show();
 46 | 		i.move();
 47 | 	}
 48 | }
 49 | 
 50 | class Form {
 51 | 	constructor(x, y) {
 52 | 		this.x = x;
 53 | 		this.y = y;
 54 | 		this.x0 = x;
 55 | 		this.y0 = y;
 56 | 		this.r0 = random(10, 25);
 57 | 		this.r = this.r0;
 58 | 		this.d0 = random(15) * random() + 5;
 59 | 		this.d = this.d0;
 60 | 		this.n = int(random(3, 13));
 61 | 		this.a = random(100);
 62 | 		this.t = random(10000);
 63 | 		this.r1 = random(0.01);
 64 | 		this.r2 = random(0.01);
 65 | 		this.r3 = random(0.01);
 66 | 		this.col = color(random(colors));
 67 | 	}
 68 | 
 69 | 	show() {
 70 | 		noStroke();
 71 | 		fill(this.col);
 72 | 		push();
 73 | 		translate(this.x, this.y);
 74 | 		rotate(this.a);
 75 | 		for (let i = 0; i < this.n; i++) {
 76 | 			let theta = map(i, 0, this.n, 0, TAU);
 77 | 			ellipse(this.r * cos(theta), this.r * sin(theta), this.d, this.d);
 78 | 		}
 79 | 		pop();
 80 | 	}
 81 | 
 82 | 	move() {
 83 | 		this.t++;
 84 | 		this.a = TAU * sin(this.t * this.r1);
 85 | 		this.r = this.r0 * sin(this.t * this.r2);
 86 | 		this.d = this.d0 * sin(this.t * this.r3);
 87 | 		this.x += 0.5;
 88 | 		this.y -= 0.5;
 89 | 		if (this.x > width) {
 90 | 			this.x = 0;
 91 | 		}
 92 | 		if (this.y < 0) {
 93 | 			this.y = height;
 94 | 		}
 95 | 	}
 96 | }
 97 | """
 98 | 
 99 | nbCodeDisplay(nbJsFromCode):
100 |   var colors = @["#f70640", "#f78e2c", "#fdd903", "#cae509", "#63be93", "#81cfe5", "#299dbf", "#38187d", "#a4459f", "#f654a9", "#2F0A30"];
101 | 
102 |   type
103 |     Form = ref object
104 |       x, y, x0, y0, r0, r, d0, d: float
105 |       a, t, r1, r2, r3: float 
106 |       n: int
107 |       col: string
108 | 
109 |   var forms: seq[Form]
110 | 
111 |   proc newForm(x, y: float): Form =
112 |     result = new Form
113 |     result.x = x
114 |     result.y = y
115 |     result.x0 = x
116 |     result.y0 = y
117 |     result.r0 = random(10, 25)
118 |     result.r = result.r0
119 |     result.d0 = random(15) * random() + 5
120 |     result.d = result.d0
121 |     result.n = int(random(3, 13))
122 |     result.a = random(100)
123 |     result.t = random(10000)
124 |     result.r1 = random(0.01)
125 |     result.r2 = random(0.01)
126 |     result.r3 = random(0.01)
127 |     result.col = random(colors)
128 | 
129 |   proc show(form: Form) =
130 |     noStroke()
131 |     fill(form.col)
132 |     push()
133 |     translate(form.x, form.y)
134 |     rotate(form.a)
135 |     for i in 0 ..< form.n:
136 |       let theta = map(i, 0, form.n, 0, TAU)
137 |       ellipse(form.r * cos(theta), form.r * sin(theta), form.d, form.d)
138 |     pop()
139 | 
140 |   proc move(form: Form) =
141 |     form.t += 1
142 |     form.a = TAU * sin(form.t * form.r1);
143 |     form.r = form.r0 * sin(form.t * form.r2);
144 |     form.d = form.d0 * sin(form.t * form.r3);
145 |     form.x += 0.5;
146 |     form.y -= 0.5;
147 |     if form.x > width:
148 |       form.x = 0
149 |     if form.y < 0:
150 |       form.y = height
151 | 
152 |   setup:
153 |     createCanvas(900, 900)
154 | 
155 |     var c = 18
156 |     var w = width / c
157 |     for i in 0 ..< c:
158 |       for j in 0 ..< c:
159 |         let x = i * w + w / 2;
160 |         let y = j * w + w / 2;
161 |         if ((i + j) mod 2 == 0):
162 |           for k in 0 ..< 5:
163 |             forms.add(newForm(x, y))
164 |     background(0)
165 | 
166 |   draw:
167 | 
168 |     translate(width / 2, height / 2)
169 |     scale(1.1)
170 |     translate(-width / 2, -height / 2)
171 |     background(255)
172 |     for f in forms:
173 |       f.show()
174 |       f.move()
175 | 
176 | nbJsShowSource()
177 | nbJsFromCode():
178 |   keyPressed:
179 |     if $key == "s":
180 |       echo "saving gif okazz_229019a"
181 |       saveGif(cstring("okazz_229019a"), 2)
182 | nbText: "press 's' to export a 2 second gif"
183 | nbSave


--------------------------------------------------------------------------------
/docs/flashing_canvas.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>flashing_canvas.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>flashing_canvas.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>2. Flashing canvas</h2>
 47 | <p>A canvas that flashes random colors (shows how to change frameRate)</p>
 48 | 
 49 | <pre><code class="nim hljs">setup:
 50 |   createCanvas(<span class="hljs-number">500</span>, <span class="hljs-number">500</span>)
 51 |   frameRate(<span class="hljs-number">1</span>) <span class="hljs-comment"># 1 frame every second (default is 60 frames per second)</span>
 52 |   
 53 | draw:
 54 |   background(random()*<span class="hljs-number">255</span>, random()*<span class="hljs-number">255</span>, random()*<span class="hljs-number">255</span>)</code></pre>
 55 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
 56 | var framePtr = null;
 57 | var excHandler = 0;
 58 | var lastJSError = null;
 59 | if (!Math.trunc) {
 60 |   Math.trunc = function(v) {
 61 |     v = +v;
 62 |     if (!isFinite(v)) return v;
 63 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
 64 |   };
 65 | }
 66 | 
 67 | var objectID_620757154 = [0];
 68 | 
 69 | function setup() {
 70 |     createCanvas(500.0, 500.0);
 71 |     frameRate(1.0);
 72 | 
 73 |   
 74 | }
 75 | 
 76 | function draw() {
 77 |     background((random() * 255.0), (random() * 255.0), (random() * 255.0));
 78 | 
 79 |   
 80 | }
 81 | </script>
 82 | </main>
 83 | <footer>
 84 | <hr>
 85 | <div class="nb-box">
 86 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
 87 |   <span></span>
 88 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
 89 | </div>
 90 | </footer>
 91 | <section id="source">
 92 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
 93 | nbInit
 94 | nbUseP5
 95 | nb.addEntry(<span class="hljs-number">2</span>, <span class="hljs-string">&quot;Flashing canvas&quot;</span>, <span class="hljs-string">&quot;A canvas that flashes random colors (shows how to change frameRate)&quot;</span>)
 96 | nbCodeDisplay(nbJsFromCode):
 97 |   setup:
 98 |     createCanvas(<span class="hljs-number">500</span>, <span class="hljs-number">500</span>)
 99 |     frameRate(<span class="hljs-number">1</span>) <span class="hljs-comment"># 1 frame every second (default is 60 frames per second)</span>
100 |     
101 |   draw:
102 |     background(random()*<span class="hljs-number">255</span>, random()*<span class="hljs-number">255</span>, random()*<span class="hljs-number">255</span>)
103 | 
104 | nbJsShowSource()
105 | nbSave</code></pre>
106 | </section><script>
107 | function toggleSourceDisplay() {
108 |   var btn = document.getElementById("show")
109 |   var source = document.getElementById("source");
110 |   if (btn.innerHTML=="Show Source") {
111 |     btn.innerHTML = "Hide Source";
112 |     source.style.display = "block";
113 |   } else {
114 |     btn.innerHTML = "Show Source";
115 |     source.style.display = "none";
116 |   }
117 | }
118 | </script></body>
119 | </html>


--------------------------------------------------------------------------------
/docs/get_started.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>get_started.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>get_started.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>1. Get started</h2>
 47 | <p>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.</p>
 48 | 
 49 | <pre><code class="nim hljs">setup:
 50 |   createCanvas(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>)
 51 |   background(<span class="hljs-number">200</span>)
 52 |   
 53 | draw:
 54 |   <span class="hljs-keyword">if</span> mouseIsPressed:
 55 |     fill(<span class="hljs-number">0</span>)
 56 |   <span class="hljs-keyword">else</span>:
 57 |     fill(<span class="hljs-number">255</span>)
 58 |   ellipse(mouseX, mouseY, <span class="hljs-number">40</span>, <span class="hljs-number">40</span>)</code></pre>
 59 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
 60 | var framePtr = null;
 61 | var excHandler = 0;
 62 | var lastJSError = null;
 63 | if (!Math.trunc) {
 64 |   Math.trunc = function(v) {
 65 |     v = +v;
 66 |     if (!isFinite(v)) return v;
 67 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
 68 |   };
 69 | }
 70 | 
 71 | var objectID_620757154 = [0];
 72 | 
 73 | function setup() {
 74 |     createCanvas(400.0, 400.0);
 75 |     background(200.0);
 76 | 
 77 |   
 78 | }
 79 | 
 80 | function draw() {
 81 |     if (mouseIsPressed) {
 82 |     fill(0.0);
 83 |     }
 84 |     else {
 85 |     fill(255.0);
 86 |     }
 87 |     
 88 |     ellipse(mouseX, mouseY, 40.0, 40.0);
 89 | 
 90 |   
 91 | }
 92 | </script>
 93 | </main>
 94 | <footer>
 95 | <hr>
 96 | <div class="nb-box">
 97 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
 98 |   <span></span>
 99 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
100 | </div>
101 | </footer>
102 | <section id="source">
103 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
104 | nbInit
105 | nbUseP5
106 | nb.addEntry(<span class="hljs-number">1</span>, <span class="hljs-string">&quot;Get started&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
107 | 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.
108 | &quot;&quot;&quot;</span>)
109 | nbCodeDisplay(nbJsFromCode):
110 |   setup:
111 |     createCanvas(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>)
112 |     background(<span class="hljs-number">200</span>)
113 |     
114 |   draw:
115 |     <span class="hljs-keyword">if</span> mouseIsPressed:
116 |       fill(<span class="hljs-number">0</span>)
117 |     <span class="hljs-keyword">else</span>:
118 |       fill(<span class="hljs-number">255</span>)
119 |     ellipse(mouseX, mouseY, <span class="hljs-number">40</span>, <span class="hljs-number">40</span>)
120 | nbSave</code></pre>
121 | </section><script>
122 | function toggleSourceDisplay() {
123 |   var btn = document.getElementById("show")
124 |   var source = document.getElementById("source");
125 |   if (btn.innerHTML=="Show Source") {
126 |     btn.innerHTML = "Hide Source";
127 |     source.style.display = "block";
128 |   } else {
129 |     btn.innerHTML = "Show Source";
130 |     source.style.display = "none";
131 |   }
132 | }
133 | </script></body>
134 | </html>


--------------------------------------------------------------------------------
/docsrc/okazz_221026a.nim:
--------------------------------------------------------------------------------
  1 | import nimib, index, p5
  2 | nbInit
  3 | nbUseP5
  4 | nb.addEntry(7, "Okazz 221026a", """
  5 | Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&o=31),
  6 | original at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1711659).
  7 | """)
  8 | nbText: """
  9 | License is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).
 10 | 
 11 | The original sketch has been ported from p5js to p5nim.
 12 | """
 13 | # maybe this will be used to train an automatic translator
 14 | let sourceOriginalJs = """
 15 | let palettes = [
 16 |   ['#6b2d5c', '#f0386b', '#ff5376', '#e391db', '#f8c0c8'],
 17 |   ['#ffe957', '#eec170', '#f2a65a', '#f58549', '#ff6c3f'],
 18 |   ['#073b3a', '#0b6e4f', '#08a045', '#6bbf59', '#71deb2'],
 19 |   ['#c52233', '#a51c30', '#a7333f', '#74121d', '#580c1f'],
 20 |   ['#03045e', '#0077b6', '#00b4d8', '#90e0ef', '#caf0f8'],
 21 |   ['#f8f9fa', '#dee2e6', '#adb5bd', '#495057', '#212529']
 22 | ];
 23 | let SEED = Math.floor(Math.random() * 1000000);
 24 | let forms = [];
 25 | 
 26 | function setup() {
 27 |   createCanvas(900, 900);
 28 |   rectMode(CENTER);
 29 |   // randomSeed(SEED)
 30 |   //   background(255);
 31 |   //   forms.push(new Form(width/2, height/2, 100));
 32 |   let seg = 25;
 33 |   let w = width / seg;
 34 |   for (let i = 0; i < seg; i++) {
 35 |     for (let j = 0; j < seg; j++) {
 36 |       let x = i * w + w / 2;
 37 |       let y = j * w + w / 2;
 38 |       forms.push(new Form(x, y, w));
 39 |     }
 40 |   }
 41 | }
 42 | 
 43 | function draw() {
 44 |   background(255);
 45 |   for (let f of forms) {
 46 |     f.show();
 47 |     f.move();
 48 |   }
 49 |   // this.x = x;
 50 | 
 51 |   // randomSeed(SEED)
 52 |   // 
 53 | }
 54 | 
 55 | function form(x, y, w) {
 56 |   // let num = int(random());
 57 |   let num = int(5);
 58 |   let d = dist(width / 2, height / 2, x, y);
 59 |   let c = int(map(d, 0, sqrt(sq(width / 2) + sq(height / 2)), 0, palettes.length * 2) + frameCount * 0.5);
 60 |   let colors = palettes[c % palettes.length];
 61 | 
 62 |   // shuffle(colors, true);
 63 |   for (let i = 0; i < num; i++) {
 64 |     let r = map(i, 0, num, 0, w / 2);
 65 |     let ww = map(i, 0, num, w, 0);
 66 |     let col = colors[i % colors.length];
 67 |     fill(col);
 68 |     rect(x, y, ww, ww, r);
 69 |   }
 70 | }
 71 | 
 72 | class Form {
 73 |   constructor(x, y, w) {
 74 |     this.x = x;
 75 |     this.y = y;
 76 |     this.w = w;
 77 |     this.palettes = [];
 78 |     for (let i = 0; i < palettes.length; i++) {
 79 |       let c = []
 80 |       shuffle(palettes[i], true);
 81 |       for (let j = 0; j < 5; j++) {
 82 |         c.push(palettes[i][j]);
 83 |       }
 84 |       this.palettes.push(c);
 85 |     }
 86 |     this.num = 5;
 87 |     this.colors = [];
 88 |   }
 89 | 
 90 |   show() {
 91 |     let d = dist(width / 2, height / 2, this.x, this.y);
 92 |     let c = int(map(d, sqrt(sq(width / 2) + sq(height / 2)), 0, 0, palettes.length) + frameCount * 0.02);
 93 |     this.colors = this.palettes[c % palettes.length];
 94 |     for (let i = 0; i < this.num; i++) {
 95 |       let r = map(i, 0, this.num, 0, this.w / 2);
 96 |       let ww = map(i, 0, this.num, this.w, 0);
 97 |       let col = this.colors[i % this.colors.length];
 98 |       fill(col);
 99 |       rect(this.x, this.y, ww, ww, r);
100 |     }
101 |   }
102 | 
103 |   move() {
104 | 
105 |   }
106 | 
107 | }
108 | """
109 | 
110 | nbJsFromCode:
111 |   import std / [random, sequtils]
112 |   import std / math except sqrt
113 | 
114 |   var palettes = @[
115 |     @["#6b2d5c", "#f0386b", "#ff5376", "#e391db", "#f8c0c8"],
116 |     @["#ffe957", "#eec170", "#f2a65a", "#f58549", "#ff6c3f"],
117 |     @["#073b3a", "#0b6e4f", "#08a045", "#6bbf59", "#71deb2"],
118 |     @["#c52233", "#a51c30", "#a7333f", "#74121d", "#580c1f"],
119 |     @["#03045e", "#0077b6", "#00b4d8", "#90e0ef", "#caf0f8"],
120 |     @["#f8f9fa", "#dee2e6", "#adb5bd", "#495057", "#212529"]
121 |   ]
122 |   let SEED = math.floor(random.rand(1.0) * 1000000) # using p5js.floor throws an error in console
123 | 
124 |   type
125 |     Form = ref object
126 |       x, y, w: float
127 |       palettes: seq[seq[string]] 
128 |       num: int
129 |       colors: seq[string]
130 | 
131 |   var forms: seq[Form]
132 | 
133 |   proc newForm(x, y, w: float): Form =
134 |     result = new Form
135 |     result.x = x
136 |     result.y = y
137 |     result.w = w
138 |     result.palettes = newSeqWith(0, newSeq[string]())
139 |     for i in 0 ..< len(palettes):
140 |       var c = palettes[i]
141 |       shuffle(c)
142 |       result.palettes.add(c)
143 |     result.num = 5
144 |     result.colors = newSeq[string]()
145 | 
146 |   proc show(form: Form) =
147 |     let d = dist(width / 2, height / 2, form.x, form.y)
148 |     let c = int(map(d, sqrt(sq(width / 2) + sq(height / 2)), 0, 0, palettes.len) + frameCount * 0.02)
149 |     form.colors = form.palettes[c mod palettes.len]
150 |     for i in 0 ..< form.num:
151 |       let r = map(float(i), 0, form.num, 0, form.w / 2)
152 |       let ww = map(float(i), 0, form.num, form.w, 0)
153 |       let col = form.colors[i mod form.colors.len]
154 |       fill(col)
155 |       rect(form.x, form.y, ww, ww, r)
156 | 
157 |   # no move needed
158 | 
159 |   setup:
160 |     createCanvas(900, 900)
161 |     rectMode(CENTER)
162 |     # randomSeed(SEED)
163 |     #   background(255)
164 |     #   forms.add(newForm(width/2, height/2, 100))
165 |     let seg = 25
166 |     let w = width / seg
167 |     for i in 0 ..< seg:
168 |       for j in 0 ..< seg:
169 |         let x = i * w + w / 2
170 |         let y = j * w + w / 2
171 |         forms.add(newForm(x, y, w))       
172 | 
173 |   draw:
174 |     background(255)
175 |     for f in forms:
176 |       f.show()
177 |       #f.move()
178 | 
179 | nbJsShowSource()
180 | nbJsFromCode():
181 |   keyPressed:
182 |     if $key == "s":
183 |       echo "saving gif okazz_221026a"
184 |       saveGif(cstring("okazz_221026a"), 5)
185 | nbText: "press 's' to export a 5 second gif"
186 | nbSave


--------------------------------------------------------------------------------
/docs/easing.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>easing.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>easing.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>3. Easing</h2>
 47 | <p>Move the mouse across the screen and the symbol will follow.</p>
 48 | 
 49 | <pre><code class="nim hljs"><span class="hljs-keyword">var</span> x = <span class="hljs-number">1.0</span>
 50 | <span class="hljs-keyword">var</span> y = <span class="hljs-number">1.0</span>
 51 | <span class="hljs-keyword">var</span> easing = <span class="hljs-number">0.05</span>
 52 | 
 53 | setup:
 54 |   createCanvas(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>)
 55 |   noStroke()
 56 |   
 57 | draw:
 58 |   background(<span class="hljs-number">237</span>, <span class="hljs-number">34</span>, <span class="hljs-number">93</span>)
 59 |   <span class="hljs-keyword">let</span> targetX = mouseX
 60 |   <span class="hljs-keyword">let</span> dx = targetX - x
 61 |   x += dx * easing
 62 | 
 63 |   <span class="hljs-keyword">let</span> targetY = mouseY
 64 |   <span class="hljs-keyword">let</span> dy = targetY - y
 65 |   y += dy * easing
 66 | 
 67 |   ellipse(x, y, <span class="hljs-number">66</span>, <span class="hljs-number">66</span>)</code></pre>
 68 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
 69 | var framePtr = null;
 70 | var excHandler = 0;
 71 | var lastJSError = null;
 72 | if (!Math.trunc) {
 73 |   Math.trunc = function(v) {
 74 |     v = +v;
 75 |     if (!isFinite(v)) return v;
 76 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
 77 |   };
 78 | }
 79 | 
 80 | var objectID_620757154 = [0];
 81 | 
 82 | function setup() {
 83 |     createCanvas(400.0, 400.0);
 84 |     noStroke();
 85 | 
 86 |   
 87 | }
 88 | 
 89 | function HEX2BHEX3D_855640050(x_855640052, x_855640052_Idx, y_855640053) {
 90 |     x_855640052[x_855640052_Idx] = (x_855640052[x_855640052_Idx] + y_855640053);
 91 | 
 92 |   
 93 | }
 94 | 
 95 | function draw() {
 96 |     background(237.0, 34.0, 93.0);
 97 |     var targetX_452984858 = mouseX;
 98 |     var dx_452984859 = (targetX_452984858 - x_452984853[0]);
 99 |     HEX2BHEX3D_855640050(x_452984853, 0, (dx_452984859 * easing_452984855[0]));
100 |     var targetY_452984864 = mouseY;
101 |     var dy_452984865 = (targetY_452984864 - y_452984854[0]);
102 |     HEX2BHEX3D_855640050(y_452984854, 0, (dy_452984865 * easing_452984855[0]));
103 |     ellipse(x_452984853[0], y_452984854[0], 66.0, 66.0);
104 | 
105 |   
106 | }
107 | var x_452984853 = [1.0];
108 | var y_452984854 = [1.0];
109 | var easing_452984855 = [0.05];
110 | </script>
111 | </main>
112 | <footer>
113 | <hr>
114 | <div class="nb-box">
115 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
116 |   <span></span>
117 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
118 | </div>
119 | </footer>
120 | <section id="source">
121 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
122 | nbInit
123 | nbUseP5
124 | nb.addEntry(<span class="hljs-number">3</span>, <span class="hljs-string">&quot;Easing&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
125 | Move the mouse across the screen and the symbol will follow.
126 | &quot;&quot;&quot;</span>)
127 | nbCodeDisplay(nbJsFromCode):
128 |   <span class="hljs-keyword">var</span> x = <span class="hljs-number">1.0</span>
129 |   <span class="hljs-keyword">var</span> y = <span class="hljs-number">1.0</span>
130 |   <span class="hljs-keyword">var</span> easing = <span class="hljs-number">0.05</span>
131 | 
132 |   setup:
133 |     createCanvas(<span class="hljs-number">400</span>, <span class="hljs-number">400</span>)
134 |     noStroke()
135 |     
136 |   draw:
137 |     background(<span class="hljs-number">237</span>, <span class="hljs-number">34</span>, <span class="hljs-number">93</span>)
138 |     <span class="hljs-keyword">let</span> targetX = mouseX
139 |     <span class="hljs-keyword">let</span> dx = targetX - x
140 |     x += dx * easing
141 | 
142 |     <span class="hljs-keyword">let</span> targetY = mouseY
143 |     <span class="hljs-keyword">let</span> dy = targetY - y
144 |     y += dy * easing
145 | 
146 |     ellipse(x, y, <span class="hljs-number">66</span>, <span class="hljs-number">66</span>)
147 | 
148 | nbJsShowSource()
149 | nbSave</code></pre>
150 | </section><script>
151 | function toggleSourceDisplay() {
152 |   var btn = document.getElementById("show")
153 |   var source = document.getElementById("source");
154 |   if (btn.innerHTML=="Show Source") {
155 |     btn.innerHTML = "Hide Source";
156 |     source.style.display = "block";
157 |   } else {
158 |     btn.innerHTML = "Show Source";
159 |     source.style.display = "none";
160 |   }
161 | }
162 | </script></body>
163 | </html>


--------------------------------------------------------------------------------
/docs/doorbell.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>doorbell.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>doorbell.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | 
 47 | <h2>10. Doorbell</h2>
 48 | <p>How to load and play a sound (using <a href="https://p5js.org/reference/#/libraries/p5.sound">p5sound</a>).
 49 | Adapted from <a href="https://p5js.org/reference/#/p5.SoundFile">p5.SoundFile</a> reference.</p>
 50 | <p>This uses the additional <a href="https://p5js.org/reference/#/libraries/p5.sound">p5sound</a> library.
 51 | You will need to call <code>nbUseP5Sound</code> to use it in nimib.
 52 | Loading the sound file does not work when opening the html locally in a browser,
 53 | you will need to run a static server (e.g. <a href="https://github.com/h3rald/nimhttpd">nimhttpd</a>).</p>
 54 | 
 55 | <pre><code class="nim hljs"><span class="hljs-keyword">const</span> nimColor = <span class="hljs-string">&quot;#ffc200&quot;</span>
 56 | <span class="hljs-keyword">var</span> doorbell: <span class="hljs-type">SoundFile</span>
 57 | 
 58 | preload:
 59 |   doorbell = loadSound(<span class="hljs-string">&quot;assets/doorbell.mp3&quot;</span>)
 60 | 
 61 | setup:
 62 |   createCanvas(<span class="hljs-number">200</span>, <span class="hljs-number">100</span>)
 63 |   background(nimColor)
 64 |   text(<span class="hljs-string">&quot;click to play the doorbell 🛎️&quot;</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>)
 65 | 
 66 | mousePressed:
 67 |   play(doorbell)</code></pre>
 68 | <script defer>/* Generated by the Nim Compiler v1.6.10 */
 69 | var framePtr = null;
 70 | var excHandler = 0;
 71 | var lastJSError = null;
 72 | if (!Math.trunc) {
 73 |   Math.trunc = function(v) {
 74 |     v = +v;
 75 |     if (!isFinite(v)) return v;
 76 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
 77 |   };
 78 | }
 79 | 
 80 | var objectID_620757154 = [0];
 81 | 
 82 | function preload() {
 83 |     doorbell_452984855[0] = loadSound("assets/doorbell.mp3");
 84 | 
 85 |   
 86 | }
 87 | 
 88 | function setup() {
 89 |     createCanvas(200.0, 100.0);
 90 |     background("#ffc200");
 91 |     text("click to play the doorbell 🛎️", 10.0, 20.0);
 92 | 
 93 |   
 94 | }
 95 | 
 96 | function mousePressed() {
 97 |     doorbell_452984855[0].play();
 98 | 
 99 |   
100 | }
101 | var doorbell_452984855 = [null];
102 | </script>
103 | </main>
104 | <footer>
105 | <hr>
106 | <div class="nb-box">
107 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
108 |   <span></span>
109 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
110 | </div>
111 | </footer>
112 | <section id="source">
113 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
114 | nbInit
115 | nbUseP5
116 | nbUseP5Sound
117 | 
118 | nb.addEntry(<span class="hljs-number">10</span>, <span class="hljs-string">&quot;Doorbell&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
119 | How to load and play a sound (using [p5sound](https://p5js.org/reference/#/libraries/p5.sound)).
120 | Adapted from [p5.SoundFile](https://p5js.org/reference/#/p5.SoundFile) reference.
121 | &quot;&quot;&quot;</span>)
122 | nbText: <span class="hljs-string">&quot;&quot;&quot;
123 | This uses the additional [p5sound](https://p5js.org/reference/#/libraries/p5.sound) library.
124 | You will need to call `nbUseP5Sound` to use it in nimib.
125 | Loading the sound file does not work when opening the html locally in a browser,
126 | you will need to run a static server (e.g. [nimhttpd](https://github.com/h3rald/nimhttpd)).
127 | &quot;&quot;&quot;</span>
128 | 
129 | nbCodeDisplay(nbJsFromCode):
130 |   <span class="hljs-keyword">const</span> nimColor = <span class="hljs-string">&quot;#ffc200&quot;</span>
131 |   <span class="hljs-keyword">var</span> doorbell: <span class="hljs-type">SoundFile</span>
132 | 
133 |   preload:
134 |     doorbell = loadSound(<span class="hljs-string">&quot;assets/doorbell.mp3&quot;</span>)
135 | 
136 |   setup:
137 |     createCanvas(<span class="hljs-number">200</span>, <span class="hljs-number">100</span>)
138 |     background(nimColor)
139 |     text(<span class="hljs-string">&quot;click to play the doorbell 🛎️&quot;</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>)
140 | 
141 |   mousePressed:
142 |     play(doorbell)
143 | 
144 | nbSave</code></pre>
145 | </section><script>
146 | function toggleSourceDisplay() {
147 |   var btn = document.getElementById("show")
148 |   var source = document.getElementById("source");
149 |   if (btn.innerHTML=="Show Source") {
150 |     btn.innerHTML = "Hide Source";
151 |     source.style.display = "block";
152 |   } else {
153 |     btn.innerHTML = "Show Source";
154 |     source.style.display = "none";
155 |   }
156 | }
157 | </script></body>
158 | </html>


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
  1 | # 🌸👑 p5nim
  2 | 
  3 | **p5nim** is a gate in the [Nim]👑 universe that leads you to the magical world of [Processing] and [p5.js]🌸.
  4 | Or, conversely, a potentially gateway drug from [Processing]/[p5.js] to the thoroughly enjoyable,
  5 | dangerously addictive and sort of universal programming language [Nim].
  6 | 
  7 | More prosaically **p5nim** provides [Nim] bindings for the [p5.js] library, some syntactic sugar
  8 | and convenience functions to use it with [nimib]🐳.
  9 | In [p5nim example gallery](https://pietroppeter.github.io/p5nim/) you can also
 10 | see live a number of [p5.js] examples and [openprocessing] artwork ported to Nim.
 11 | Documentation is built with [nimib], a library to publish nim code to the web.
 12 | 
 13 | [Processing] is language, a graphical library and IDE for artists and designers with the purpose
 14 | of teaching non-programmers the fundamentals of programming in a visual context.
 15 | The project was initiated in 2001 and it was built in Java, one of the reason being that [java applets]
 16 | were a common technology at the time to show interactive applications on the web.
 17 | [p5.js] was started in 2013 to reinterpret [Processing] for the modern web.
 18 | From its website:
 19 | 
 20 | > p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.
 21 | 
 22 | Note that there is also an alternative pure nim implementation inspired by p5js (which also works for native target): https://github.com/GabrielLasso/drawim
 23 | 
 24 | ## Status
 25 | 
 26 | This project started as a fork of https://github.com/Foldover/nim-p5/, to fix some bugs.
 27 | It has been renamed as `p5nim`, the goal is to clean more the api to make it more Nim idiomatic,
 28 | port more examples, fix more stuff and add more convenience functions
 29 | to use it with nimib.
 30 | Also in scope are additional p5js libraries such as p5sound (see below).
 31 | I will add stuff as I need it but you are more than welcome to jump in and help out (check issues)!
 32 | 
 33 | It is available on nimble (replaced nimp5) and you can install it using:
 34 | 
 35 |     nimble install https://github.com/pietroppeter/p5nim/
 36 | 
 37 | You might want instead to clone it, in order to contribute fixing stuff and adding more ported examples:
 38 | 
 39 |     git clone https://github.com/pietroppeter/p5nim/
 40 |     cd p5nim
 41 |     nimble develop
 42 | 
 43 | ## Basic usage
 44 | 
 45 | ```nim
 46 | import p5
 47 | 
 48 | setup:
 49 |   createCanvas(400, 400)
 50 |   background(200)
 51 | 
 52 | draw:
 53 |   if mouseIsPressed:
 54 |     fill(0)
 55 |   else:
 56 |     fill(255)
 57 |   ellipse(mouseX, mouseY, 40, 40)
 58 | ```
 59 | 
 60 | As you see from the code above ([live](https://pietroppeter.github.io/p5nim/get_started.html)), using p5nim is almost identical to using p5.js, save for the syntax.
 61 | To learn how to use this the best way is to use [p5.js] documentation and port examples.
 62 | 
 63 | ## p5sound
 64 | 
 65 | [p5sound](https://p5js.org/reference/#/libraries/p5.sound) is an additional library from p5js which extends p5 with sound functionalities.
 66 | A work-in-progress wrapper is available, see [doorbell](https://pietroppeter.github.io/p5nim/doorbell.html) for example of usage.
 67 | 
 68 | ## Usage with nimib
 69 | 
 70 | ```nim
 71 | import nimib
 72 | import p5 # only imports nimib utilities when not using js backend
 73 | 
 74 | nbInit
 75 | 
 76 | nbUseP5 # adds p5 js and imports p5 in JsGlobal
 77 | nbUseP5Sound # optional in case you want also p5sound
 78 | 
 79 | nbCodeDisplay(nbJsFromCode): # if you want to display the js code
 80 |   const nimColor = "#ffc200"
 81 |   var doorbell: SoundFile
 82 | 
 83 |   preload:
 84 |     doorbell = loadSound("assets/doorbell.mp3")
 85 | 
 86 |   setup:
 87 |     createCanvas(200, 100)
 88 |     background(nimColor)
 89 |     text("click to play the doorbell 🛎️", 10, 20)
 90 | 
 91 |   mousePressed:
 92 |     play(doorbell)
 93 | 
 94 | nbSave
 95 | ```
 96 | 
 97 | ## Instance mode
 98 | 
 99 | [Instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) allows to place a p5 instance into a specific `<div>`
100 | and to have multiple p5 canvas in the same document.
101 | 
102 | Thanks to nim metaprogramming capabilities (and mostly [thanks to @Vindaar](https://github.com/pietroppeter/p5nim/pull/5)),
103 | we do not need
104 | to have a different api for instance mode, we can have the same api
105 | we use for global mode, we only need to wrap it in a `instance` call.
106 | 
107 | See [instances](https://pietroppeter.github.io/p5nim/instances.html) for an example.
108 | 
109 | **Note**: this feature is not yet complete, see https://github.com/pietroppeter/p5nim/issues/8
110 | 
111 | ## Porting from p5js to Nim
112 | 
113 | There are a number of javascript procedures that p5js needs to know about (like `setup` and `draw`) and they have to be declared with the {.exportc.} pragma.
114 | In p5nim we provide templates that remove the necessity to declare procs with {.exportc.}. The full list is in [src/p5/p5sugar.nim](src/p5/p5sugar.nim).
115 | 
116 | Since [Number in javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number)
117 | is actually a float, in p5nim all procedures are defined with input a `float`.
118 | For convenience `p5nim` exports
119 | [`lenientops`](https://nim-lang.org/docs/lenientops.html) from standard library
120 | and a [converter](https://nim-lang.org/docs/manual.html#converters) from int to float
121 | (in the original bindings `PNumber` - the generic number used by all functions -
122 | is defined as `int or float`;
123 | this behavior is currently still available under the compile time switch `p5IntOrFloat`;
124 | it will likely be removed at some point).
125 | 
126 | When converting examples from p5js there are some common pitfalls:
127 | 
128 | - some variables (e.g. `key`) are `cstring` (backend compatible strings)
129 |   and you might need to convert them with `$` before using them
130 | - when porting an example containing objects you will need to change more stuff, see example [okazz_220919a](https://pietroppeter.github.io/p5nim/okazz_220919a.html):
131 |   - nim support for forward declaration is experimental, better to define your object before its usage in setup and draw.
132 |   - you will need to declare the type of object. You can pick it to be a `ref object` or a plain `object` (in the examples currently I am mostly using `ref object`, see [this commit](https://github.com/pietroppeter/p5nim/commit/c838f0be6b8871ed48e5c0c7f34f6696e68f1bd1#diff-741692b20db42d00eea54f57dc8b7536948a4dea0200c0c99fa7b9b5566195c9) for an example of changes between the two approaches)
133 | - some math/random functions that seem to be available in `p5js` (such as `floor`, `random` which are defined in the 
134 |   bindings) do not actually work, so code compiles but the canvas is not shown (you can see an error in the console).
135 |   In those cases it is better to import `math` and `random` from stdlib
136 |   (but you might run in conflicts, e.g. when using `sqrt` which is also defined in `p5js`)
137 |   For an example see [okazz_221026a](https://pietroppeter.github.io/p5nim/okazz_221026a.html)
138 |   and try removing the imports of `math` and `random`, use `floor` instead of `math.floor`
139 |   or `random(1.0)` instead of `random.rand(1.0)`.
140 |   This is actually something for which a solution should be found in this library (remove them from bindings?).
141 | 
142 | ## Contribute
143 | 
144 | - go through the [examples on p5js site](https://p5js.org/examples/), pick one that you like and convert it to nim. You might want to copy and adapt last example from `docsrc` (look at the index to find out what is the last one). You will need to increment the example number, add a title and a description. It is pretty fun!
145 |   - you will have to commit the html in docs, and rerun also `nim r index`
146 |     (which uses data from `docs\index.json`)
147 |   - as you find out new conversion pitfalls update the readme up there
148 | - an excellent source of open art is [openprocessing]
149 | 
150 | 
151 | [Nim]: https://nim-lang.org
152 | [nimib]: https://github.com/pietroppeter/nimib/
153 | [Processing]: https://processing.org
154 | [java applets]: https://en.wikipedia.org/wiki/Java_applet
155 | [p5.js]: https://p5js.org
156 | [openprocessing]: https://openprocessing.org/
157 | 


--------------------------------------------------------------------------------
/src/p5/p5instance_logic.nim:
--------------------------------------------------------------------------------
  1 | import std / [macros, macrocache]
  2 | from std/strutils import `%`
  3 | import strformat
  4 | 
  5 | import p5types
  6 | 
  7 | const Arg = "p5Inst"
  8 | const WrappedProcs = CacheSeq"p5Procs"
  9 | const P5InstanceFields = CacheSeq"p5Fields"
 10 | 
 11 | static:
 12 |   var tmp = new P5Instance
 13 |   for field, typ in fieldPairs(tmp[]):
 14 |     P5InstanceFields.add ident(field)
 15 | 
 16 | proc contains(ct: CacheSeq, s: NimNode): bool =
 17 |   ## XXX: think about this. Maybe better to use a real table so we don't pay the
 18 |   ## price for this. Or just use a CT table for O(1) lookup?
 19 |   for x in ct:
 20 |     if x == s: return true
 21 | 
 22 | proc replaceCallsImpl(n: NimNode): NimNode
 23 | proc maybeReplaceCall(n: NimNode): NimNode =
 24 |   ## Checks if this node refers to a known procedure wrapped by `globalAndLocal`.
 25 |   ## If so, generate a call:
 26 |   ##
 27 |   ## `n(p5Inst, <other args>)`
 28 |   ##
 29 |   ## to call the correct overload.
 30 |   doAssert n.kind in {nnkCall, nnkDotExpr}
 31 |   # Note: `nnkDotExpr` *may* be a call
 32 |   proc getName(n: NimNode): NimNode =
 33 |     ## helper to extract the name from the following cases:
 34 |     ## - nnkCall with an ident as first child: `ellipse(mouseX, mouseY, ...)`
 35 |     ## - nnkCall with a nnkDotExpr as first child: `mouseX.ellipse(mouseY, ...)`
 36 |     ## - pure nnkDotExpr (which may be a call): `fillBy.fill`
 37 |     case n.kind
 38 |     of nnkIdent, nnkSym: result = n
 39 |     of nnkCall: result = getName(n[0])
 40 |     of nnkDotExpr: result = getName(n[1]) # if it refers to a call, 2nd child is call
 41 |     of nnkBracketExpr: result = getName(n[0]) # generic function like newSeq[float]
 42 |     else: doAssert false, &"Invalid branch ({n.kind}) as `maybeReplaceCall` expects nnkCall or nnkDotExpr"
 43 | 
 44 |   let name = getName(n)
 45 |   let nameIsWrapped = name in WrappedProcs
 46 |   if n.kind == nnkDotExpr and nameIsWrapped:
 47 |     # rewrite e.g.: `fillBy.fill` -> `fill(p5Inst, fillBy)`
 48 |     let dotArg0 = replaceCallsImpl(n[0]) # the initial first elemen, e.g. `fillBy` in above
 49 |     result = nnkCall.newTree(name,
 50 |                              ident(Arg),
 51 |                              dotArg0)
 52 |     # NOTE: If I'm not missing something we can never have an `nnkDotExpr`, where the
 53 |     # second child is a field of a P5Instance. In that case the first child would
 54 |     # already refer to some instance (or the code would just be invalid)
 55 |   elif n[0].kind == nnkDotExpr and nameIsWrapped:
 56 |     # rewrite `mouseX.ellipse(mouseY, ...)` to `ellipse(p5Inst, mouseX, ...)` (and checking args)
 57 |     let dotArg0 = replaceCallsImpl(n[0][0]) # the initial first element, e.g. `mouseX` in above
 58 |     result = nnkCall.newTree(name,
 59 |                              ident(Arg),
 60 |                              dotArg0)
 61 |     # now possibly replace remaining
 62 |     for i in 1 ..< n.len:
 63 |       let ch = n[i]
 64 |       result.add replaceCallsImpl(ch)
 65 |     # NOTE: this branch and the below could also be handled differently relying on recursing
 66 |     # back to `replaceCallsImpl`, but this way is more obvious I believe
 67 |   elif nameIsWrapped:
 68 |     result = nnkCall.newTree()
 69 |     # first replace all possible arguments
 70 |     for ch in n:
 71 |       result.add replaceCallsImpl(ch)
 72 |     # now insert the p5 instance argument
 73 |     result.insert(1, ident(Arg)) # insert argument as first (0 is name of fn)
 74 |   else:
 75 |     result = n
 76 | 
 77 | proc maybeReplaceSym(n: NimNode): NimNode =
 78 |   ## Checks if this node refers to a field of the `P5Instance` type. If so
 79 |   ## wrap it in a
 80 |   ##
 81 |   ## `p5Inst.n`
 82 |   ##
 83 |   ## dot expression to access the appropriate field or else leave it alone.
 84 |   doAssert n.kind in {nnkSym, nnkIdent}
 85 |   if n in P5InstanceFields:
 86 |     result = nnkDotExpr.newTree(ident(Arg), n)
 87 |   else:
 88 |     result = n
 89 | 
 90 | proc replaceCallsImpl(n: NimNode): NimNode =
 91 |   ## Recursively walks the NimNode tree and possibly replaces calls and
 92 |   ## syms if they appear either as a field of the `P5Instance` or
 93 |   ## they were wrapped by the `globalAndLocal` macro.
 94 |   if n.len == 0:
 95 |     case n.kind
 96 |     of nnkIdent, nnkSym: result = maybeReplaceSym(n)
 97 |     else: result = n
 98 |   else:
 99 |     result = newTree(n.kind)
100 |     for ch in n:
101 |       case ch.kind
102 |       of nnkCall, nnkDotExpr:
103 |         result.add maybeReplaceCall(ch)
104 |       else:
105 |         result.add replaceCallsImpl(ch)
106 | 
107 | macro replaceCalls(body: untyped): untyped =
108 |   ## Performs replacement of all function / field symbols used in the given
109 |   ## `body` based on known fields of `P5Instance` / wrapped procedures with
110 |   ## a `P5Instance` first argument for usage in `instance` templates.
111 |   result = newStmtList()
112 |   result.add replaceCallsImpl(body)
113 | 
114 | macro globalAndLocal*(args: untyped): untyped =
115 |   ## Generates all given procedures as `importc` once for the global case
116 |   ## and once as methods / attributes of a `P5Instance`.
117 |   ##
118 |   ## Each generated procedure is added to the `WrappedProcs` `CacheSeq` to
119 |   ## allow us to replace calls to them within the `instance` template.
120 |   # basic pragma string for the instance case, as we ``have`` to generate the
121 |   # call as a dot expression and not a regular call with a `p5` first argument
122 |   let pragmaStr = "#.$#(@)"
123 |   let localArg = nnkIdentDefs.newTree(ident"p5", ident"P5Instance", newEmptyNode())
124 |   result = newStmtList()
125 |   for arg in args: # walk all given procs
126 |     doAssert arg.kind == nnkProcDef
127 |     result.add arg # global version
128 |     # mutable copy and add argument
129 |     var marg = arg.copy()
130 |     let name = marg.name
131 |     let pragmaArg = pragmaStr % [name.strVal] # generate correct importcpp pragma string
132 |     let pragma = nnkPragma.newTree(nnkExprColonExpr.newTree(ident"importcpp", newLit(pragmaArg)))
133 |     var params = marg.params
134 |     # insert param at position 1, pushing all others back
135 |     params.insert(1, localArg)
136 |     marg.params = params
137 |     marg.pragma = pragma
138 |     result.add marg
139 |     # add the name of this procedure to list of "save to lift" procedures
140 |     WrappedProcs.add name
141 | 
142 | template instanceImpl(): untyped {.dirty.} =
143 |   # bind `replaceCalls`, because the whole AST of `instance` will appear in the
144 |   # user's calling scope where `replaceCalls` is not defined
145 |   bind replaceCalls
146 |   # shadow global setup and draw with local one. It redefines the existing templates by
147 |   # a version which sets the given body to a closure assigned to the instance field
148 |   # of the same name. In the body of each we will replace calls & dot expressions by
149 |   # the corresponding methods of the p5 instance. For symbols / idents we encounter
150 |   # we also may replace them if their name matches a field of the `P5Instance` type.
151 |   template setup(bd: untyped): untyped =
152 |     p5Inst.setup = proc() =
153 |       replaceCalls(bd)
154 | 
155 |   template draw(bd: untyped): untyped =
156 |     p5Inst.draw = proc() =
157 |       replaceCalls(bd)
158 | 
159 |   template preload(bd: untyped): untyped =
160 |     p5Inst.preload = proc() =
161 |       replaceCalls(bd)
162 |   ## XXX: define all templates from `p5sugar.nim`?
163 | 
164 | template instance*(divName: untyped, body: untyped): untyped =
165 |   ## Generates an instance of a `P5Instance` for the "instance mode". The instance
166 |   ## will be placed into the HTML <div> `divName`. The `divName` should be
167 |   ## a `string`, but it's `untyped` to avoid early processnig of the two
168 |   ## `instance` templates!
169 |   # create the closure & generate a new instance from the given closure
170 |   instanceImpl()
171 |   # Inject the `p5Inst` argument so it's accessible by the user, but
172 |   # importantly by the `setup`, `draw` templates
173 |   let s = proc(p5Inst {.inject.}: P5Instance) {.closure.} = body
174 |   let p5Inst = newInstance(s, divName)
175 | 
176 | template instance*(body: untyped): untyped =
177 |   ## Generates an instance of a `P5Instance` for the "instance mode".
178 |   instanceImpl()
179 |   # Inject the `p5Inst` argument so it's accessible by the user, but
180 |   # importantly by the `setup`, `draw` templates
181 |   let s = proc(p5Inst {.inject.}: P5Instance) {.closure.} = body
182 |   let p5Inst = newInstance(s)
183 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>index.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>index.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | <h2>nimp5 documentation</h2>
 46 | <ol>
 47 | <li>
 48 | <p><a href="./get_started.html">Get started</a>: 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.</p>
 49 | </li>
 50 | <li>
 51 | <p><a href="./flashing_canvas.html">Flashing canvas</a>: A canvas that flashes random colors (shows how to change frameRate)</p>
 52 | </li>
 53 | <li>
 54 | <p><a href="./easing.html">Easing</a>: Move the mouse across the screen and the symbol will follow.</p>
 55 | </li>
 56 | <li>
 57 | <p><a href="./keyboard.html">Keyboard</a>: 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.</p>
 58 | </li>
 59 | <li>
 60 | <p><a href="./polygons.html">Polygons</a>: 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 <a href="https://p5js.org/reference/#/p5/fill">possible inputs for colors</a>.</p>
 61 | </li>
 62 | <li>
 63 | <p><a href="./okazz_220919a.html">Okazz 220919a</a>: Art by <a href="https://openprocessing.org/user/128718?view=sketches&o=31">Okazz</a>,
 64 | original at <a href="https://openprocessing.org/sketch/1653811">openprocessing.org/sketch/1653811</a>.</p>
 65 | </li>
 66 | <li>
 67 | <p><a href="./okazz_221026a.html">Okazz 221026a</a>: Art by <a href="https://openprocessing.org/user/128718?view=sketches&o=31">Okazz</a>,
 68 | original at <a href="https://openprocessing.org/sketch/1711659">openprocessing.org/sketch/1653811</a>.</p>
 69 | </li>
 70 | <li>
 71 | <p><a href="./sinewave.html">Sine Wave</a>: Render a simple sine wave. Original by Daniel Shiffman <a href="https://p5js.org/examples/math-sine-wave.html">https://p5js.org/examples/math-sine-wave.html</a></p>
 72 | </li>
 73 | <li>
 74 | <p><a href="./instances.html">Instance mode</a>: This program creates a canvas in a local p5 instance using
 75 | <a href="https://github.com/processing/p5.js/wiki/Global-and-instance-mode">instance mode</a>.</p>
 76 | </li>
 77 | <li>
 78 | <p><a href="./doorbell.html">Doorbell</a>: How to load and play a sound (using <a href="https://p5js.org/reference/#/libraries/p5.sound">p5sound</a>).
 79 | Adapted from <a href="https://p5js.org/reference/#/p5.SoundFile">p5.SoundFile</a> reference.</p>
 80 | </li>
 81 | </ol>
 82 | <script defer>/* Generated by the Nim Compiler v1.6.10 */
 83 | var framePtr = null;
 84 | var excHandler = 0;
 85 | var lastJSError = null;
 86 | if (!Math.trunc) {
 87 |   Math.trunc = function(v) {
 88 |     v = +v;
 89 |     if (!isFinite(v)) return v;
 90 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
 91 |   };
 92 | }
 93 | 
 94 | var objectID_620757154 = [0];
 95 | </script>
 96 | </main>
 97 | <footer>
 98 | <hr>
 99 | <div class="nb-box">
100 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
101 |   <span></span>
102 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
103 | </div>
104 | </footer>
105 | <section id="source">
106 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> std / [os, algorithm, sugar, strformat, strutils, tables]
107 | <span class="hljs-keyword">import</span> nimib <span class="hljs-keyword">except</span> toJson  <span class="hljs-comment"># we need to remove this from nimib exports! it breaks jsony!</span>
108 | <span class="hljs-keyword">import</span> jsony
109 | 
110 | <span class="hljs-keyword">type</span>
111 |   <span class="hljs-type">Entry</span>* = <span class="hljs-keyword">object</span>
112 |     filename: <span class="hljs-built_in">string</span>
113 |     title: <span class="hljs-built_in">string</span>
114 |     description: <span class="hljs-built_in">string</span>
115 |     numbering: <span class="hljs-built_in">int</span>
116 |   <span class="hljs-type">Index</span>* = <span class="hljs-keyword">object</span>
117 |     data: <span class="hljs-built_in">seq</span>[<span class="hljs-type">Entry</span>]
118 | 
119 | <span class="hljs-keyword">proc</span> sort*(idx: <span class="hljs-keyword">var</span> <span class="hljs-type">Index</span>) =
120 |   idx.data.sort <span class="hljs-keyword">do</span> (e, f: <span class="hljs-type">Entry</span>) -&gt; <span class="hljs-built_in">int</span>:
121 |     cmp(e.numbering, f.numbering)
122 | 
123 | <span class="hljs-keyword">proc</span> dump*(idx: <span class="hljs-type">Index</span>) =
124 |   <span class="hljs-keyword">var</span> idx = idx
125 |   sort(idx)
126 |   writeFile(<span class="hljs-string">&quot;index.json&quot;</span>, jsony.toJson(idx))
127 | 
128 | <span class="hljs-keyword">proc</span> loadIndex*: <span class="hljs-type">Index</span> =
129 |   <span class="hljs-keyword">if</span> fileExists(<span class="hljs-string">&quot;index.json&quot;</span>):
130 |     <span class="hljs-literal">result</span> = <span class="hljs-string">&quot;index.json&quot;</span>.readFile.fromJson(<span class="hljs-type">Index</span>)
131 |   <span class="hljs-keyword">else</span>:
132 |     <span class="hljs-literal">result</span> = <span class="hljs-type">Index</span>()
133 |   sort <span class="hljs-literal">result</span>
134 | 
135 | <span class="hljs-comment"># requires nb: NbDoc</span>
136 | <span class="hljs-keyword">proc</span> addEntry*(nb: <span class="hljs-keyword">var</span> <span class="hljs-type">NbDoc</span>, numb: <span class="hljs-built_in">int</span>, titl, desc: <span class="hljs-built_in">string</span>) =
137 |   <span class="hljs-keyword">let</span> e = <span class="hljs-type">Entry</span>(numbering: numb, title: titl, description: desc, filename: nb.filename)
138 |   <span class="hljs-keyword">var</span> idx = loadIndex()
139 |   <span class="hljs-keyword">var</span> found = <span class="hljs-literal">false</span>
140 |   <span class="hljs-keyword">for</span> f <span class="hljs-keyword">in</span> idx.data.mitems:
141 |     <span class="hljs-keyword">if</span> f.filename == e.filename:
142 |       f = e
143 |       found = <span class="hljs-literal">true</span>
144 |   <span class="hljs-keyword">if</span> <span class="hljs-keyword">not</span> found:
145 |     idx.data.add e
146 |   dump idx
147 |   <span class="hljs-keyword">let</span> text = <span class="hljs-string">&quot;## &quot;</span> &amp;  $(e.numbering) &amp; <span class="hljs-string">&quot;. &quot;</span> &amp; e.title &amp; <span class="hljs-string">&quot;</span><span class="hljs-meta">\n</span><span class="hljs-string">&quot;</span> &amp; e.description
148 |   nbText: text
149 | 
150 | <span class="hljs-keyword">when</span> isMainModule:
151 |   nbInit
152 |   nbText: <span class="hljs-string">&quot;## nimp5 documentation&quot;</span>
153 |   <span class="hljs-keyword">let</span> idx = loadIndex()
154 |   <span class="hljs-keyword">var</span>
155 |     listEntries = <span class="hljs-string">&quot;&quot;</span>
156 |   <span class="hljs-keyword">for</span> entry <span class="hljs-keyword">in</span> idx.data:
157 |     listEntries.add <span class="hljs-string">fmt&quot;{entry.numbering}. [{entry.title}]({entry.filename}): {entry.description}&quot;</span> &amp; <span class="hljs-string">&quot;</span><span class="hljs-meta">\n</span><span class="hljs-string">&quot;</span>
158 |   nbText: listEntries
159 |   nbSave</code></pre>
160 | </section><script>
161 | function toggleSourceDisplay() {
162 |   var btn = document.getElementById("show")
163 |   var source = document.getElementById("source");
164 |   if (btn.innerHTML=="Show Source") {
165 |     btn.innerHTML = "Hide Source";
166 |     source.style.display = "block";
167 |   } else {
168 |     btn.innerHTML = "Show Source";
169 |     source.style.display = "none";
170 |   }
171 | }
172 | </script></body>
173 | </html>


--------------------------------------------------------------------------------
/docs/polygons.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>polygons.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>polygons.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>5. Polygons</h2>
 47 | <p>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 <a href="https://p5js.org/reference/#/p5/fill">possible inputs for colors</a>.</p>
 48 | 
 49 | <pre><code class="nim hljs"><span class="hljs-keyword">proc</span> polygon(x, y, radius, npoints: <span class="hljs-type">PNumber</span>) =
 50 |   <span class="hljs-keyword">let</span> angle = <span class="hljs-type">TWO_PI</span> / npoints
 51 |   beginShape()
 52 |   <span class="hljs-keyword">var</span> a = <span class="hljs-number">0.0</span>
 53 |   <span class="hljs-keyword">while</span> a &lt; <span class="hljs-type">TWO_PI</span>:
 54 |     <span class="hljs-keyword">let</span> sx = x + cos(a) * radius
 55 |     <span class="hljs-keyword">let</span> sy = y + sin(a) * radius
 56 |     a += angle
 57 |     vertex(sx, sy)
 58 |   endShape(<span class="hljs-type">CLOSE</span>)
 59 | 
 60 | setup:
 61 |   createCanvas(<span class="hljs-number">720</span>, <span class="hljs-number">400</span>)
 62 | 
 63 | draw:
 64 |   background(<span class="hljs-number">102</span>) <span class="hljs-comment">## grayscale</span>
 65 | 
 66 |   push()
 67 |   fill(<span class="hljs-number">255</span>, <span class="hljs-number">204</span>, <span class="hljs-number">0</span>) <span class="hljs-comment">## RGB integer values</span>
 68 |   translate(width * <span class="hljs-number">0.2</span>, height * <span class="hljs-number">0.5</span>)
 69 |   rotate(frameCount / <span class="hljs-number">200.0</span>)
 70 |   polygon(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">82</span>, <span class="hljs-number">3</span>)
 71 |   pop()
 72 | 
 73 |   push()
 74 |   fill(<span class="hljs-string">&quot;red&quot;</span>) <span class="hljs-comment">## Named SVG/CSS color string</span>
 75 |   translate(width * <span class="hljs-number">0.5</span>, height * <span class="hljs-number">0.5</span>)
 76 |   rotate(frameCount / <span class="hljs-number">50.0</span>)
 77 |   polygon(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">80</span>, <span class="hljs-number">20</span>)
 78 |   pop()
 79 | 
 80 |   push()
 81 |   fill(<span class="hljs-string">&quot;#fae&quot;</span>) <span class="hljs-comment">## three-digit (or six-digit) hexadecimal RGB notation</span>
 82 |   translate(width * <span class="hljs-number">0.8</span>, height * <span class="hljs-number">0.5</span>)
 83 |   rotate(frameCount / -<span class="hljs-number">100.0</span>)
 84 |   polygon(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">70</span>, <span class="hljs-number">7</span>)
 85 |   pop()</code></pre>
 86 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
 87 | var framePtr = null;
 88 | var excHandler = 0;
 89 | var lastJSError = null;
 90 | if (!Math.trunc) {
 91 |   Math.trunc = function(v) {
 92 |     v = +v;
 93 |     if (!isFinite(v)) return v;
 94 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
 95 |   };
 96 | }
 97 | 
 98 | var objectID_620757154 = [0];
 99 | 
100 | function setup() {
101 |     createCanvas(720.0, 400.0);
102 | 
103 |   
104 | }
105 | 
106 | function toFloat_1107296262(n_1107296263) {
107 |   var result_1107296264 = 0.0;
108 | 
109 |     result_1107296264 = n_1107296263;
110 | 
111 |   return result_1107296264;
112 | 
113 | }
114 | 
115 | function HEX2BHEX3D_855640050(x_855640052, x_855640052_Idx, y_855640053) {
116 |     x_855640052[x_855640052_Idx] = (x_855640052[x_855640052_Idx] + y_855640053);
117 | 
118 |   
119 | }
120 | 
121 | function polygon_452984853(x_452984854, y_452984855, radius_452984856, npoints_452984857) {
122 |     var angle_452984858 = (TWO_PI / npoints_452984857);
123 |     beginShape();
124 |     var a_452984859 = [0.0];
125 |     Label1: do {
126 |         Label2: while (true) {
127 |         if (!(a_452984859[0] < TWO_PI)) break Label2;
128 |           var sx_452984860 = (x_452984854 + (cos(a_452984859[0]) * radius_452984856));
129 |           var sy_452984861 = (y_452984855 + (sin(a_452984859[0]) * radius_452984856));
130 |           HEX2BHEX3D_855640050(a_452984859, 0, angle_452984858);
131 |           vertex(sx_452984860, sy_452984861);
132 |         }
133 |     } while (false);
134 |     endShape(CLOSE);
135 | 
136 |   
137 | }
138 | 
139 | function draw() {
140 |     background(102.0);
141 |     push();
142 |     fill(255.0, 204.0, 0.0);
143 |     translate((width * 0.2), (height * 0.5));
144 |     rotate((toFloat_1107296262(frameCount) / 200.0));
145 |     polygon_452984853(0.0, 0.0, 82.0, 3.0);
146 |     pop();
147 |     push();
148 |     fill("red");
149 |     translate((width * 0.5), (height * 0.5));
150 |     rotate((toFloat_1107296262(frameCount) / 50.0));
151 |     polygon_452984853(0.0, 0.0, 80.0, 20.0);
152 |     pop();
153 |     push();
154 |     fill("#fae");
155 |     translate((width * 0.8), (height * 0.5));
156 |     rotate((toFloat_1107296262(frameCount) / -100.0));
157 |     polygon_452984853(0.0, 0.0, 70.0, 7.0);
158 |     pop();
159 | 
160 |   
161 | }
162 | </script>
163 | </main>
164 | <footer>
165 | <hr>
166 | <div class="nb-box">
167 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
168 |   <span></span>
169 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
170 | </div>
171 | </footer>
172 | <section id="source">
173 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
174 | nbInit
175 | nbUseP5
176 | nb.addEntry(<span class="hljs-number">5</span>, <span class="hljs-string">&quot;Polygons&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
177 | 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).
178 | &quot;&quot;&quot;</span>)
179 | nbCodeDisplay(nbJsFromCode):
180 |   <span class="hljs-keyword">proc</span> polygon(x, y, radius, npoints: <span class="hljs-type">PNumber</span>) =
181 |     <span class="hljs-keyword">let</span> angle = <span class="hljs-type">TWO_PI</span> / npoints
182 |     beginShape()
183 |     <span class="hljs-keyword">var</span> a = <span class="hljs-number">0.0</span>
184 |     <span class="hljs-keyword">while</span> a &lt; <span class="hljs-type">TWO_PI</span>:
185 |       <span class="hljs-keyword">let</span> sx = x + cos(a) * radius
186 |       <span class="hljs-keyword">let</span> sy = y + sin(a) * radius
187 |       a += angle
188 |       vertex(sx, sy)
189 |     endShape(<span class="hljs-type">CLOSE</span>)
190 | 
191 |   setup:
192 |     createCanvas(<span class="hljs-number">720</span>, <span class="hljs-number">400</span>)
193 | 
194 |   draw:
195 |     background(<span class="hljs-number">102</span>) <span class="hljs-comment">## grayscale</span>
196 | 
197 |     push()
198 |     fill(<span class="hljs-number">255</span>, <span class="hljs-number">204</span>, <span class="hljs-number">0</span>) <span class="hljs-comment">## RGB integer values</span>
199 |     translate(width * <span class="hljs-number">0.2</span>, height * <span class="hljs-number">0.5</span>)
200 |     rotate(frameCount / <span class="hljs-number">200.0</span>)
201 |     polygon(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">82</span>, <span class="hljs-number">3</span>)
202 |     pop()
203 | 
204 |     push()
205 |     fill(<span class="hljs-string">&quot;red&quot;</span>) <span class="hljs-comment">## Named SVG/CSS color string</span>
206 |     translate(width * <span class="hljs-number">0.5</span>, height * <span class="hljs-number">0.5</span>)
207 |     rotate(frameCount / <span class="hljs-number">50.0</span>)
208 |     polygon(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">80</span>, <span class="hljs-number">20</span>)
209 |     pop()
210 | 
211 |     push()
212 |     fill(<span class="hljs-string">&quot;#fae&quot;</span>) <span class="hljs-comment">## three-digit (or six-digit) hexadecimal RGB notation</span>
213 |     translate(width * <span class="hljs-number">0.8</span>, height * <span class="hljs-number">0.5</span>)
214 |     rotate(frameCount / -<span class="hljs-number">100.0</span>)
215 |     polygon(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">70</span>, <span class="hljs-number">7</span>)
216 |     pop()
217 | 
218 | nbJsShowSource()
219 | nbSave</code></pre>
220 | </section><script>
221 | function toggleSourceDisplay() {
222 |   var btn = document.getElementById("show")
223 |   var source = document.getElementById("source");
224 |   if (btn.innerHTML=="Show Source") {
225 |     btn.innerHTML = "Hide Source";
226 |     source.style.display = "block";
227 |   } else {
228 |     btn.innerHTML = "Show Source";
229 |     source.style.display = "none";
230 |   }
231 | }
232 | </script></body>
233 | </html>


--------------------------------------------------------------------------------
/docs/keyboard.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>keyboard.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>keyboard.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>4. Keyboard</h2>
 47 | <p>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.</p>
 48 | 
 49 | <pre><code class="nim hljs"><span class="hljs-keyword">var</span> rectWidth: <span class="hljs-built_in">float</span>
 50 | 
 51 | setup:
 52 |   createCanvas(<span class="hljs-number">720</span>, <span class="hljs-number">400</span>)
 53 |   noStroke()
 54 |   background(<span class="hljs-number">230</span>)
 55 |   rectWidth = width / <span class="hljs-number">4</span>
 56 | 
 57 | draw:
 58 |   <span class="hljs-comment">## keep draw() here to continue looping while waiting for keys</span>
 59 |   <span class="hljs-keyword">discard</span>
 60 | 
 61 | keyPressed:
 62 |   <span class="hljs-keyword">var</span> keyIndex = -<span class="hljs-number">1</span>
 63 |   <span class="hljs-keyword">if</span> $key &gt;= <span class="hljs-string">&quot;a&quot;</span> <span class="hljs-keyword">and</span> $key &lt;= <span class="hljs-string">&quot;z&quot;</span>:
 64 |     keyIndex = ord(key[<span class="hljs-number">0</span>]) - ord(<span class="hljs-string">'a'</span>)
 65 |   <span class="hljs-keyword">if</span> keyIndex == -<span class="hljs-number">1</span>:
 66 |     <span class="hljs-comment">## If it's not a letter key, clear the screen</span>
 67 |     background(<span class="hljs-number">230</span>)
 68 |   <span class="hljs-keyword">else</span>:
 69 |     <span class="hljs-comment">## It's a letter key, fill a rectangle</span>
 70 |     <span class="hljs-keyword">let</span>
 71 |       randFill_r = floor(random() * <span class="hljs-number">255</span> + <span class="hljs-number">1</span>)
 72 |       randFill_g = floor(random() * <span class="hljs-number">255</span> + <span class="hljs-number">1</span>)
 73 |       randFill_b = floor(random() * <span class="hljs-number">255</span> + <span class="hljs-number">1</span>)
 74 |     fill(randFill_r, randFill_g, randFill_b)
 75 |     <span class="hljs-keyword">let</span> x = map(keyIndex, <span class="hljs-number">0</span>, <span class="hljs-number">25</span>, <span class="hljs-number">0</span>, width - rectWidth)
 76 |     rect(x, <span class="hljs-number">0</span>, rectWidth, height)</code></pre>
 77 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
 78 | var framePtr = null;
 79 | var excHandler = 0;
 80 | var lastJSError = null;
 81 | 
 82 | function cmpStrings(a_33556924, b_33556925) {
 83 |         if (a_33556924 == b_33556925) return 0;
 84 |     if (!a_33556924) return -1;
 85 |     if (!b_33556925) return 1;
 86 |     for (var i = 0; i < a_33556924.length && i < b_33556925.length; i++) {
 87 |       var result = a_33556924[i] - b_33556925[i];
 88 |       if (result != 0) return result;
 89 |     }
 90 |     return a_33556924.length - b_33556925.length;
 91 |   
 92 | 
 93 |   
 94 | }
 95 | 
 96 | function makeNimstrLit(c_33556802) {
 97 |       var result = [];
 98 |   for (var i = 0; i < c_33556802.length; ++i) {
 99 |     result[i] = c_33556802.charCodeAt(i);
100 |   }
101 |   return result;
102 |   
103 | 
104 |   
105 | }
106 | 
107 | function cstrToNimstr(c_33556805) {
108 |       var ln = c_33556805.length;
109 |   var result = new Array(ln);
110 |   var r = 0;
111 |   for (var i = 0; i < ln; ++i) {
112 |     var ch = c_33556805.charCodeAt(i);
113 | 
114 |     if (ch < 128) {
115 |       result[r] = ch;
116 |     }
117 |     else {
118 |       if (ch < 2048) {
119 |         result[r] = (ch >> 6) | 192;
120 |       }
121 |       else {
122 |         if (ch < 55296 || ch >= 57344) {
123 |           result[r] = (ch >> 12) | 224;
124 |         }
125 |         else {
126 |             ++i;
127 |             ch = 65536 + (((ch & 1023) << 10) | (c_33556805.charCodeAt(i) & 1023));
128 |             result[r] = (ch >> 18) | 240;
129 |             ++r;
130 |             result[r] = ((ch >> 12) & 63) | 128;
131 |         }
132 |         ++r;
133 |         result[r] = ((ch >> 6) & 63) | 128;
134 |       }
135 |       ++r;
136 |       result[r] = (ch & 63) | 128;
137 |     }
138 |     ++r;
139 |   }
140 |   return result;
141 |   
142 | 
143 |   
144 | }
145 | if (!Math.trunc) {
146 |   Math.trunc = function(v) {
147 |     v = +v;
148 |     if (!isFinite(v)) return v;
149 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
150 |   };
151 | }
152 | 
153 | var objectID_620757154 = [0];
154 | 
155 | function setup() {
156 |     createCanvas(720.0, 400.0);
157 |     noStroke();
158 |     background(230.0);
159 |     rectWidth_452984853[0] = (width / 4.0);
160 | 
161 |   
162 | }
163 | 
164 | function draw() {
165 |   
166 | }
167 | 
168 | function toFloat_1107296262(n_1107296263) {
169 |   var result_1107296264 = 0.0;
170 | 
171 |     result_1107296264 = n_1107296263;
172 | 
173 |   return result_1107296264;
174 | 
175 | }
176 | 
177 | function keyPressed() {
178 |       var Temporary1;
179 | 
180 |     var keyIndex_452984857 = -1;
181 |       if (!(cmpStrings(makeNimstrLit("a"), cstrToNimstr(key)) <= 0)) Temporary1 = false; else {        Temporary1 = (cmpStrings(cstrToNimstr(key), makeNimstrLit("z")) <= 0);      }    if (Temporary1) {
182 |     keyIndex_452984857 = (key.charCodeAt(0) - 97);
183 |     }
184 |     
185 |     if ((keyIndex_452984857 == -1)) {
186 |     background(230.0);
187 |     }
188 |     else {
189 |       var randFill_r_452984864 = floor(((random() * 255.0) + 1.0));
190 |       var randFill_g_452984865 = floor(((random() * 255.0) + 1.0));
191 |       var randFill_b_452984866 = floor(((random() * 255.0) + 1.0));
192 |       fill(toFloat_1107296262(randFill_r_452984864), toFloat_1107296262(randFill_g_452984865), toFloat_1107296262(randFill_b_452984866));
193 |       var x_452984867 = map(toFloat_1107296262(keyIndex_452984857), 0.0, 25.0, 0.0, (width - rectWidth_452984853[0]));
194 |       rect(x_452984867, 0.0, rectWidth_452984853[0], height);
195 |     }
196 |     
197 | 
198 |   
199 | }
200 | var rectWidth_452984853 = [0.0];
201 | </script>
202 | </main>
203 | <footer>
204 | <hr>
205 | <div class="nb-box">
206 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
207 |   <span></span>
208 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
209 | </div>
210 | </footer>
211 | <section id="source">
212 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
213 | nbInit
214 | nbUseP5
215 | nb.addEntry(<span class="hljs-number">4</span>, <span class="hljs-string">&quot;Keyboard&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
216 | 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.
217 | &quot;&quot;&quot;</span>)
218 | nbCodeDisplay(nbJsFromCode):
219 |   <span class="hljs-keyword">var</span> rectWidth: <span class="hljs-built_in">float</span>
220 |   
221 |   setup:
222 |     createCanvas(<span class="hljs-number">720</span>, <span class="hljs-number">400</span>)
223 |     noStroke()
224 |     background(<span class="hljs-number">230</span>)
225 |     rectWidth = width / <span class="hljs-number">4</span>
226 |   
227 |   draw:
228 |     <span class="hljs-comment">## keep draw() here to continue looping while waiting for keys</span>
229 |     <span class="hljs-keyword">discard</span>
230 |   
231 |   keyPressed:
232 |     <span class="hljs-keyword">var</span> keyIndex = -<span class="hljs-number">1</span>
233 |     <span class="hljs-keyword">if</span> $key &gt;= <span class="hljs-string">&quot;a&quot;</span> <span class="hljs-keyword">and</span> $key &lt;= <span class="hljs-string">&quot;z&quot;</span>:
234 |       keyIndex = ord(key[<span class="hljs-number">0</span>]) - ord(<span class="hljs-string">'a'</span>)
235 |     <span class="hljs-keyword">if</span> keyIndex == -<span class="hljs-number">1</span>:
236 |       <span class="hljs-comment">## If it's not a letter key, clear the screen</span>
237 |       background(<span class="hljs-number">230</span>)
238 |     <span class="hljs-keyword">else</span>:
239 |       <span class="hljs-comment">## It's a letter key, fill a rectangle</span>
240 |       <span class="hljs-keyword">let</span>
241 |         randFill_r = floor(random() * <span class="hljs-number">255</span> + <span class="hljs-number">1</span>)
242 |         randFill_g = floor(random() * <span class="hljs-number">255</span> + <span class="hljs-number">1</span>)
243 |         randFill_b = floor(random() * <span class="hljs-number">255</span> + <span class="hljs-number">1</span>)
244 |       fill(randFill_r, randFill_g, randFill_b)
245 |       <span class="hljs-keyword">let</span> x = map(keyIndex, <span class="hljs-number">0</span>, <span class="hljs-number">25</span>, <span class="hljs-number">0</span>, width - rectWidth)
246 |       rect(x, <span class="hljs-number">0</span>, rectWidth, height)
247 | 
248 | nbJsShowSource()
249 | nbSave</code></pre>
250 | </section><script>
251 | function toggleSourceDisplay() {
252 |   var btn = document.getElementById("show")
253 |   var source = document.getElementById("source");
254 |   if (btn.innerHTML=="Show Source") {
255 |     btn.innerHTML = "Hide Source";
256 |     source.style.display = "block";
257 |   } else {
258 |     btn.innerHTML = "Show Source";
259 |     source.style.display = "none";
260 |   }
261 | }
262 | </script></body>
263 | </html>


--------------------------------------------------------------------------------
/docs/sinewave.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>sinewave.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>sinewave.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>8. Sine Wave</h2>
 47 | <p>Render a simple sine wave. Original by Daniel Shiffman <a href="https://p5js.org/examples/math-sine-wave.html">https://p5js.org/examples/math-sine-wave.html</a></p>
 48 | 
 49 | <pre><code class="nim hljs"><span class="hljs-keyword">const</span> xspacing = <span class="hljs-number">16</span> <span class="hljs-comment"># Distance between each horizontal location</span>
 50 | <span class="hljs-keyword">const</span> amplitude = <span class="hljs-number">75.0</span> <span class="hljs-comment"># Height of wave</span>
 51 | <span class="hljs-keyword">const</span> period = <span class="hljs-number">500.0</span> <span class="hljs-comment"># How many pixels before the wave repeats</span>
 52 | 
 53 | <span class="hljs-keyword">var</span> theta: <span class="hljs-built_in">float</span> <span class="hljs-comment">#  Start angle at 0</span>
 54 | <span class="hljs-keyword">var</span> yvalues: <span class="hljs-built_in">seq</span>[<span class="hljs-built_in">float</span>]
 55 | 
 56 | <span class="hljs-keyword">proc</span> calcWave =
 57 |   theta+=<span class="hljs-number">0.02</span>
 58 |   <span class="hljs-keyword">let</span> dx = (<span class="hljs-type">TWO_PI</span> / period) * xspacing
 59 |   <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> <span class="hljs-number">0.</span>.yvalues.len:
 60 |     yvalues[x] = sin(x*dx+theta)*amplitude
 61 | 
 62 | <span class="hljs-keyword">proc</span> renderWave =
 63 |   noStroke()
 64 |   colorMode(<span class="hljs-type">HSB</span>, <span class="hljs-number">100</span>)
 65 |   fill(<span class="hljs-number">0</span>)
 66 |   <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> <span class="hljs-number">0.</span>.yvalues.len:
 67 |     fill(<span class="hljs-number">25</span>+x*<span class="hljs-number">2</span>, <span class="hljs-number">100</span>, <span class="hljs-number">50</span>)
 68 |     ellipse(x*xspacing, height/<span class="hljs-number">2</span>+yvalues[x], <span class="hljs-number">16</span>, <span class="hljs-number">16</span>)
 69 | 
 70 | setup:
 71 |   theta = <span class="hljs-number">0.0</span>
 72 |   createCanvas(<span class="hljs-number">710</span>, <span class="hljs-number">400</span>)
 73 |   <span class="hljs-keyword">let</span> nelements = (width+<span class="hljs-number">16</span>)/xspacing
 74 |   yvalues = newSeq[<span class="hljs-built_in">float</span>](nelements.<span class="hljs-built_in">int</span>)
 75 | 
 76 | draw:
 77 |   background(<span class="hljs-number">0</span>)
 78 |   calcWave()
 79 |   renderWave()</code></pre>
 80 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
 81 | var framePtr = null;
 82 | var excHandler = 0;
 83 | var lastJSError = null;
 84 | var NTI33554435 = {size: 0,kind: 36,base: null,node: null,finalizer: null};
 85 | var NTI452984892 = {size: 0, kind: 24, base: null, node: null, finalizer: null};
 86 | NTI452984892.base = NTI33554435;
 87 | 
 88 | function setConstr() {
 89 |         var result = {};
 90 |     for (var i = 0; i < arguments.length; ++i) {
 91 |       var x = arguments[i];
 92 |       if (typeof(x) == "object") {
 93 |         for (var j = x[0]; j <= x[1]; ++j) {
 94 |           result[j] = true;
 95 |         }
 96 |       } else {
 97 |         result[x] = true;
 98 |       }
 99 |     }
100 |     return result;
101 |   
102 | 
103 |   
104 | }
105 | var ConstSet1 = setConstr(17, 16, 4, 18, 27, 19, 23, 22, 21);
106 | 
107 | function nimCopy(dest_33557141, src_33557142, ti_33557143) {
108 |   var result_33557152 = null;
109 | 
110 |     switch (ti_33557143.kind) {
111 |     case 21:
112 |     case 22:
113 |     case 23:
114 |     case 5:
115 |       if (!(isFatPointer_33557132(ti_33557143))) {
116 |       result_33557152 = src_33557142;
117 |       }
118 |       else {
119 |         result_33557152 = [src_33557142[0], src_33557142[1]];
120 |       }
121 |       
122 |       break;
123 |     case 19:
124 |             if (dest_33557141 === null || dest_33557141 === undefined) {
125 |         dest_33557141 = {};
126 |       }
127 |       else {
128 |         for (var key in dest_33557141) { delete dest_33557141[key]; }
129 |       }
130 |       for (var key in src_33557142) { dest_33557141[key] = src_33557142[key]; }
131 |       result_33557152 = dest_33557141;
132 |     
133 |       break;
134 |     case 18:
135 |     case 17:
136 |       if (!((ti_33557143.base == null))) {
137 |       result_33557152 = nimCopy(dest_33557141, src_33557142, ti_33557143.base);
138 |       }
139 |       else {
140 |       if ((ti_33557143.kind == 17)) {
141 |       result_33557152 = (dest_33557141 === null || dest_33557141 === undefined) ? {m_type: ti_33557143} : dest_33557141;
142 |       }
143 |       else {
144 |         result_33557152 = (dest_33557141 === null || dest_33557141 === undefined) ? {} : dest_33557141;
145 |       }
146 |       }
147 |       nimCopyAux(result_33557152, src_33557142, ti_33557143.node);
148 |       break;
149 |     case 24:
150 |     case 4:
151 |     case 27:
152 |     case 16:
153 |             if (src_33557142 === null) {
154 |         result_33557152 = null;
155 |       }
156 |       else {
157 |         if (dest_33557141 === null || dest_33557141 === undefined || dest_33557141.length != src_33557142.length) {
158 |           dest_33557141 = new Array(src_33557142.length);
159 |         }
160 |         result_33557152 = dest_33557141;
161 |         for (var i = 0; i < src_33557142.length; ++i) {
162 |           result_33557152[i] = nimCopy(result_33557152[i], src_33557142[i], ti_33557143.base);
163 |         }
164 |       }
165 |     
166 |       break;
167 |     case 28:
168 |             if (src_33557142 !== null) {
169 |         result_33557152 = src_33557142.slice(0);
170 |       }
171 |     
172 |       break;
173 |     default: 
174 |       result_33557152 = src_33557142;
175 |       break;
176 |     }
177 | 
178 |   return result_33557152;
179 | 
180 | }
181 | if (!Math.trunc) {
182 |   Math.trunc = function(v) {
183 |     v = +v;
184 |     if (!isFinite(v)) return v;
185 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
186 |   };
187 | }
188 | 
189 | var objectID_620757154 = [0];
190 | var theta_452984856 = [0.0];
191 | var yvalues_452984857 = [[]];
192 | 
193 | function newSeq_452984888(len_452984890) {
194 |   var result_452984891 = [];
195 | 
196 |     result_452984891 = new Array(len_452984890); for (var i = 0 ; i < len_452984890 ; ++i) { result_452984891[i] = 0.0; }
197 |   return result_452984891;
198 | 
199 | }
200 | 
201 | function isFatPointer_33557132(ti_33557133) {
202 |   var result_33557134 = false;
203 | 
204 |   BeforeRet: do {
205 |     result_33557134 = !((ConstSet1[ti_33557133.base.kind] != undefined));
206 |     break BeforeRet;
207 |   } while (false);
208 | 
209 |   return result_33557134;
210 | 
211 | }
212 | 
213 | function nimCopyAux(dest_33557145, src_33557146, n_33557147) {
214 |     switch (n_33557147.kind) {
215 |     case 0:
216 |       break;
217 |     case 1:
218 |             dest_33557145[n_33557147.offset] = nimCopy(dest_33557145[n_33557147.offset], src_33557146[n_33557147.offset], n_33557147.typ);
219 |     
220 |       break;
221 |     case 2:
222 |           for (var i = 0; i < n_33557147.sons.length; i++) {
223 |       nimCopyAux(dest_33557145, src_33557146, n_33557147.sons[i]);
224 |     }
225 |     
226 |       break;
227 |     case 3:
228 |             dest_33557145[n_33557147.offset] = nimCopy(dest_33557145[n_33557147.offset], src_33557146[n_33557147.offset], n_33557147.typ);
229 |       for (var i = 0; i < n_33557147.sons.length; ++i) {
230 |         nimCopyAux(dest_33557145, src_33557146, n_33557147.sons[i][1]);
231 |       }
232 |     
233 |       break;
234 |     }
235 | 
236 |   
237 | }
238 | 
239 | function setup() {
240 |     theta_452984856[0] = 0.0;
241 |     createCanvas(710.0, 400.0);
242 |     var nelements_452984883 = ((width + 16.0) / 16.0);
243 |     yvalues_452984857[0] = nimCopy(null, newSeq_452984888(((nelements_452984883) | 0)), NTI452984892);
244 | 
245 |   
246 | }
247 | 
248 | function HEX2BHEX3D_855640050(x_855640052, x_855640052_Idx, y_855640053) {
249 |     x_855640052[x_855640052_Idx] = (x_855640052[x_855640052_Idx] + y_855640053);
250 | 
251 |   
252 | }
253 | 
254 | function toFloat_1107296262(n_1107296263) {
255 |   var result_1107296264 = 0.0;
256 | 
257 |     result_1107296264 = n_1107296263;
258 | 
259 |   return result_1107296264;
260 | 
261 | }
262 | 
263 | function calcWave_452984858() {
264 |     HEX2BHEX3D_855640050(theta_452984856, 0, 0.02);
265 |     var dx_452984863 = ((TWO_PI / 500.0) * 16.0);
266 |     Label1: do {
267 |       var x_452984872 = 0;
268 |       var colontmp__452984898 = 0;
269 |       colontmp__452984898 = (yvalues_452984857[0]).length;
270 |       var res_452984899 = 0;
271 |       Label2: do {
272 |           Label3: while (true) {
273 |           if (!(res_452984899 <= colontmp__452984898)) break Label3;
274 |             x_452984872 = res_452984899;
275 |             yvalues_452984857[0][x_452984872] = (sin(((toFloat_1107296262(x_452984872) * dx_452984863) + theta_452984856[0])) * 75.0);
276 |             res_452984899 += 1;
277 |           }
278 |       } while (false);
279 |     } while (false);
280 | 
281 |   
282 | }
283 | 
284 | function renderWave_452984873() {
285 |     noStroke();
286 |     colorMode(HSB, 100.0);
287 |     fill(0.0);
288 |     Label1: do {
289 |       var x_452984881 = 0;
290 |       var colontmp__452984902 = 0;
291 |       colontmp__452984902 = (yvalues_452984857[0]).length;
292 |       var res_452984903 = 0;
293 |       Label2: do {
294 |           Label3: while (true) {
295 |           if (!(res_452984903 <= colontmp__452984902)) break Label3;
296 |             x_452984881 = res_452984903;
297 |             fill(toFloat_1107296262((25 + (x_452984881 * 2))), 100.0, 50.0);
298 |             ellipse(toFloat_1107296262((x_452984881 * 16)), ((height / 2.0) + yvalues_452984857[0][x_452984881]), 16.0, 16.0);
299 |             res_452984903 += 1;
300 |           }
301 |       } while (false);
302 |     } while (false);
303 | 
304 |   
305 | }
306 | 
307 | function draw() {
308 |     background(0.0);
309 |     calcWave_452984858();
310 |     renderWave_452984873();
311 | 
312 |   
313 | }
314 | </script>
315 | </main>
316 | <footer>
317 | <hr>
318 | <div class="nb-box">
319 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
320 |   <span></span>
321 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
322 | </div>
323 | </footer>
324 | <section id="source">
325 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
326 | nbInit
327 | nbUseP5
328 | nb.addEntry(<span class="hljs-number">8</span>, <span class="hljs-string">&quot;Sine Wave&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
329 | Render a simple sine wave. Original by Daniel Shiffman &lt;https://p5js.org/examples/math-sine-wave.html&gt;
330 | &quot;&quot;&quot;</span>)
331 | nbCodeDisplay(nbJsFromCode):
332 |   <span class="hljs-keyword">const</span> xspacing = <span class="hljs-number">16</span> <span class="hljs-comment"># Distance between each horizontal location</span>
333 |   <span class="hljs-keyword">const</span> amplitude = <span class="hljs-number">75.0</span> <span class="hljs-comment"># Height of wave</span>
334 |   <span class="hljs-keyword">const</span> period = <span class="hljs-number">500.0</span> <span class="hljs-comment"># How many pixels before the wave repeats</span>
335 | 
336 |   <span class="hljs-keyword">var</span> theta: <span class="hljs-built_in">float</span> <span class="hljs-comment">#  Start angle at 0</span>
337 |   <span class="hljs-keyword">var</span> yvalues: <span class="hljs-built_in">seq</span>[<span class="hljs-built_in">float</span>]
338 | 
339 |   <span class="hljs-keyword">proc</span> calcWave =
340 |     theta+=<span class="hljs-number">0.02</span>
341 |     <span class="hljs-keyword">let</span> dx = (<span class="hljs-type">TWO_PI</span> / period) * xspacing
342 |     <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> <span class="hljs-number">0.</span>.yvalues.len:
343 |       yvalues[x] = sin(x*dx+theta)*amplitude
344 | 
345 |   <span class="hljs-keyword">proc</span> renderWave =
346 |     noStroke()
347 |     colorMode(<span class="hljs-type">HSB</span>, <span class="hljs-number">100</span>)
348 |     fill(<span class="hljs-number">0</span>)
349 |     <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> <span class="hljs-number">0.</span>.yvalues.len:
350 |       fill(<span class="hljs-number">25</span>+x*<span class="hljs-number">2</span>, <span class="hljs-number">100</span>, <span class="hljs-number">50</span>)
351 |       ellipse(x*xspacing, height/<span class="hljs-number">2</span>+yvalues[x], <span class="hljs-number">16</span>, <span class="hljs-number">16</span>)
352 | 
353 |   setup:
354 |     theta = <span class="hljs-number">0.0</span>
355 |     createCanvas(<span class="hljs-number">710</span>, <span class="hljs-number">400</span>)
356 |     <span class="hljs-keyword">let</span> nelements = (width+<span class="hljs-number">16</span>)/xspacing
357 |     yvalues = newSeq[<span class="hljs-built_in">float</span>](nelements.<span class="hljs-built_in">int</span>)
358 | 
359 |   draw:
360 |     background(<span class="hljs-number">0</span>)
361 |     calcWave()
362 |     renderWave()
363 | 
364 | nbJsShowSource()
365 | nbSave
366 | </code></pre>
367 | </section><script>
368 | function toggleSourceDisplay() {
369 |   var btn = document.getElementById("show")
370 |   var source = document.getElementById("source");
371 |   if (btn.innerHTML=="Show Source") {
372 |     btn.innerHTML = "Hide Source";
373 |     source.style.display = "block";
374 |   } else {
375 |     btn.innerHTML = "Show Source";
376 |     source.style.display = "none";
377 |   }
378 | }
379 | </script></body>
380 | </html>


--------------------------------------------------------------------------------
/docs/okazz_220919a.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>okazz_220919a.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>okazz_220919a.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>6. Okazz 220919a</h2>
 47 | <p>Art by <a href="https://openprocessing.org/user/128718?view=sketches&o=31">Okazz</a>,
 48 | original at <a href="https://openprocessing.org/sketch/1653811">openprocessing.org/sketch/1653811</a>.</p>
 49 | <p>License is <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CreativeCommons Attribution NonCommercial ShareAlike</a>.</p>
 50 | <p>The original sketch has been ported from p5js to p5nim.</p>
 51 | 
 52 | <pre><code class="nim hljs"><span class="hljs-keyword">var</span> colors = @[<span class="hljs-string">&quot;#f70640&quot;</span>, <span class="hljs-string">&quot;#f78e2c&quot;</span>, <span class="hljs-string">&quot;#fdd903&quot;</span>, <span class="hljs-string">&quot;#cae509&quot;</span>, <span class="hljs-string">&quot;#63be93&quot;</span>, <span class="hljs-string">&quot;#81cfe5&quot;</span>, <span class="hljs-string">&quot;#299dbf&quot;</span>, <span class="hljs-string">&quot;#38187d&quot;</span>, <span class="hljs-string">&quot;#a4459f&quot;</span>, <span class="hljs-string">&quot;#f654a9&quot;</span>, <span class="hljs-string">&quot;#2F0A30&quot;</span>];
 53 | 
 54 | <span class="hljs-keyword">type</span>
 55 |   <span class="hljs-type">Form</span> = <span class="hljs-keyword">ref</span> <span class="hljs-keyword">object</span>
 56 |     x, y, x0, y0, r0, r, d0, d: <span class="hljs-built_in">float</span>
 57 |     a, t, r1, r2, r3: <span class="hljs-built_in">float</span> 
 58 |     n: <span class="hljs-built_in">int</span>
 59 |     col: <span class="hljs-built_in">string</span>
 60 | 
 61 | <span class="hljs-keyword">var</span> forms: <span class="hljs-built_in">seq</span>[<span class="hljs-type">Form</span>]
 62 | 
 63 | <span class="hljs-keyword">proc</span> newForm(x, y: <span class="hljs-built_in">float</span>): <span class="hljs-type">Form</span> =
 64 |   <span class="hljs-literal">result</span> = <span class="hljs-keyword">new</span> <span class="hljs-type">Form</span>
 65 |   <span class="hljs-literal">result</span>.x = x
 66 |   <span class="hljs-literal">result</span>.y = y
 67 |   <span class="hljs-literal">result</span>.x0 = x
 68 |   <span class="hljs-literal">result</span>.y0 = y
 69 |   <span class="hljs-literal">result</span>.r0 = random(<span class="hljs-number">10</span>, <span class="hljs-number">25</span>)
 70 |   <span class="hljs-literal">result</span>.r = <span class="hljs-literal">result</span>.r0
 71 |   <span class="hljs-literal">result</span>.d0 = random(<span class="hljs-number">15</span>) * random() + <span class="hljs-number">5</span>
 72 |   <span class="hljs-literal">result</span>.d = <span class="hljs-literal">result</span>.d0
 73 |   <span class="hljs-literal">result</span>.n = <span class="hljs-built_in">int</span>(random(<span class="hljs-number">3</span>, <span class="hljs-number">13</span>))
 74 |   <span class="hljs-literal">result</span>.a = random(<span class="hljs-number">100</span>)
 75 |   <span class="hljs-literal">result</span>.t = random(<span class="hljs-number">10000</span>)
 76 |   <span class="hljs-literal">result</span>.r1 = random(<span class="hljs-number">0.01</span>)
 77 |   <span class="hljs-literal">result</span>.r2 = random(<span class="hljs-number">0.01</span>)
 78 |   <span class="hljs-literal">result</span>.r3 = random(<span class="hljs-number">0.01</span>)
 79 |   <span class="hljs-literal">result</span>.col = random(colors)
 80 | 
 81 | <span class="hljs-keyword">proc</span> show(form: <span class="hljs-type">Form</span>) =
 82 |   noStroke()
 83 |   fill(form.col)
 84 |   push()
 85 |   translate(form.x, form.y)
 86 |   rotate(form.a)
 87 |   <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; form.n:
 88 |     <span class="hljs-keyword">let</span> theta = map(i, <span class="hljs-number">0</span>, form.n, <span class="hljs-number">0</span>, <span class="hljs-type">TAU</span>)
 89 |     ellipse(form.r * cos(theta), form.r * sin(theta), form.d, form.d)
 90 |   pop()
 91 | 
 92 | <span class="hljs-keyword">proc</span> move(form: <span class="hljs-type">Form</span>) =
 93 |   form.t += <span class="hljs-number">1</span>
 94 |   form.a = <span class="hljs-type">TAU</span> * sin(form.t * form.r1);
 95 |   form.r = form.r0 * sin(form.t * form.r2);
 96 |   form.d = form.d0 * sin(form.t * form.r3);
 97 |   form.x += <span class="hljs-number">0.5</span>;
 98 |   form.y -= <span class="hljs-number">0.5</span>;
 99 |   <span class="hljs-keyword">if</span> form.x &gt; width:
100 |     form.x = <span class="hljs-number">0</span>
101 |   <span class="hljs-keyword">if</span> form.y &lt; <span class="hljs-number">0</span>:
102 |     form.y = height
103 | 
104 | setup:
105 |   createCanvas(<span class="hljs-number">900</span>, <span class="hljs-number">900</span>)
106 | 
107 |   <span class="hljs-keyword">var</span> c = <span class="hljs-number">18</span>
108 |   <span class="hljs-keyword">var</span> w = width / c
109 |   <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; c:
110 |     <span class="hljs-keyword">for</span> j <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; c:
111 |       <span class="hljs-keyword">let</span> x = i * w + w / <span class="hljs-number">2</span>;
112 |       <span class="hljs-keyword">let</span> y = j * w + w / <span class="hljs-number">2</span>;
113 |       <span class="hljs-keyword">if</span> ((i + j) <span class="hljs-keyword">mod</span> <span class="hljs-number">2</span> == <span class="hljs-number">0</span>):
114 |         <span class="hljs-keyword">for</span> k <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-number">5</span>:
115 |           forms.add(newForm(x, y))
116 |   background(<span class="hljs-number">0</span>)
117 | 
118 | draw:
119 | 
120 |   translate(width / <span class="hljs-number">2</span>, height / <span class="hljs-number">2</span>)
121 |   scale(<span class="hljs-number">1.1</span>)
122 |   translate(-width / <span class="hljs-number">2</span>, -height / <span class="hljs-number">2</span>)
123 |   background(<span class="hljs-number">255</span>)
124 |   <span class="hljs-keyword">for</span> f <span class="hljs-keyword">in</span> forms:
125 |     f.show()
126 |     f.move()</code></pre>
127 | 
128 | <p>press 's' to export a 2 second gif</p>
129 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
130 | var framePtr = null;
131 | var excHandler = 0;
132 | var lastJSError = null;
133 | var NTI33554439 = {size: 0,kind: 28,base: null,node: null,finalizer: null};
134 | 
135 | function makeNimstrLit(c_33556802) {
136 |       var result = [];
137 |   for (var i = 0; i < c_33556802.length; ++i) {
138 |     result[i] = c_33556802.charCodeAt(i);
139 |   }
140 |   return result;
141 |   
142 | 
143 |   
144 | }
145 | 
146 | function setConstr() {
147 |         var result = {};
148 |     for (var i = 0; i < arguments.length; ++i) {
149 |       var x = arguments[i];
150 |       if (typeof(x) == "object") {
151 |         for (var j = x[0]; j <= x[1]; ++j) {
152 |           result[j] = true;
153 |         }
154 |       } else {
155 |         result[x] = true;
156 |       }
157 |     }
158 |     return result;
159 |   
160 | 
161 |   
162 | }
163 | var ConstSet1 = setConstr(17, 16, 4, 18, 27, 19, 23, 22, 21);
164 | 
165 | function nimCopy(dest_33557141, src_33557142, ti_33557143) {
166 |   var result_33557152 = null;
167 | 
168 |     switch (ti_33557143.kind) {
169 |     case 21:
170 |     case 22:
171 |     case 23:
172 |     case 5:
173 |       if (!(isFatPointer_33557132(ti_33557143))) {
174 |       result_33557152 = src_33557142;
175 |       }
176 |       else {
177 |         result_33557152 = [src_33557142[0], src_33557142[1]];
178 |       }
179 |       
180 |       break;
181 |     case 19:
182 |             if (dest_33557141 === null || dest_33557141 === undefined) {
183 |         dest_33557141 = {};
184 |       }
185 |       else {
186 |         for (var key in dest_33557141) { delete dest_33557141[key]; }
187 |       }
188 |       for (var key in src_33557142) { dest_33557141[key] = src_33557142[key]; }
189 |       result_33557152 = dest_33557141;
190 |     
191 |       break;
192 |     case 18:
193 |     case 17:
194 |       if (!((ti_33557143.base == null))) {
195 |       result_33557152 = nimCopy(dest_33557141, src_33557142, ti_33557143.base);
196 |       }
197 |       else {
198 |       if ((ti_33557143.kind == 17)) {
199 |       result_33557152 = (dest_33557141 === null || dest_33557141 === undefined) ? {m_type: ti_33557143} : dest_33557141;
200 |       }
201 |       else {
202 |         result_33557152 = (dest_33557141 === null || dest_33557141 === undefined) ? {} : dest_33557141;
203 |       }
204 |       }
205 |       nimCopyAux(result_33557152, src_33557142, ti_33557143.node);
206 |       break;
207 |     case 24:
208 |     case 4:
209 |     case 27:
210 |     case 16:
211 |             if (src_33557142 === null) {
212 |         result_33557152 = null;
213 |       }
214 |       else {
215 |         if (dest_33557141 === null || dest_33557141 === undefined || dest_33557141.length != src_33557142.length) {
216 |           dest_33557141 = new Array(src_33557142.length);
217 |         }
218 |         result_33557152 = dest_33557141;
219 |         for (var i = 0; i < src_33557142.length; ++i) {
220 |           result_33557152[i] = nimCopy(result_33557152[i], src_33557142[i], ti_33557143.base);
221 |         }
222 |       }
223 |     
224 |       break;
225 |     case 28:
226 |             if (src_33557142 !== null) {
227 |         result_33557152 = src_33557142.slice(0);
228 |       }
229 |     
230 |       break;
231 |     default: 
232 |       result_33557152 = src_33557142;
233 |       break;
234 |     }
235 | 
236 |   return result_33557152;
237 | 
238 | }
239 | 
240 | function toJSStr(s_33556808) {
241 |                     var Temporary5;
242 |             var Temporary7;
243 | 
244 |   var result_33556809 = null;
245 | 
246 |     var res_33556843 = newSeq_33556826((s_33556808).length);
247 |     var i_33556844 = 0;
248 |     var j_33556845 = 0;
249 |     Label1: do {
250 |         Label2: while (true) {
251 |         if (!(i_33556844 < (s_33556808).length)) break Label2;
252 |           var c_33556846 = s_33556808[i_33556844];
253 |           if ((c_33556846 < 128)) {
254 |           res_33556843[j_33556845] = String.fromCharCode(c_33556846);
255 |           i_33556844 += 1;
256 |           }
257 |           else {
258 |             var helper_33556858 = newSeq_33556826(0);
259 |             Label3: do {
260 |                 Label4: while (true) {
261 |                 if (!true) break Label4;
262 |                   var code_33556859 = c_33556846.toString(16);
263 |                   if ((((code_33556859) == null ? 0 : (code_33556859).length) == 1)) {
264 |                   helper_33556858.push("%0");;
265 |                   }
266 |                   else {
267 |                   helper_33556858.push("%");;
268 |                   }
269 |                   
270 |                   helper_33556858.push(code_33556859);;
271 |                   i_33556844 += 1;
272 |                     if (((s_33556808).length <= i_33556844)) Temporary5 = true; else {                      Temporary5 = (s_33556808[i_33556844] < 128);                    }                  if (Temporary5) {
273 |                   break Label3;
274 |                   }
275 |                   
276 |                   c_33556846 = s_33556808[i_33556844];
277 |                 }
278 |             } while (false);
279 | ++excHandler;
280 |             Temporary7 = framePtr;
281 |             try {
282 |             res_33556843[j_33556845] = decodeURIComponent(helper_33556858.join(""));
283 | --excHandler;
284 | } catch (EXCEPTION) {
285 |  var prevJSError = lastJSError;
286 |  lastJSError = EXCEPTION;
287 |  --excHandler;
288 |             framePtr = Temporary7;
289 |             res_33556843[j_33556845] = helper_33556858.join("");
290 |             lastJSError = prevJSError;
291 |             } finally {
292 |             framePtr = Temporary7;
293 |             }
294 |           }
295 |           
296 |           j_33556845 += 1;
297 |         }
298 |     } while (false);
299 |     if (res_33556843.length < j_33556845) { for (var i = res_33556843.length ; i < j_33556845 ; ++i) res_33556843.push(null); }
300 |                else { res_33556843.length = j_33556845; };
301 |     result_33556809 = res_33556843.join("");
302 | 
303 |   return result_33556809;
304 | 
305 | }
306 | 
307 | function eqStrings(a_33556932, b_33556933) {
308 |         if (a_33556932 == b_33556933) return true;
309 |     if (a_33556932 === null && b_33556933.length == 0) return true;
310 |     if (b_33556933 === null && a_33556932.length == 0) return true;
311 |     if ((!a_33556932) || (!b_33556933)) return false;
312 |     var alen = a_33556932.length;
313 |     if (alen != b_33556933.length) return false;
314 |     for (var i = 0; i < alen; ++i)
315 |       if (a_33556932[i] != b_33556933[i]) return false;
316 |     return true;
317 |   
318 | 
319 |   
320 | }
321 | 
322 | function cstrToNimstr(c_33556805) {
323 |       var ln = c_33556805.length;
324 |   var result = new Array(ln);
325 |   var r = 0;
326 |   for (var i = 0; i < ln; ++i) {
327 |     var ch = c_33556805.charCodeAt(i);
328 | 
329 |     if (ch < 128) {
330 |       result[r] = ch;
331 |     }
332 |     else {
333 |       if (ch < 2048) {
334 |         result[r] = (ch >> 6) | 192;
335 |       }
336 |       else {
337 |         if (ch < 55296 || ch >= 57344) {
338 |           result[r] = (ch >> 12) | 224;
339 |         }
340 |         else {
341 |             ++i;
342 |             ch = 65536 + (((ch & 1023) << 10) | (c_33556805.charCodeAt(i) & 1023));
343 |             result[r] = (ch >> 18) | 240;
344 |             ++r;
345 |             result[r] = ((ch >> 12) & 63) | 128;
346 |         }
347 |         ++r;
348 |         result[r] = ((ch >> 6) & 63) | 128;
349 |       }
350 |       ++r;
351 |       result[r] = (ch & 63) | 128;
352 |     }
353 |     ++r;
354 |   }
355 |   return result;
356 |   
357 | 
358 |   
359 | }
360 | 
361 | function rawEcho() {
362 |           var buf = "";
363 |       for (var i = 0; i < arguments.length; ++i) {
364 |         buf += toJSStr(arguments[i]);
365 |       }
366 |       console.log(buf);
367 |     
368 | 
369 |   
370 | }
371 | if (!Math.trunc) {
372 |   Math.trunc = function(v) {
373 |     v = +v;
374 |     if (!isFinite(v)) return v;
375 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
376 |   };
377 | }
378 | 
379 | var objectID_620757154 = [0];
380 | var colors_452984857 = [[makeNimstrLit("#f70640"), makeNimstrLit("#f78e2c"), makeNimstrLit("#fdd903"), makeNimstrLit("#cae509"), makeNimstrLit("#63be93"), makeNimstrLit("#81cfe5"), makeNimstrLit("#299dbf"), makeNimstrLit("#38187d"), makeNimstrLit("#a4459f"), makeNimstrLit("#f654a9"), makeNimstrLit("#2F0A30")]];
381 | var forms_452984875 = [[]];
382 | 
383 | function toFloat_1107296262(n_1107296263) {
384 |   var result_1107296264 = 0.0;
385 | 
386 |     result_1107296264 = n_1107296263;
387 | 
388 |   return result_1107296264;
389 | 
390 | }
391 | 
392 | function new_452984898() {
393 |   var result_452984901 = null;
394 | 
395 |   BeforeRet: do {
396 |     var r_452984903 = null;
397 |     r_452984903 = ({x: 0.0, y: 0.0, x0: 0.0, y0: 0.0, r0: 0.0, r: 0.0, d0: 0.0, d: 0.0, a: 0.0, t: 0.0, r1: 0.0, r2: 0.0, r3: 0.0, n: 0, col: []});
398 |     result_452984901 = r_452984903;
399 |     break BeforeRet;
400 |   } while (false);
401 | 
402 |   return result_452984901;
403 | 
404 | }
405 | 
406 | function isFatPointer_33557132(ti_33557133) {
407 |   var result_33557134 = false;
408 | 
409 |   BeforeRet: do {
410 |     result_33557134 = !((ConstSet1[ti_33557133.base.kind] != undefined));
411 |     break BeforeRet;
412 |   } while (false);
413 | 
414 |   return result_33557134;
415 | 
416 | }
417 | 
418 | function nimCopyAux(dest_33557145, src_33557146, n_33557147) {
419 |     switch (n_33557147.kind) {
420 |     case 0:
421 |       break;
422 |     case 1:
423 |             dest_33557145[n_33557147.offset] = nimCopy(dest_33557145[n_33557147.offset], src_33557146[n_33557147.offset], n_33557147.typ);
424 |     
425 |       break;
426 |     case 2:
427 |           for (var i = 0; i < n_33557147.sons.length; i++) {
428 |       nimCopyAux(dest_33557145, src_33557146, n_33557147.sons[i]);
429 |     }
430 |     
431 |       break;
432 |     case 3:
433 |             dest_33557145[n_33557147.offset] = nimCopy(dest_33557145[n_33557147.offset], src_33557146[n_33557147.offset], n_33557147.typ);
434 |       for (var i = 0; i < n_33557147.sons.length; ++i) {
435 |         nimCopyAux(dest_33557145, src_33557146, n_33557147.sons[i][1]);
436 |       }
437 |     
438 |       break;
439 |     }
440 | 
441 |   
442 | }
443 | 
444 | function newForm_452984894(x_452984895, y_452984896) {
445 |   var result_452984897 = null;
446 | 
447 |     result_452984897 = new_452984898();
448 |     result_452984897.x = x_452984895;
449 |     result_452984897.y = y_452984896;
450 |     result_452984897.x0 = x_452984895;
451 |     result_452984897.y0 = y_452984896;
452 |     result_452984897.r0 = random(10.0, 25.0);
453 |     result_452984897.r = result_452984897.r0;
454 |     result_452984897.d0 = ((random(15.0) * random()) + 5.0);
455 |     result_452984897.d = result_452984897.d0;
456 |     result_452984897.n = ((random(3.0, 13.0)) | 0);
457 |     result_452984897.a = random(100.0);
458 |     result_452984897.t = random(10000.0);
459 |     result_452984897.r1 = random(0.01);
460 |     result_452984897.r2 = random(0.01);
461 |     result_452984897.r3 = random(0.01);
462 |     result_452984897.col = nimCopy(null, random(colors_452984857[0]), NTI33554439);
463 | 
464 |   return result_452984897;
465 | 
466 | }
467 | 
468 | function setup() {
469 |     createCanvas(900.0, 900.0);
470 |     var c_452984951 = 18;
471 |     var w_452984952 = (width / toFloat_1107296262(c_452984951));
472 |     Label1: do {
473 |       var i_452984957 = 0;
474 |       var i_452985015 = 0;
475 |       Label2: do {
476 |           Label3: while (true) {
477 |           if (!(i_452985015 < c_452984951)) break Label3;
478 |             i_452984957 = i_452985015;
479 |             Label4: do {
480 |               var j_452984962 = 0;
481 |               var i_452985013 = 0;
482 |               Label5: do {
483 |                   Label6: while (true) {
484 |                   if (!(i_452985013 < c_452984951)) break Label6;
485 |                     j_452984962 = i_452985013;
486 |                     var x_452984963 = ((toFloat_1107296262(i_452984957) * w_452984952) + (w_452984952 / 2.0));
487 |                     var y_452984964 = ((toFloat_1107296262(j_452984962) * w_452984952) + (w_452984952 / 2.0));
488 |                     if ((Math.trunc((i_452984957 + j_452984962) % 2) == 0)) {
489 |                     Label7: do {
490 |                       var k_452984969 = 0;
491 |                       var i_452985011 = 0;
492 |                       Label8: do {
493 |                           Label9: while (true) {
494 |                           if (!(i_452985011 < 5)) break Label9;
495 |                             k_452984969 = i_452985011;
496 |                             forms_452984875[0].push(newForm_452984894(x_452984963, y_452984964));;
497 |                             i_452985011 += 1;
498 |                           }
499 |                       } while (false);
500 |                     } while (false);
501 |                     }
502 |                     
503 |                     i_452985013 += 1;
504 |                   }
505 |               } while (false);
506 |             } while (false);
507 |             i_452985015 += 1;
508 |           }
509 |       } while (false);
510 |     } while (false);
511 |     background(0.0);
512 | 
513 |   
514 | }
515 | 
516 | function newSeq_33556826(len_33556828) {
517 |   var result_33556829 = [];
518 | 
519 |     result_33556829 = new Array(len_33556828); for (var i = 0 ; i < len_33556828 ; ++i) { result_33556829[i] = null; }
520 |   return result_33556829;
521 | 
522 | }
523 | 
524 | function show_452984928(form_452984929) {
525 |     noStroke();
526 |     fill(toJSStr(form_452984929.col));
527 |     push();
528 |     translate(form_452984929.x, form_452984929.y);
529 |     rotate(form_452984929.a);
530 |     Label1: do {
531 |       var i_452984934 = 0;
532 |       var i_452985023 = 0;
533 |       Label2: do {
534 |           Label3: while (true) {
535 |           if (!(i_452985023 < form_452984929.n)) break Label3;
536 |             i_452984934 = i_452985023;
537 |             var theta_452984935 = map(toFloat_1107296262(i_452984934), 0.0, toFloat_1107296262(form_452984929.n), 0.0, TAU);
538 |             ellipse((form_452984929.r * cos(theta_452984935)), (form_452984929.r * sin(theta_452984935)), form_452984929.d, form_452984929.d);
539 |             i_452985023 += 1;
540 |           }
541 |       } while (false);
542 |     } while (false);
543 |     pop();
544 | 
545 |   
546 | }
547 | 
548 | function HEX2BHEX3D_855640050(x_855640052, x_855640052_Idx, y_855640053) {
549 |     x_855640052[x_855640052_Idx] = (x_855640052[x_855640052_Idx] + y_855640053);
550 | 
551 |   
552 | }
553 | 
554 | function HEX2DHEX3D_452984946(x_452984948, x_452984948_Idx, y_452984949) {
555 |     x_452984948[x_452984948_Idx] = (x_452984948[x_452984948_Idx] - y_452984949);
556 | 
557 |   
558 | }
559 | 
560 | function move_452984936(form_452984937) {
561 |     HEX2BHEX3D_855640050(form_452984937, "t", 1.0);
562 |     form_452984937.a = (TAU * sin((form_452984937.t * form_452984937.r1)));
563 |     form_452984937.r = (form_452984937.r0 * sin((form_452984937.t * form_452984937.r2)));
564 |     form_452984937.d = (form_452984937.d0 * sin((form_452984937.t * form_452984937.r3)));
565 |     HEX2BHEX3D_855640050(form_452984937, "x", 0.5);
566 |     HEX2DHEX3D_452984946(form_452984937, "y", 0.5);
567 |     if ((width < form_452984937.x)) {
568 |     form_452984937.x = 0.0;
569 |     }
570 |     
571 |     if ((form_452984937.y < 0.0)) {
572 |     form_452984937.y = height;
573 |     }
574 |     
575 | 
576 |   
577 | }
578 | 
579 | function draw() {
580 |     translate((width / 2.0), (height / 2.0));
581 |     scale(1.1);
582 |     translate((-(width) / 2.0), (-(height) / 2.0));
583 |     background(255.0);
584 |     Label1: do {
585 |       var f_452984997 = null;
586 |       var f_452984997_Idx = 0;
587 |       var i_452985019 = 0;
588 |       var L_452985020 = (forms_452984875[0]).length;
589 |       Label2: do {
590 |           Label3: while (true) {
591 |           if (!(i_452985019 < L_452985020)) break Label3;
592 |             f_452984997 = forms_452984875[0]; f_452984997_Idx = i_452985019;
593 |             show_452984928(f_452984997[f_452984997_Idx]);
594 |             move_452984936(f_452984997[f_452984997_Idx]);
595 |             i_452985019 += 1;
596 |           }
597 |       } while (false);
598 |     } while (false);
599 | 
600 |   
601 | }
602 | 
603 | function keyPressed() {
604 |     if (eqStrings(cstrToNimstr(key), makeNimstrLit("s"))) {
605 |     rawEcho(makeNimstrLit("saving gif okazz_229019a"));
606 |     saveGif("okazz_229019a", 2.0);
607 |     }
608 |     
609 | 
610 |   
611 | }
612 | </script>
613 | </main>
614 | <footer>
615 | <hr>
616 | <div class="nb-box">
617 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
618 |   <span></span>
619 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
620 | </div>
621 | </footer>
622 | <section id="source">
623 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
624 | nbInit
625 | nbUseP5
626 | nb.addEntry(<span class="hljs-number">6</span>, <span class="hljs-string">&quot;Okazz 220919a&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
627 | Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&amp;o=31),
628 | original at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1653811).
629 | &quot;&quot;&quot;</span>)
630 | nbText: <span class="hljs-string">&quot;&quot;&quot;
631 | License is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).
632 | 
633 | The original sketch has been ported from p5js to p5nim.
634 | &quot;&quot;&quot;</span>
635 | <span class="hljs-comment"># maybe this will be used to train an automatic translator</span>
636 | <span class="hljs-keyword">let</span> sourceOriginalJs = <span class="hljs-string">&quot;&quot;&quot;
637 | let forms = [];
638 | let colors = ['#f70640', '#f78e2c', '#fdd903', '#cae509', '#63be93', '#81cfe5', '#299dbf', '#38187d', '#a4459f', '#f654a9', '#2F0A30'];
639 | 
640 | function setup() {
641 | 	createCanvas(900, 900);
642 | 
643 | 	let c = 18;
644 | 	let w = width / c;
645 | 	for (let i = 0; i &lt; c; i++) {
646 | 		for (let j = 0; j &lt; c; j++) {
647 | 			let x = i * w + w / 2;
648 | 			let y = j * w + w / 2;
649 | 			if ((i + j) % 2 == 0) {
650 | 				for (let k = 0; k &lt; 5; k++) {
651 | 					forms.push(new Form(x, y));
652 | 				}
653 | 			}
654 | 		}
655 | 	}
656 | 	background(0);
657 | 
658 | }
659 | 
660 | function draw() {
661 | 
662 | 	translate(width / 2, height / 2);
663 | 	scale(1.1);
664 | 	translate(-width / 2, -height / 2);
665 | 	background(255);
666 | 	for (let i of forms) {
667 | 		i.show();
668 | 		i.move();
669 | 	}
670 | }
671 | 
672 | class Form {
673 | 	constructor(x, y) {
674 | 		this.x = x;
675 | 		this.y = y;
676 | 		this.x0 = x;
677 | 		this.y0 = y;
678 | 		this.r0 = random(10, 25);
679 | 		this.r = this.r0;
680 | 		this.d0 = random(15) * random() + 5;
681 | 		this.d = this.d0;
682 | 		this.n = int(random(3, 13));
683 | 		this.a = random(100);
684 | 		this.t = random(10000);
685 | 		this.r1 = random(0.01);
686 | 		this.r2 = random(0.01);
687 | 		this.r3 = random(0.01);
688 | 		this.col = color(random(colors));
689 | 	}
690 | 
691 | 	show() {
692 | 		noStroke();
693 | 		fill(this.col);
694 | 		push();
695 | 		translate(this.x, this.y);
696 | 		rotate(this.a);
697 | 		for (let i = 0; i &lt; this.n; i++) {
698 | 			let theta = map(i, 0, this.n, 0, TAU);
699 | 			ellipse(this.r * cos(theta), this.r * sin(theta), this.d, this.d);
700 | 		}
701 | 		pop();
702 | 	}
703 | 
704 | 	move() {
705 | 		this.t++;
706 | 		this.a = TAU * sin(this.t * this.r1);
707 | 		this.r = this.r0 * sin(this.t * this.r2);
708 | 		this.d = this.d0 * sin(this.t * this.r3);
709 | 		this.x += 0.5;
710 | 		this.y -= 0.5;
711 | 		if (this.x &gt; width) {
712 | 			this.x = 0;
713 | 		}
714 | 		if (this.y &lt; 0) {
715 | 			this.y = height;
716 | 		}
717 | 	}
718 | }
719 | &quot;&quot;&quot;</span>
720 | 
721 | nbCodeDisplay(nbJsFromCode):
722 |   <span class="hljs-keyword">var</span> colors = @[<span class="hljs-string">&quot;#f70640&quot;</span>, <span class="hljs-string">&quot;#f78e2c&quot;</span>, <span class="hljs-string">&quot;#fdd903&quot;</span>, <span class="hljs-string">&quot;#cae509&quot;</span>, <span class="hljs-string">&quot;#63be93&quot;</span>, <span class="hljs-string">&quot;#81cfe5&quot;</span>, <span class="hljs-string">&quot;#299dbf&quot;</span>, <span class="hljs-string">&quot;#38187d&quot;</span>, <span class="hljs-string">&quot;#a4459f&quot;</span>, <span class="hljs-string">&quot;#f654a9&quot;</span>, <span class="hljs-string">&quot;#2F0A30&quot;</span>];
723 | 
724 |   <span class="hljs-keyword">type</span>
725 |     <span class="hljs-type">Form</span> = <span class="hljs-keyword">ref</span> <span class="hljs-keyword">object</span>
726 |       x, y, x0, y0, r0, r, d0, d: <span class="hljs-built_in">float</span>
727 |       a, t, r1, r2, r3: <span class="hljs-built_in">float</span> 
728 |       n: <span class="hljs-built_in">int</span>
729 |       col: <span class="hljs-built_in">string</span>
730 | 
731 |   <span class="hljs-keyword">var</span> forms: <span class="hljs-built_in">seq</span>[<span class="hljs-type">Form</span>]
732 | 
733 |   <span class="hljs-keyword">proc</span> newForm(x, y: <span class="hljs-built_in">float</span>): <span class="hljs-type">Form</span> =
734 |     <span class="hljs-literal">result</span> = <span class="hljs-keyword">new</span> <span class="hljs-type">Form</span>
735 |     <span class="hljs-literal">result</span>.x = x
736 |     <span class="hljs-literal">result</span>.y = y
737 |     <span class="hljs-literal">result</span>.x0 = x
738 |     <span class="hljs-literal">result</span>.y0 = y
739 |     <span class="hljs-literal">result</span>.r0 = random(<span class="hljs-number">10</span>, <span class="hljs-number">25</span>)
740 |     <span class="hljs-literal">result</span>.r = <span class="hljs-literal">result</span>.r0
741 |     <span class="hljs-literal">result</span>.d0 = random(<span class="hljs-number">15</span>) * random() + <span class="hljs-number">5</span>
742 |     <span class="hljs-literal">result</span>.d = <span class="hljs-literal">result</span>.d0
743 |     <span class="hljs-literal">result</span>.n = <span class="hljs-built_in">int</span>(random(<span class="hljs-number">3</span>, <span class="hljs-number">13</span>))
744 |     <span class="hljs-literal">result</span>.a = random(<span class="hljs-number">100</span>)
745 |     <span class="hljs-literal">result</span>.t = random(<span class="hljs-number">10000</span>)
746 |     <span class="hljs-literal">result</span>.r1 = random(<span class="hljs-number">0.01</span>)
747 |     <span class="hljs-literal">result</span>.r2 = random(<span class="hljs-number">0.01</span>)
748 |     <span class="hljs-literal">result</span>.r3 = random(<span class="hljs-number">0.01</span>)
749 |     <span class="hljs-literal">result</span>.col = random(colors)
750 | 
751 |   <span class="hljs-keyword">proc</span> show(form: <span class="hljs-type">Form</span>) =
752 |     noStroke()
753 |     fill(form.col)
754 |     push()
755 |     translate(form.x, form.y)
756 |     rotate(form.a)
757 |     <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; form.n:
758 |       <span class="hljs-keyword">let</span> theta = map(i, <span class="hljs-number">0</span>, form.n, <span class="hljs-number">0</span>, <span class="hljs-type">TAU</span>)
759 |       ellipse(form.r * cos(theta), form.r * sin(theta), form.d, form.d)
760 |     pop()
761 | 
762 |   <span class="hljs-keyword">proc</span> move(form: <span class="hljs-type">Form</span>) =
763 |     form.t += <span class="hljs-number">1</span>
764 |     form.a = <span class="hljs-type">TAU</span> * sin(form.t * form.r1);
765 |     form.r = form.r0 * sin(form.t * form.r2);
766 |     form.d = form.d0 * sin(form.t * form.r3);
767 |     form.x += <span class="hljs-number">0.5</span>;
768 |     form.y -= <span class="hljs-number">0.5</span>;
769 |     <span class="hljs-keyword">if</span> form.x &gt; width:
770 |       form.x = <span class="hljs-number">0</span>
771 |     <span class="hljs-keyword">if</span> form.y &lt; <span class="hljs-number">0</span>:
772 |       form.y = height
773 | 
774 |   setup:
775 |     createCanvas(<span class="hljs-number">900</span>, <span class="hljs-number">900</span>)
776 | 
777 |     <span class="hljs-keyword">var</span> c = <span class="hljs-number">18</span>
778 |     <span class="hljs-keyword">var</span> w = width / c
779 |     <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; c:
780 |       <span class="hljs-keyword">for</span> j <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; c:
781 |         <span class="hljs-keyword">let</span> x = i * w + w / <span class="hljs-number">2</span>;
782 |         <span class="hljs-keyword">let</span> y = j * w + w / <span class="hljs-number">2</span>;
783 |         <span class="hljs-keyword">if</span> ((i + j) <span class="hljs-keyword">mod</span> <span class="hljs-number">2</span> == <span class="hljs-number">0</span>):
784 |           <span class="hljs-keyword">for</span> k <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; <span class="hljs-number">5</span>:
785 |             forms.add(newForm(x, y))
786 |     background(<span class="hljs-number">0</span>)
787 | 
788 |   draw:
789 | 
790 |     translate(width / <span class="hljs-number">2</span>, height / <span class="hljs-number">2</span>)
791 |     scale(<span class="hljs-number">1.1</span>)
792 |     translate(-width / <span class="hljs-number">2</span>, -height / <span class="hljs-number">2</span>)
793 |     background(<span class="hljs-number">255</span>)
794 |     <span class="hljs-keyword">for</span> f <span class="hljs-keyword">in</span> forms:
795 |       f.show()
796 |       f.move()
797 | 
798 | nbJsShowSource()
799 | nbJsFromCode():
800 |   keyPressed:
801 |     <span class="hljs-keyword">if</span> $key == <span class="hljs-string">&quot;s&quot;</span>:
802 |       <span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;saving gif okazz_229019a&quot;</span>
803 |       saveGif(<span class="hljs-built_in">cstring</span>(<span class="hljs-string">&quot;okazz_229019a&quot;</span>), <span class="hljs-number">2</span>)
804 | nbText: <span class="hljs-string">&quot;press 's' to export a 2 second gif&quot;</span>
805 | nbSave</code></pre>
806 | </section><script>
807 | function toggleSourceDisplay() {
808 |   var btn = document.getElementById("show")
809 |   var source = document.getElementById("source");
810 |   if (btn.innerHTML=="Show Source") {
811 |     btn.innerHTML = "Hide Source";
812 |     source.style.display = "block";
813 |   } else {
814 |     btn.innerHTML = "Show Source";
815 |     source.style.display = "none";
816 |   }
817 | }
818 | </script></body>
819 | </html>


--------------------------------------------------------------------------------
/docs/okazz_221026a.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-us">
  3 | <head>
  4 |   <title>okazz_221026a.nim</title>
  5 |   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
  6 |   <meta content="text/html; charset=utf-8" http-equiv="content-type">
  7 |   <meta content="width=device-width, initial-scale=1" name="viewport">
  8 |   <link rel='stylesheet' href='https://unpkg.com/normalize.css'>
  9 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
 10 |   <link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
 11 |   <style>
 12 | .nb-box {
 13 |   display: flex;
 14 |   align-items: center;
 15 |   justify-content: space-between;
 16 | }
 17 | .nb-small {
 18 |   font-size: 0.8rem;
 19 | }
 20 | button.nb-small {
 21 |   float: right;
 22 |   padding: 2px;
 23 |   padding-right: 5px;
 24 |   padding-left: 5px;
 25 | }
 26 | section#source {
 27 |   display:none
 28 | }
 29 | 
 30 | .nb-output {
 31 |   line-height: 1.15;
 32 | }
 33 | </style>
 34 |   
 35 |   <script defer data-domain="pietroppeter.github.io/p5nim" src="https://plausible.io/js/script.js"></script></head>
 36 | <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script><body>
 37 | <header>
 38 | <div class="nb-box">
 39 |   <span><a href=".">🏡</a></span>
 40 |   <span><code>okazz_221026a.nim</code></span>
 41 |   <span><a href="https://github.com/pietroppeter/p5nim"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
 42 | </div>
 43 | <hr>
 44 | </header><main>
 45 | 
 46 | <h2>7. Okazz 221026a</h2>
 47 | <p>Art by <a href="https://openprocessing.org/user/128718?view=sketches&o=31">Okazz</a>,
 48 | original at <a href="https://openprocessing.org/sketch/1711659">openprocessing.org/sketch/1653811</a>.</p>
 49 | <p>License is <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CreativeCommons Attribution NonCommercial ShareAlike</a>.</p>
 50 | <p>The original sketch has been ported from p5js to p5nim.</p>
 51 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span>
 52 |   std / [random, sequtils]
 53 | 
 54 | <span class="hljs-keyword">import</span> std / math <span class="hljs-keyword">except</span> sqrt
 55 | 
 56 | <span class="hljs-keyword">var</span> palettes = @[@[<span class="hljs-string">&quot;#6b2d5c&quot;</span>, <span class="hljs-string">&quot;#f0386b&quot;</span>, <span class="hljs-string">&quot;#ff5376&quot;</span>, <span class="hljs-string">&quot;#e391db&quot;</span>, <span class="hljs-string">&quot;#f8c0c8&quot;</span>],
 57 |                  @[<span class="hljs-string">&quot;#ffe957&quot;</span>, <span class="hljs-string">&quot;#eec170&quot;</span>, <span class="hljs-string">&quot;#f2a65a&quot;</span>, <span class="hljs-string">&quot;#f58549&quot;</span>, <span class="hljs-string">&quot;#ff6c3f&quot;</span>],
 58 |                  @[<span class="hljs-string">&quot;#073b3a&quot;</span>, <span class="hljs-string">&quot;#0b6e4f&quot;</span>, <span class="hljs-string">&quot;#08a045&quot;</span>, <span class="hljs-string">&quot;#6bbf59&quot;</span>, <span class="hljs-string">&quot;#71deb2&quot;</span>],
 59 |                  @[<span class="hljs-string">&quot;#c52233&quot;</span>, <span class="hljs-string">&quot;#a51c30&quot;</span>, <span class="hljs-string">&quot;#a7333f&quot;</span>, <span class="hljs-string">&quot;#74121d&quot;</span>, <span class="hljs-string">&quot;#580c1f&quot;</span>],
 60 |                  @[<span class="hljs-string">&quot;#03045e&quot;</span>, <span class="hljs-string">&quot;#0077b6&quot;</span>, <span class="hljs-string">&quot;#00b4d8&quot;</span>, <span class="hljs-string">&quot;#90e0ef&quot;</span>, <span class="hljs-string">&quot;#caf0f8&quot;</span>],
 61 |                  @[<span class="hljs-string">&quot;#f8f9fa&quot;</span>, <span class="hljs-string">&quot;#dee2e6&quot;</span>, <span class="hljs-string">&quot;#adb5bd&quot;</span>, <span class="hljs-string">&quot;#495057&quot;</span>, <span class="hljs-string">&quot;#212529&quot;</span>]]
 62 | <span class="hljs-keyword">let</span> <span class="hljs-type">SEED</span> = math.floor(random.rand(<span class="hljs-number">1.0</span>) * <span class="hljs-number">1000000</span>)
 63 | <span class="hljs-keyword">type</span>
 64 |   <span class="hljs-type">Form</span> = <span class="hljs-keyword">ref</span> <span class="hljs-keyword">object</span>
 65 |     x, y, w: <span class="hljs-built_in">float</span>
 66 |     palettes: <span class="hljs-built_in">seq</span>[<span class="hljs-built_in">seq</span>[<span class="hljs-built_in">string</span>]]
 67 |     num: <span class="hljs-built_in">int</span>
 68 |     colors: <span class="hljs-built_in">seq</span>[<span class="hljs-built_in">string</span>]
 69 | 
 70 | <span class="hljs-keyword">var</span> forms: <span class="hljs-built_in">seq</span>[<span class="hljs-type">Form</span>]
 71 | <span class="hljs-keyword">proc</span> newForm(x, y, w: <span class="hljs-built_in">float</span>): <span class="hljs-type">Form</span> =
 72 |   <span class="hljs-literal">result</span> = <span class="hljs-keyword">new</span> <span class="hljs-type">Form</span>
 73 |   <span class="hljs-literal">result</span>.x = x
 74 |   <span class="hljs-literal">result</span>.y = y
 75 |   <span class="hljs-literal">result</span>.w = w
 76 |   <span class="hljs-literal">result</span>.palettes = newSeqWith(<span class="hljs-number">0</span>, newSeq[<span class="hljs-built_in">string</span>]())
 77 |   <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; len(palettes):
 78 |     <span class="hljs-keyword">var</span> c = palettes[i]
 79 |     shuffle(c)
 80 |     <span class="hljs-literal">result</span>.palettes.add(c)
 81 |   <span class="hljs-literal">result</span>.num = <span class="hljs-number">5</span>
 82 |   <span class="hljs-literal">result</span>.colors = newSeq[<span class="hljs-built_in">string</span>]()
 83 | 
 84 | <span class="hljs-keyword">proc</span> show(form: <span class="hljs-type">Form</span>) =
 85 |   <span class="hljs-keyword">let</span> d = dist(width / <span class="hljs-number">2</span>, height / <span class="hljs-number">2</span>, form.x, form.y)
 86 |   <span class="hljs-keyword">let</span> c = <span class="hljs-built_in">int</span>(map(d, sqrt(sq(width / <span class="hljs-number">2</span>) + sq(height / <span class="hljs-number">2</span>)), <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, palettes.len) +
 87 |       frameCount * <span class="hljs-number">0.02</span>)
 88 |   form.colors = form.palettes[c <span class="hljs-keyword">mod</span> palettes.len]
 89 |   <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; form.num:
 90 |     <span class="hljs-keyword">let</span> r = map(<span class="hljs-built_in">float</span>(i), <span class="hljs-number">0</span>, form.num, <span class="hljs-number">0</span>, form.w / <span class="hljs-number">2</span>)
 91 |     <span class="hljs-keyword">let</span> ww = map(<span class="hljs-built_in">float</span>(i), <span class="hljs-number">0</span>, form.num, form.w, <span class="hljs-number">0</span>)
 92 |     <span class="hljs-keyword">let</span> col = form.colors[i <span class="hljs-keyword">mod</span> form.colors.len]
 93 |     fill(col)
 94 |     rect(form.x, form.y, ww, ww, r)
 95 | 
 96 | setup:
 97 |   createCanvas(<span class="hljs-number">900</span>, <span class="hljs-number">900</span>)
 98 |   rectMode(<span class="hljs-type">CENTER</span>)
 99 |   <span class="hljs-keyword">let</span> seg = <span class="hljs-number">25</span>
100 |   <span class="hljs-keyword">let</span> w = width / seg
101 |   <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; seg:
102 |     <span class="hljs-keyword">for</span> j <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; seg:
103 |       <span class="hljs-keyword">let</span> x = i * w + w / <span class="hljs-number">2</span>
104 |       <span class="hljs-keyword">let</span> y = j * w + w / <span class="hljs-number">2</span>
105 |       forms.add(newForm(x, y, w))
106 | draw:
107 |   background(<span class="hljs-number">255</span>)
108 |   <span class="hljs-keyword">for</span> f <span class="hljs-keyword">in</span> forms:
109 |     f.show()</code></pre>
110 | 
111 | <p>press 's' to export a 5 second gif</p>
112 | <script defer>/* Generated by the Nim Compiler v1.6.0 */
113 | var framePtr = null;
114 | var excHandler = 0;
115 | var lastJSError = null;
116 | var NTI452984905 = {size: 0, kind: 24, base: null, node: null, finalizer: null};
117 | var NTI452984858 = {size: 0, kind: 24, base: null, node: null, finalizer: null};
118 | var NTI452984961 = {size: 0, kind: 24, base: null, node: null, finalizer: null};
119 | var NTI33554439 = {size: 0,kind: 28,base: null,node: null,finalizer: null};
120 | var NTI436207911 = {size: 0, kind: 24, base: null, node: null, finalizer: null};
121 | NTI436207911.base = NTI33554439;
122 | NTI452984961.base = NTI436207911;
123 | NTI452984858.base = NTI33554439;
124 | NTI452984905.base = NTI33554439;
125 | 
126 | function makeNimstrLit(c_33556802) {
127 |       var result = [];
128 |   for (var i = 0; i < c_33556802.length; ++i) {
129 |     result[i] = c_33556802.charCodeAt(i);
130 |   }
131 |   return result;
132 |   
133 | 
134 |   
135 | }
136 | 
137 | function setConstr() {
138 |         var result = {};
139 |     for (var i = 0; i < arguments.length; ++i) {
140 |       var x = arguments[i];
141 |       if (typeof(x) == "object") {
142 |         for (var j = x[0]; j <= x[1]; ++j) {
143 |           result[j] = true;
144 |         }
145 |       } else {
146 |         result[x] = true;
147 |       }
148 |     }
149 |     return result;
150 |   
151 | 
152 |   
153 | }
154 | var ConstSet1 = setConstr(17, 16, 4, 18, 27, 19, 23, 22, 21);
155 | 
156 | function nimCopy(dest_33557141, src_33557142, ti_33557143) {
157 |   var result_33557152 = null;
158 | 
159 |     switch (ti_33557143.kind) {
160 |     case 21:
161 |     case 22:
162 |     case 23:
163 |     case 5:
164 |       if (!(isFatPointer_33557132(ti_33557143))) {
165 |       result_33557152 = src_33557142;
166 |       }
167 |       else {
168 |         result_33557152 = [src_33557142[0], src_33557142[1]];
169 |       }
170 |       
171 |       break;
172 |     case 19:
173 |             if (dest_33557141 === null || dest_33557141 === undefined) {
174 |         dest_33557141 = {};
175 |       }
176 |       else {
177 |         for (var key in dest_33557141) { delete dest_33557141[key]; }
178 |       }
179 |       for (var key in src_33557142) { dest_33557141[key] = src_33557142[key]; }
180 |       result_33557152 = dest_33557141;
181 |     
182 |       break;
183 |     case 18:
184 |     case 17:
185 |       if (!((ti_33557143.base == null))) {
186 |       result_33557152 = nimCopy(dest_33557141, src_33557142, ti_33557143.base);
187 |       }
188 |       else {
189 |       if ((ti_33557143.kind == 17)) {
190 |       result_33557152 = (dest_33557141 === null || dest_33557141 === undefined) ? {m_type: ti_33557143} : dest_33557141;
191 |       }
192 |       else {
193 |         result_33557152 = (dest_33557141 === null || dest_33557141 === undefined) ? {} : dest_33557141;
194 |       }
195 |       }
196 |       nimCopyAux(result_33557152, src_33557142, ti_33557143.node);
197 |       break;
198 |     case 24:
199 |     case 4:
200 |     case 27:
201 |     case 16:
202 |             if (src_33557142 === null) {
203 |         result_33557152 = null;
204 |       }
205 |       else {
206 |         if (dest_33557141 === null || dest_33557141 === undefined || dest_33557141.length != src_33557142.length) {
207 |           dest_33557141 = new Array(src_33557142.length);
208 |         }
209 |         result_33557152 = dest_33557141;
210 |         for (var i = 0; i < src_33557142.length; ++i) {
211 |           result_33557152[i] = nimCopy(result_33557152[i], src_33557142[i], ti_33557143.base);
212 |         }
213 |       }
214 |     
215 |       break;
216 |     case 28:
217 |             if (src_33557142 !== null) {
218 |         result_33557152 = src_33557142.slice(0);
219 |       }
220 |     
221 |       break;
222 |     default: 
223 |       result_33557152 = src_33557142;
224 |       break;
225 |     }
226 | 
227 |   return result_33557152;
228 | 
229 | }
230 | 
231 | function genericReset(x_33557172, ti_33557173) {
232 |   var result_33557174 = null;
233 | 
234 |     result_33557174 = null;
235 |     switch (ti_33557173.kind) {
236 |     case 21:
237 |     case 22:
238 |     case 23:
239 |     case 5:
240 |       if (isFatPointer_33557132(ti_33557173)) {
241 |               result_33557174 = [null, 0];
242 |       
243 |       }
244 |       
245 |       break;
246 |     case 19:
247 |             result_33557174 = {};
248 |     
249 |       break;
250 |     case 18:
251 |     case 17:
252 |       if ((ti_33557173.kind == 17)) {
253 |       result_33557174 = {m_type: ti_33557173};
254 |       }
255 |       else {
256 |         result_33557174 = {};
257 |       }
258 |       
259 |       break;
260 |     case 24:
261 |     case 27:
262 |     case 28:
263 |             result_33557174 = [];
264 |     
265 |       break;
266 |     case 4:
267 |     case 16:
268 |             result_33557174 = new Array(x_33557172.length);
269 |       for (var i = 0; i < x_33557172.length; ++i) {
270 |         result_33557174[i] = genericReset(x_33557172[i], ti_33557173.base);
271 |       }
272 |     
273 |       break;
274 |     default: 
275 |       break;
276 |     }
277 | 
278 |   return result_33557174;
279 | 
280 | }
281 | 
282 | function toJSStr(s_33556808) {
283 |                     var Temporary5;
284 |             var Temporary7;
285 | 
286 |   var result_33556809 = null;
287 | 
288 |     var res_33556843 = newSeq_33556826((s_33556808).length);
289 |     var i_33556844 = 0;
290 |     var j_33556845 = 0;
291 |     Label1: do {
292 |         Label2: while (true) {
293 |         if (!(i_33556844 < (s_33556808).length)) break Label2;
294 |           var c_33556846 = s_33556808[i_33556844];
295 |           if ((c_33556846 < 128)) {
296 |           res_33556843[j_33556845] = String.fromCharCode(c_33556846);
297 |           i_33556844 += 1;
298 |           }
299 |           else {
300 |             var helper_33556858 = newSeq_33556826(0);
301 |             Label3: do {
302 |                 Label4: while (true) {
303 |                 if (!true) break Label4;
304 |                   var code_33556859 = c_33556846.toString(16);
305 |                   if ((((code_33556859) == null ? 0 : (code_33556859).length) == 1)) {
306 |                   helper_33556858.push("%0");;
307 |                   }
308 |                   else {
309 |                   helper_33556858.push("%");;
310 |                   }
311 |                   
312 |                   helper_33556858.push(code_33556859);;
313 |                   i_33556844 += 1;
314 |                     if (((s_33556808).length <= i_33556844)) Temporary5 = true; else {                      Temporary5 = (s_33556808[i_33556844] < 128);                    }                  if (Temporary5) {
315 |                   break Label3;
316 |                   }
317 |                   
318 |                   c_33556846 = s_33556808[i_33556844];
319 |                 }
320 |             } while (false);
321 | ++excHandler;
322 |             Temporary7 = framePtr;
323 |             try {
324 |             res_33556843[j_33556845] = decodeURIComponent(helper_33556858.join(""));
325 | --excHandler;
326 | } catch (EXCEPTION) {
327 |  var prevJSError = lastJSError;
328 |  lastJSError = EXCEPTION;
329 |  --excHandler;
330 |             framePtr = Temporary7;
331 |             res_33556843[j_33556845] = helper_33556858.join("");
332 |             lastJSError = prevJSError;
333 |             } finally {
334 |             framePtr = Temporary7;
335 |             }
336 |           }
337 |           
338 |           j_33556845 += 1;
339 |         }
340 |     } while (false);
341 |     if (res_33556843.length < j_33556845) { for (var i = res_33556843.length ; i < j_33556845 ; ++i) res_33556843.push(null); }
342 |                else { res_33556843.length = j_33556845; };
343 |     result_33556809 = res_33556843.join("");
344 | 
345 |   return result_33556809;
346 | 
347 | }
348 | 
349 | function eqStrings(a_33556932, b_33556933) {
350 |         if (a_33556932 == b_33556933) return true;
351 |     if (a_33556932 === null && b_33556933.length == 0) return true;
352 |     if (b_33556933 === null && a_33556932.length == 0) return true;
353 |     if ((!a_33556932) || (!b_33556933)) return false;
354 |     var alen = a_33556932.length;
355 |     if (alen != b_33556933.length) return false;
356 |     for (var i = 0; i < alen; ++i)
357 |       if (a_33556932[i] != b_33556933[i]) return false;
358 |     return true;
359 |   
360 | 
361 |   
362 | }
363 | 
364 | function cstrToNimstr(c_33556805) {
365 |       var ln = c_33556805.length;
366 |   var result = new Array(ln);
367 |   var r = 0;
368 |   for (var i = 0; i < ln; ++i) {
369 |     var ch = c_33556805.charCodeAt(i);
370 | 
371 |     if (ch < 128) {
372 |       result[r] = ch;
373 |     }
374 |     else {
375 |       if (ch < 2048) {
376 |         result[r] = (ch >> 6) | 192;
377 |       }
378 |       else {
379 |         if (ch < 55296 || ch >= 57344) {
380 |           result[r] = (ch >> 12) | 224;
381 |         }
382 |         else {
383 |             ++i;
384 |             ch = 65536 + (((ch & 1023) << 10) | (c_33556805.charCodeAt(i) & 1023));
385 |             result[r] = (ch >> 18) | 240;
386 |             ++r;
387 |             result[r] = ((ch >> 12) & 63) | 128;
388 |         }
389 |         ++r;
390 |         result[r] = ((ch >> 6) & 63) | 128;
391 |       }
392 |       ++r;
393 |       result[r] = (ch & 63) | 128;
394 |     }
395 |     ++r;
396 |   }
397 |   return result;
398 |   
399 | 
400 |   
401 | }
402 | 
403 | function rawEcho() {
404 |           var buf = "";
405 |       for (var i = 0; i < arguments.length; ++i) {
406 |         buf += toJSStr(arguments[i]);
407 |       }
408 |       console.log(buf);
409 |     
410 | 
411 |   
412 | }
413 | if (!Math.trunc) {
414 |   Math.trunc = function(v) {
415 |     v = +v;
416 |     if (!isFinite(v)) return v;
417 |     return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0);
418 |   };
419 | }
420 | 
421 | var objectID_620757154 = [0];
422 | var state_1258291213 = [{a0: 1773455756, a1: 4275166512}];
423 | if (globalThis.utcInstance_1275069793 === undefined) {
424 |   globalThis.utcInstance_1275069793 = [null];
425 | }
426 | if (globalThis.localInstance_1275069794 === undefined) {
427 |   globalThis.localInstance_1275069794 = [null];
428 | }
429 | 
430 | function rotl_1258291231(x_1258291232, k_1258291233) {
431 |   var result_1258291234 = 0;
432 | 
433 |     result_1258291234 = ((x_1258291232 << k_1258291233) | (x_1258291232 >>> ((64 - k_1258291233) >>> 0)));
434 | 
435 |   return result_1258291234;
436 | 
437 | }
438 | 
439 | function next_1258291243(r_1258291244) {
440 |   var result_1258291245 = 0;
441 | 
442 |     var s0_1258291246 = r_1258291244.a0;
443 |     var s1_1258291247 = r_1258291244.a1;
444 |     result_1258291245 = ((s0_1258291246 + s1_1258291247) >>> 0);
445 |     s1_1258291247 = (s1_1258291247 ^ s0_1258291246);
446 |     r_1258291244.a0 = ((rotl_1258291231(s0_1258291246, 55) ^ s1_1258291247) ^ (s1_1258291247 << 14));
447 |     r_1258291244.a1 = rotl_1258291231(s1_1258291247, 36);
448 | 
449 |   return result_1258291245;
450 | 
451 | }
452 | 
453 | function rand_1258291326(r_1258291327, max_1258291332) {
454 |   var result_1258291333 = 0.0;
455 | 
456 |     var x_1258291334 = next_1258291243(r_1258291327);
457 |     result_1258291333 = ((x_1258291334 / 4294967295) * max_1258291332);
458 | 
459 |   return result_1258291333;
460 | 
461 | }
462 | 
463 | function rand_1258291348(max_1258291349) {
464 |   var result_1258291350 = 0.0;
465 | 
466 |     result_1258291350 = rand_1258291326(state_1258291213[0], max_1258291349);
467 | 
468 |   return result_1258291350;
469 | 
470 | }
471 | var palettes_452984884 = [[[makeNimstrLit("#6b2d5c"), makeNimstrLit("#f0386b"), makeNimstrLit("#ff5376"), makeNimstrLit("#e391db"), makeNimstrLit("#f8c0c8")], [makeNimstrLit("#ffe957"), makeNimstrLit("#eec170"), makeNimstrLit("#f2a65a"), makeNimstrLit("#f58549"), makeNimstrLit("#ff6c3f")], [makeNimstrLit("#073b3a"), makeNimstrLit("#0b6e4f"), makeNimstrLit("#08a045"), makeNimstrLit("#6bbf59"), makeNimstrLit("#71deb2")], [makeNimstrLit("#c52233"), makeNimstrLit("#a51c30"), makeNimstrLit("#a7333f"), makeNimstrLit("#74121d"), makeNimstrLit("#580c1f")], [makeNimstrLit("#03045e"), makeNimstrLit("#0077b6"), makeNimstrLit("#00b4d8"), makeNimstrLit("#90e0ef"), makeNimstrLit("#caf0f8")], [makeNimstrLit("#f8f9fa"), makeNimstrLit("#dee2e6"), makeNimstrLit("#adb5bd"), makeNimstrLit("#495057"), makeNimstrLit("#212529")]]];
472 | var SEED_452984885 = Math.floor((rand_1258291348(1.0) * 1000000.0));
473 | var forms_452984894 = [[]];
474 | 
475 | function toFloat_1107296262(n_1107296263) {
476 |   var result_1107296264 = 0.0;
477 | 
478 |     result_1107296264 = n_1107296263;
479 | 
480 |   return result_1107296264;
481 | 
482 | }
483 | 
484 | function new_452984927() {
485 |   var result_452984930 = null;
486 | 
487 |   BeforeRet: do {
488 |     var r_452984932 = null;
489 |     r_452984932 = ({x: 0.0, y: 0.0, w: 0.0, palettes: [], num: 0, colors: []});
490 |     result_452984930 = r_452984932;
491 |     break BeforeRet;
492 |   } while (false);
493 | 
494 |   return result_452984930;
495 | 
496 | }
497 | 
498 | function newSeq_452984963(len_452984965) {
499 |   var result_452984966 = [];
500 | 
501 |     result_452984966 = new Array(len_452984965); for (var i = 0 ; i < len_452984965 ; ++i) { result_452984966[i] = []; }
502 |   return result_452984966;
503 | 
504 | }
505 | 
506 | function newSeq_436208085(len_436208087) {
507 |   var result_436208088 = [];
508 | 
509 |     result_436208088 = new Array(len_436208087); for (var i = 0 ; i < len_436208087 ; ++i) { result_436208088[i] = []; }
510 |   return result_436208088;
511 | 
512 | }
513 | 
514 | function isFatPointer_33557132(ti_33557133) {
515 |   var result_33557134 = false;
516 | 
517 |   BeforeRet: do {
518 |     result_33557134 = !((ConstSet1[ti_33557133.base.kind] != undefined));
519 |     break BeforeRet;
520 |   } while (false);
521 | 
522 |   return result_33557134;
523 | 
524 | }
525 | 
526 | function nimCopyAux(dest_33557145, src_33557146, n_33557147) {
527 |     switch (n_33557147.kind) {
528 |     case 0:
529 |       break;
530 |     case 1:
531 |             dest_33557145[n_33557147.offset] = nimCopy(dest_33557145[n_33557147.offset], src_33557146[n_33557147.offset], n_33557147.typ);
532 |     
533 |       break;
534 |     case 2:
535 |           for (var i = 0; i < n_33557147.sons.length; i++) {
536 |       nimCopyAux(dest_33557145, src_33557146, n_33557147.sons[i]);
537 |     }
538 |     
539 |       break;
540 |     case 3:
541 |             dest_33557145[n_33557147.offset] = nimCopy(dest_33557145[n_33557147.offset], src_33557146[n_33557147.offset], n_33557147.typ);
542 |       for (var i = 0; i < n_33557147.sons.length; ++i) {
543 |         nimCopyAux(dest_33557145, src_33557146, n_33557147.sons[i][1]);
544 |       }
545 |     
546 |       break;
547 |     }
548 | 
549 |   
550 | }
551 | 
552 | function rand_1258291304(r_1258291306, max_1258291307) {
553 |   var result_1258291308 = 0;
554 | 
555 |   BeforeRet: do {
556 |     if ((max_1258291307 == 0)) {
557 |     break BeforeRet;
558 |     }
559 |     else {
560 |       var max_1258291309 = max_1258291307;
561 |       if ((max_1258291309 == -1)) {
562 |       result_1258291308 = next_1258291243(r_1258291306);
563 |       break BeforeRet;
564 |       }
565 |       
566 |       Label1: do {
567 |           Label2: while (true) {
568 |           if (!true) break Label2;
569 |             var x_1258291322 = next_1258291243(r_1258291306);
570 |             if ((x_1258291322 <= ((4294967295 - (4294967295 % max_1258291309)) ))) {
571 |             result_1258291308 = (x_1258291322 % ((max_1258291309 + 1) ));
572 |             break BeforeRet;
573 |             }
574 |             
575 |           }
576 |       } while (false);
577 |     }
578 |     
579 |   } while (false);
580 | 
581 |   return result_1258291308;
582 | 
583 | }
584 | 
585 | function rand_1258291300(r_1258291301, max_1258291302) {
586 |   var result_1258291303 = 0;
587 | 
588 |     result_1258291303 = rand_1258291304(r_1258291301, max_1258291302);
589 | 
590 |   return result_1258291303;
591 | 
592 | }
593 | 
594 | function shuffle_452985004(r_452985006, x_452985007) {
595 |     Label1: do {
596 |       var i_452985016 = 0;
597 |       var colontmp__452985118 = 0;
598 |       colontmp__452985118 = (x_452985007).length - 1;
599 |       var res_452985119 = colontmp__452985118;
600 |       Label2: do {
601 |           Label3: while (true) {
602 |           if (!(1 <= res_452985119)) break Label3;
603 |             i_452985016 = res_452985119;
604 |             var j_452985017 = rand_1258291300(r_452985006, i_452985016);
605 |             var Temporary4 = x_452985007[i_452985016]; x_452985007[i_452985016] = x_452985007[j_452985017]; x_452985007[j_452985017] = Temporary4;            res_452985119 -= 1;
606 |           }
607 |       } while (false);
608 |     } while (false);
609 | 
610 |   
611 | }
612 | 
613 | function shuffle_452985001(x_452985003) {
614 |     shuffle_452985004(state_1258291213[0], x_452985003);
615 | 
616 |   
617 | }
618 | 
619 | function newForm_452984922(x_452984923, y_452984924, w_452984925) {
620 |     var Temporary4;
621 | 
622 |   var result_452984926 = null;
623 | 
624 |     result_452984926 = new_452984927();
625 |     result_452984926.x = x_452984923;
626 |     result_452984926.y = y_452984924;
627 |     result_452984926.w = w_452984925;
628 |     var resultHEX60gensym0_452984971 = newSeq_452984963(0);
629 |     Label1: do {
630 |       var iHEX60gensym0_452984976 = 0;
631 |       var i_452985111 = 0;
632 |       Label2: do {
633 |           Label3: while (true) {
634 |           if (!(i_452985111 < 0)) break Label3;
635 |             iHEX60gensym0_452984976 = i_452985111;
636 |             resultHEX60gensym0_452984971[iHEX60gensym0_452984976] = nimCopy(null, newSeq_436208085(0), NTI436207911);
637 |             i_452985111 += 1;
638 |           }
639 |       } while (false);
640 |     } while (false);
641 |     Temporary4 = resultHEX60gensym0_452984971;
642 |     resultHEX60gensym0_452984971 = genericReset(resultHEX60gensym0_452984971, NTI452984961);
643 |     result_452984926.palettes = nimCopy(null, Temporary4, NTI452984961);
644 |     Label5: do {
645 |       var i_452984999 = 0;
646 |       var colontmp__452985114 = 0;
647 |       colontmp__452985114 = (palettes_452984884[0]).length;
648 |       var i_452985115 = 0;
649 |       Label6: do {
650 |           Label7: while (true) {
651 |           if (!(i_452985115 < colontmp__452985114)) break Label7;
652 |             i_452984999 = i_452985115;
653 |             var c_452985000 = nimCopy(null, palettes_452984884[0][i_452984999], NTI452984858);
654 |             shuffle_452985001(c_452985000);
655 |             var Temporary8 = nimCopy(null, c_452985000, NTI452984858);
656 |             result_452984926.palettes.push(Temporary8);;
657 |             i_452985115 += 1;
658 |           }
659 |       } while (false);
660 |     } while (false);
661 |     result_452984926.num = 5;
662 |     result_452984926.colors = nimCopy(null, newSeq_436208085(0), NTI436207911);
663 | 
664 |   return result_452984926;
665 | 
666 | }
667 | 
668 | function setup() {
669 |     createCanvas(900.0, 900.0);
670 |     rectMode(CENTER);
671 |     var seg_452985055 = 25;
672 |     var w_452985056 = (width / toFloat_1107296262(seg_452985055));
673 |     Label1: do {
674 |       var i_452985061 = 0;
675 |       var i_452985108 = 0;
676 |       Label2: do {
677 |           Label3: while (true) {
678 |           if (!(i_452985108 < seg_452985055)) break Label3;
679 |             i_452985061 = i_452985108;
680 |             Label4: do {
681 |               var j_452985066 = 0;
682 |               var i_452985106 = 0;
683 |               Label5: do {
684 |                   Label6: while (true) {
685 |                   if (!(i_452985106 < seg_452985055)) break Label6;
686 |                     j_452985066 = i_452985106;
687 |                     var x_452985067 = ((toFloat_1107296262(i_452985061) * w_452985056) + (w_452985056 / 2.0));
688 |                     var y_452985068 = ((toFloat_1107296262(j_452985066) * w_452985056) + (w_452985056 / 2.0));
689 |                     forms_452984894[0].push(newForm_452984922(x_452985067, y_452985068, w_452985056));;
690 |                     i_452985106 += 1;
691 |                   }
692 |               } while (false);
693 |             } while (false);
694 |             i_452985108 += 1;
695 |           }
696 |       } while (false);
697 |     } while (false);
698 | 
699 |   
700 | }
701 | 
702 | function newSeq_33556826(len_33556828) {
703 |   var result_33556829 = [];
704 | 
705 |     result_33556829 = new Array(len_33556828); for (var i = 0 ; i < len_33556828 ; ++i) { result_33556829[i] = null; }
706 |   return result_33556829;
707 | 
708 | }
709 | 
710 | function show_452985033(form_452985034) {
711 |     var d_452985035 = dist((width / 2.0), (height / 2.0), form_452985034.x, form_452985034.y);
712 |     var c_452985039 = (((map(d_452985035, sqrt((sq((width / 2.0)) + sq((height / 2.0)))), 0.0, 0.0, toFloat_1107296262((palettes_452984884[0]).length)) + (toFloat_1107296262(frameCount) * 0.02))) | 0);
713 |     form_452985034.colors = nimCopy(null, form_452985034.palettes[Math.trunc(c_452985039 % (palettes_452984884[0]).length)], NTI452984905);
714 |     Label1: do {
715 |       var i_452985047 = 0;
716 |       var i_452985128 = 0;
717 |       Label2: do {
718 |           Label3: while (true) {
719 |           if (!(i_452985128 < form_452985034.num)) break Label3;
720 |             i_452985047 = i_452985128;
721 |             var r_452985048 = map(i_452985047, 0.0, toFloat_1107296262(form_452985034.num), 0.0, (form_452985034.w / 2.0));
722 |             var ww_452985049 = map(i_452985047, 0.0, toFloat_1107296262(form_452985034.num), form_452985034.w, 0.0);
723 |             var col_452985053 = nimCopy(null, form_452985034.colors[Math.trunc(i_452985047 % (form_452985034.colors).length)], NTI33554439);
724 |             fill(toJSStr(col_452985053));
725 |             rect(form_452985034.x, form_452985034.y, ww_452985049, ww_452985049, r_452985048);
726 |             i_452985128 += 1;
727 |           }
728 |       } while (false);
729 |     } while (false);
730 | 
731 |   
732 | }
733 | 
734 | function draw() {
735 |     background(255.0);
736 |     Label1: do {
737 |       var f_452985093 = null;
738 |       var f_452985093_Idx = 0;
739 |       var i_452985124 = 0;
740 |       var L_452985125 = (forms_452984894[0]).length;
741 |       Label2: do {
742 |           Label3: while (true) {
743 |           if (!(i_452985124 < L_452985125)) break Label3;
744 |             f_452985093 = forms_452984894[0]; f_452985093_Idx = i_452985124;
745 |             show_452985033(f_452985093[f_452985093_Idx]);
746 |             i_452985124 += 1;
747 |           }
748 |       } while (false);
749 |     } while (false);
750 | 
751 |   
752 | }
753 | 
754 | function keyPressed() {
755 |     if (eqStrings(cstrToNimstr(key), makeNimstrLit("s"))) {
756 |     rawEcho(makeNimstrLit("saving gif okazz_221026a"));
757 |     saveGif("okazz_221026a", 5.0);
758 |     }
759 |     
760 | 
761 |   
762 | }
763 | </script>
764 | </main>
765 | <footer>
766 | <hr>
767 | <div class="nb-box">
768 |   <span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
769 |   <span></span>
770 |   <span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
771 | </div>
772 | </footer>
773 | <section id="source">
774 | <pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib, index, p5
775 | nbInit
776 | nbUseP5
777 | nb.addEntry(<span class="hljs-number">7</span>, <span class="hljs-string">&quot;Okazz 221026a&quot;</span>, <span class="hljs-string">&quot;&quot;&quot;
778 | Art by [Okazz](https://openprocessing.org/user/128718?view=sketches&amp;o=31),
779 | original at [openprocessing.org/sketch/1653811](https://openprocessing.org/sketch/1711659).
780 | &quot;&quot;&quot;</span>)
781 | nbText: <span class="hljs-string">&quot;&quot;&quot;
782 | License is [CreativeCommons Attribution NonCommercial ShareAlike](https://creativecommons.org/licenses/by-nc-sa/3.0/).
783 | 
784 | The original sketch has been ported from p5js to p5nim.
785 | &quot;&quot;&quot;</span>
786 | <span class="hljs-comment"># maybe this will be used to train an automatic translator</span>
787 | <span class="hljs-keyword">let</span> sourceOriginalJs = <span class="hljs-string">&quot;&quot;&quot;
788 | let palettes = [
789 |   ['#6b2d5c', '#f0386b', '#ff5376', '#e391db', '#f8c0c8'],
790 |   ['#ffe957', '#eec170', '#f2a65a', '#f58549', '#ff6c3f'],
791 |   ['#073b3a', '#0b6e4f', '#08a045', '#6bbf59', '#71deb2'],
792 |   ['#c52233', '#a51c30', '#a7333f', '#74121d', '#580c1f'],
793 |   ['#03045e', '#0077b6', '#00b4d8', '#90e0ef', '#caf0f8'],
794 |   ['#f8f9fa', '#dee2e6', '#adb5bd', '#495057', '#212529']
795 | ];
796 | let SEED = Math.floor(Math.random() * 1000000);
797 | let forms = [];
798 | 
799 | function setup() {
800 |   createCanvas(900, 900);
801 |   rectMode(CENTER);
802 |   // randomSeed(SEED)
803 |   //   background(255);
804 |   //   forms.push(new Form(width/2, height/2, 100));
805 |   let seg = 25;
806 |   let w = width / seg;
807 |   for (let i = 0; i &lt; seg; i++) {
808 |     for (let j = 0; j &lt; seg; j++) {
809 |       let x = i * w + w / 2;
810 |       let y = j * w + w / 2;
811 |       forms.push(new Form(x, y, w));
812 |     }
813 |   }
814 | }
815 | 
816 | function draw() {
817 |   background(255);
818 |   for (let f of forms) {
819 |     f.show();
820 |     f.move();
821 |   }
822 |   // this.x = x;
823 | 
824 |   // randomSeed(SEED)
825 |   // 
826 | }
827 | 
828 | function form(x, y, w) {
829 |   // let num = int(random());
830 |   let num = int(5);
831 |   let d = dist(width / 2, height / 2, x, y);
832 |   let c = int(map(d, 0, sqrt(sq(width / 2) + sq(height / 2)), 0, palettes.length * 2) + frameCount * 0.5);
833 |   let colors = palettes[c % palettes.length];
834 | 
835 |   // shuffle(colors, true);
836 |   for (let i = 0; i &lt; num; i++) {
837 |     let r = map(i, 0, num, 0, w / 2);
838 |     let ww = map(i, 0, num, w, 0);
839 |     let col = colors[i % colors.length];
840 |     fill(col);
841 |     rect(x, y, ww, ww, r);
842 |   }
843 | }
844 | 
845 | class Form {
846 |   constructor(x, y, w) {
847 |     this.x = x;
848 |     this.y = y;
849 |     this.w = w;
850 |     this.palettes = [];
851 |     for (let i = 0; i &lt; palettes.length; i++) {
852 |       let c = []
853 |       shuffle(palettes[i], true);
854 |       for (let j = 0; j &lt; 5; j++) {
855 |         c.push(palettes[i][j]);
856 |       }
857 |       this.palettes.push(c);
858 |     }
859 |     this.num = 5;
860 |     this.colors = [];
861 |   }
862 | 
863 |   show() {
864 |     let d = dist(width / 2, height / 2, this.x, this.y);
865 |     let c = int(map(d, sqrt(sq(width / 2) + sq(height / 2)), 0, 0, palettes.length) + frameCount * 0.02);
866 |     this.colors = this.palettes[c % palettes.length];
867 |     for (let i = 0; i &lt; this.num; i++) {
868 |       let r = map(i, 0, this.num, 0, this.w / 2);
869 |       let ww = map(i, 0, this.num, this.w, 0);
870 |       let col = this.colors[i % this.colors.length];
871 |       fill(col);
872 |       rect(this.x, this.y, ww, ww, r);
873 |     }
874 |   }
875 | 
876 |   move() {
877 | 
878 |   }
879 | 
880 | }
881 | &quot;&quot;&quot;</span>
882 | 
883 | nbJsFromCode:
884 |   <span class="hljs-keyword">import</span> std / [random, sequtils]
885 |   <span class="hljs-keyword">import</span> std / math <span class="hljs-keyword">except</span> sqrt
886 | 
887 |   <span class="hljs-keyword">var</span> palettes = @[
888 |     @[<span class="hljs-string">&quot;#6b2d5c&quot;</span>, <span class="hljs-string">&quot;#f0386b&quot;</span>, <span class="hljs-string">&quot;#ff5376&quot;</span>, <span class="hljs-string">&quot;#e391db&quot;</span>, <span class="hljs-string">&quot;#f8c0c8&quot;</span>],
889 |     @[<span class="hljs-string">&quot;#ffe957&quot;</span>, <span class="hljs-string">&quot;#eec170&quot;</span>, <span class="hljs-string">&quot;#f2a65a&quot;</span>, <span class="hljs-string">&quot;#f58549&quot;</span>, <span class="hljs-string">&quot;#ff6c3f&quot;</span>],
890 |     @[<span class="hljs-string">&quot;#073b3a&quot;</span>, <span class="hljs-string">&quot;#0b6e4f&quot;</span>, <span class="hljs-string">&quot;#08a045&quot;</span>, <span class="hljs-string">&quot;#6bbf59&quot;</span>, <span class="hljs-string">&quot;#71deb2&quot;</span>],
891 |     @[<span class="hljs-string">&quot;#c52233&quot;</span>, <span class="hljs-string">&quot;#a51c30&quot;</span>, <span class="hljs-string">&quot;#a7333f&quot;</span>, <span class="hljs-string">&quot;#74121d&quot;</span>, <span class="hljs-string">&quot;#580c1f&quot;</span>],
892 |     @[<span class="hljs-string">&quot;#03045e&quot;</span>, <span class="hljs-string">&quot;#0077b6&quot;</span>, <span class="hljs-string">&quot;#00b4d8&quot;</span>, <span class="hljs-string">&quot;#90e0ef&quot;</span>, <span class="hljs-string">&quot;#caf0f8&quot;</span>],
893 |     @[<span class="hljs-string">&quot;#f8f9fa&quot;</span>, <span class="hljs-string">&quot;#dee2e6&quot;</span>, <span class="hljs-string">&quot;#adb5bd&quot;</span>, <span class="hljs-string">&quot;#495057&quot;</span>, <span class="hljs-string">&quot;#212529&quot;</span>]
894 |   ]
895 |   <span class="hljs-keyword">let</span> <span class="hljs-type">SEED</span> = math.floor(random.rand(<span class="hljs-number">1.0</span>) * <span class="hljs-number">1000000</span>) <span class="hljs-comment"># using p5js.floor throws an error in console</span>
896 | 
897 |   <span class="hljs-keyword">type</span>
898 |     <span class="hljs-type">Form</span> = <span class="hljs-keyword">ref</span> <span class="hljs-keyword">object</span>
899 |       x, y, w: <span class="hljs-built_in">float</span>
900 |       palettes: <span class="hljs-built_in">seq</span>[<span class="hljs-built_in">seq</span>[<span class="hljs-built_in">string</span>]] 
901 |       num: <span class="hljs-built_in">int</span>
902 |       colors: <span class="hljs-built_in">seq</span>[<span class="hljs-built_in">string</span>]
903 | 
904 |   <span class="hljs-keyword">var</span> forms: <span class="hljs-built_in">seq</span>[<span class="hljs-type">Form</span>]
905 | 
906 |   <span class="hljs-keyword">proc</span> newForm(x, y, w: <span class="hljs-built_in">float</span>): <span class="hljs-type">Form</span> =
907 |     <span class="hljs-literal">result</span> = <span class="hljs-keyword">new</span> <span class="hljs-type">Form</span>
908 |     <span class="hljs-literal">result</span>.x = x
909 |     <span class="hljs-literal">result</span>.y = y
910 |     <span class="hljs-literal">result</span>.w = w
911 |     <span class="hljs-literal">result</span>.palettes = newSeqWith(<span class="hljs-number">0</span>, newSeq[<span class="hljs-built_in">string</span>]())
912 |     <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; len(palettes):
913 |       <span class="hljs-keyword">var</span> c = palettes[i]
914 |       shuffle(c)
915 |       <span class="hljs-literal">result</span>.palettes.add(c)
916 |     <span class="hljs-literal">result</span>.num = <span class="hljs-number">5</span>
917 |     <span class="hljs-literal">result</span>.colors = newSeq[<span class="hljs-built_in">string</span>]()
918 | 
919 |   <span class="hljs-keyword">proc</span> show(form: <span class="hljs-type">Form</span>) =
920 |     <span class="hljs-keyword">let</span> d = dist(width / <span class="hljs-number">2</span>, height / <span class="hljs-number">2</span>, form.x, form.y)
921 |     <span class="hljs-keyword">let</span> c = <span class="hljs-built_in">int</span>(map(d, sqrt(sq(width / <span class="hljs-number">2</span>) + sq(height / <span class="hljs-number">2</span>)), <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, palettes.len) + frameCount * <span class="hljs-number">0.02</span>)
922 |     form.colors = form.palettes[c <span class="hljs-keyword">mod</span> palettes.len]
923 |     <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; form.num:
924 |       <span class="hljs-keyword">let</span> r = map(<span class="hljs-built_in">float</span>(i), <span class="hljs-number">0</span>, form.num, <span class="hljs-number">0</span>, form.w / <span class="hljs-number">2</span>)
925 |       <span class="hljs-keyword">let</span> ww = map(<span class="hljs-built_in">float</span>(i), <span class="hljs-number">0</span>, form.num, form.w, <span class="hljs-number">0</span>)
926 |       <span class="hljs-keyword">let</span> col = form.colors[i <span class="hljs-keyword">mod</span> form.colors.len]
927 |       fill(col)
928 |       rect(form.x, form.y, ww, ww, r)
929 | 
930 |   <span class="hljs-comment"># no move needed</span>
931 | 
932 |   setup:
933 |     createCanvas(<span class="hljs-number">900</span>, <span class="hljs-number">900</span>)
934 |     rectMode(<span class="hljs-type">CENTER</span>)
935 |     <span class="hljs-comment"># randomSeed(SEED)</span>
936 |     <span class="hljs-comment">#   background(255)</span>
937 |     <span class="hljs-comment">#   forms.add(newForm(width/2, height/2, 100))</span>
938 |     <span class="hljs-keyword">let</span> seg = <span class="hljs-number">25</span>
939 |     <span class="hljs-keyword">let</span> w = width / seg
940 |     <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; seg:
941 |       <span class="hljs-keyword">for</span> j <span class="hljs-keyword">in</span> <span class="hljs-number">0</span> ..&lt; seg:
942 |         <span class="hljs-keyword">let</span> x = i * w + w / <span class="hljs-number">2</span>
943 |         <span class="hljs-keyword">let</span> y = j * w + w / <span class="hljs-number">2</span>
944 |         forms.add(newForm(x, y, w))       
945 | 
946 |   draw:
947 |     background(<span class="hljs-number">255</span>)
948 |     <span class="hljs-keyword">for</span> f <span class="hljs-keyword">in</span> forms:
949 |       f.show()
950 |       <span class="hljs-comment">#f.move()</span>
951 | 
952 | nbJsShowSource()
953 | nbJsFromCode():
954 |   keyPressed:
955 |     <span class="hljs-keyword">if</span> $key == <span class="hljs-string">&quot;s&quot;</span>:
956 |       <span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;saving gif okazz_221026a&quot;</span>
957 |       saveGif(<span class="hljs-built_in">cstring</span>(<span class="hljs-string">&quot;okazz_221026a&quot;</span>), <span class="hljs-number">5</span>)
958 | nbText: <span class="hljs-string">&quot;press 's' to export a 5 second gif&quot;</span>
959 | nbSave</code></pre>
960 | </section><script>
961 | function toggleSourceDisplay() {
962 |   var btn = document.getElementById("show")
963 |   var source = document.getElementById("source");
964 |   if (btn.innerHTML=="Show Source") {
965 |     btn.innerHTML = "Hide Source";
966 |     source.style.display = "block";
967 |   } else {
968 |     btn.innerHTML = "Show Source";
969 |     source.style.display = "none";
970 |   }
971 | }
972 | </script></body>
973 | </html>


--------------------------------------------------------------------------------