ianthehenry / toodle.studio Goto Github PK

View Code? Open in Web Editor NEW

61.0 3.0 2.0 1.32 MB

turtle graphics playground

License: MIT License

Shell 3.39% Janet 23.69% Nix 0.11% C++ 7.80% JavaScript 1.30% TypeScript 55.38% CSS 8.34%

janet janet-lang playground turtle-graphics art lisp procedural-art procedural-generation wasm webassembly

toodle.studio's Introduction

Toodle Studio

Turtle doodles!

I wrote this app for Chapter Ten of Janet for Mortals, as a demonstration of how to embed the Janet Programming Language into a WebAssembly app.

It began life as a heavily-simplified fork of Bauble, which is -- in my opinion -- a much more interesting graphics playground. But Toodle.Studio is stateful, and Bauble.Studio is stateless, so the Janet interop bits are a bit more interesting here.

Dependencies

emscripten
redo
yarn
Janet 1.29.1

Bauble requires at least Janet 1.29.1. It may work with newer versions of Janet, assuming that the image format is compatible, but it's better to update the version of Janet that Bauble includes to match your local version.

Afterwards, install JavaScript dependencies with:

$ yarn
$ (cd ui && yarn)

Building

Dev build:

$ redo

Prod build:

$ BUILD_MODE=prod redo

Lint the JS with:

(cd ui/; yarn eslint .)

After building, you can serve a local copy like this:

$ node_modules/.bin/alive-server public

toodle.studio's People

Contributors

Stargazers

Watchers

Forkers

aaron-em xrd

toodle.studio's Issues

recent redo does not seem to work (OSX)

Toodle > git clone https://github.com/ianthehenry/toodle.studio
Cloning into 'toodle.studio'...
remote: Enumerating objects: 394, done.
remote: Counting objects: 100% (394/394), done.
remote: Compressing objects: 100% (173/173), done.
remote: Total 394 (delta 212), reused 376 (delta 194), pack-reused 0
Receiving objects: 100% (394/394), 1015.70 KiB | 3.28 MiB/s, done.
Resolving deltas: 100% (212/212), done.
Toodle > cd toodle.studio
Toodle > redo --version
0.42d
Toodle > cd ui 
Toodle > yarn 
yarn install v1.22.19
warning package.json: No license field
warning [email protected]: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "codemirror > @codemirror/[email protected]" has unmet peer dependency "@lezer/common@^1.0.0".
[4/4] 🔨  Building fresh packages...

✨  Done in 1.72s.
Toodle > cd ..
Toodle > redo
redo  all
redo    build/public.tree
redo: no rule to redo 'main.css{,.checksum}'
redo    build/public.tree (exit 1)
redo  all (exit 1)

My version of redo (https://github.com/apenwarr/redo/tags) appears to be the most recent version (installed via homebrew).

Is there a preparation step before running redo?

Assistance fixing my hypotrochoid illustration

I'm trying to get this code to work (basically copied from here: https://en.wikipedia.org/wiki/Hypotrochoid)

(defn hypotrochoid [fn fn2 r big-r t d time]
  ~(+ 
    (* d (,fn ( 
      (* t (/ (- big-r r) r)  
    ))))
    ( * (- big-r r) (,fn2 t)))
)

(toodle {:speed 3 :position [100 50]}
  (set self.position 
    (hypotrochoid cos sin 3 5 2.3 2 self.age))
#  (turn 0.01)
)

(this is modeled off the loop example more or less)

I'm very new to macros and have no idea if this is correct, but hey, it compiles!

But, now I get this in the error console and am not sure how to continue. I assume this means I am not returning the correct thing (and each generator has a chance to do one of four things...)?

doodle error "need numbers or vectors"

Thanks so much for your book, I'm excited to play more with toodle and janet!

redo does not work with my version of janet

I didn't have janet installed, so I added to shell.nix. But, redo does not like it.

(thanks for using shell.nix, it makes setup here so easy!)

I did do yarn install in root and ui directory beforehand, btw.

[nix-shell:~/Projects/toodle.studio]$ git diff
diff --git a/shell.nix b/shell.nix
index ae57746..1f362da 100644
--- a/shell.nix
+++ b/shell.nix
@@ -7,5 +7,6 @@ mkShell {
     pandoc
     nodejs
     redo-apenwarr
+    janet
   ];
 }
[nix-shell:~/Projects/toodle.studio]$ janet -v
1.21.2-release

[nix-shell:~/Projects/toodle.studio]$ redo
redo  all
redo    build/public.tree
redo      (main.css)
redo      build/mode
redo      build/all.js
redo        build/wasm.js
redo          build/toodles.jimage
error: src/gl/builtins.janet:12:1: compile error: macro arity mismatch, expected at least 3, got 1
  in dofile [boot.janet] (tailcall) on line 2744, column 7
  in source-loader [boot.janet] on line 2754, column 15
  in require-1 [boot.janet] on line 2774, column 18
  in import* [boot.janet] on line 2805, column 15
  in _thunk [src/helpers.janet] (tailcall) on line 1, column 1
  in dofile [boot.janet] (tailcall) on line 2743, column 7
  in source-loader [boot.janet] on line 2754, column 15
  in require-1 [boot.janet] (tailcall) on line 2774, column 18
  in _thunk [src/evaluator.janet] (tailcall) on line 6, column 30
  in dofile [boot.janet] (tailcall) on line 2743, column 7
  in source-loader [boot.janet] on line 2754, column 15
  in require-1 [boot.janet] on line 2774, column 18
  in import* [boot.janet] on line 2805, column 15
  in _thunk [src/init.janet] (tailcall) on line 1, column 1
  in dofile [boot.janet] on line 2743, column 7
  in c-switch [boot.janet] (tailcall) on line 3696, column 19
  in cli-main [boot.janet] on line 3733, column 13
redo          build/toodles.jimage (exit 1)
redo        build/wasm.js (exit 1)
redo      build/all.js (exit 1)
redo    build/public.tree (exit 1)
redo  all (exit 1)

Local build has JS console errors

In the UI, it says:

unable to initialize evaluator

In JS console, errors include:

program exited (with status: 0), but keepRuntimeAlive() is set (counter=0) due to an async operation, so halting execution but not exiting the runtime or preventing further async execution (you can use emscripten_force_exit, if you want to force a true shutdown)

And:

function uninitialized [all.086af95eaf4ece49.js:37466:19](http://127.0.0.1:8080/all.086af95eaf4ece49.js)
    renderLoop http://127.0.0.1:8080/all.086af95eaf4ece49.js:37466
    runUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:740
    batch http://127.0.0.1:8080/all.086af95eaf4ece49.js:411
    renderLoop http://127.0.0.1:8080/all.086af95eaf4ece49.js:37453
    schedule http://127.0.0.1:8080/all.086af95eaf4ece49.js:28217
    (Async: FrameRequestCallback)
    schedule http://127.0.0.1:8080/all.086af95eaf4ece49.js:28213
    App http://127.0.0.1:8080/all.086af95eaf4ece49.js:37484
    result http://127.0.0.1:8080/all.086af95eaf4ece49.js:436
    untrack http://127.0.0.1:8080/all.086af95eaf4ece49.js:417
    on http://127.0.0.1:8080/all.086af95eaf4ece49.js:436
    runComputation http://127.0.0.1:8080/all.086af95eaf4ece49.js:639
    updateComputation http://127.0.0.1:8080/all.086af95eaf4ece49.js:622
    runTop http://127.0.0.1:8080/all.086af95eaf4ece49.js:724
    runUserEffects http://127.0.0.1:8080/all.086af95eaf4ece49.js:821
    completeUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:790
    runUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:740
    completeUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:790
    runUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:741
    completeUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:790
    runUpdates http://127.0.0.1:8080/all.086af95eaf4ece49.js:741
    createRoot http://127.0.0.1:8080/all.086af95eaf4ece49.js:173
    render http://127.0.0.1:8080/all.086af95eaf4ece49.js:1663
    <anonymous> http://127.0.0.1:8080/all.086af95eaf4ece49.js:45222
    (Async: promise callback)
    <anonymous> http://127.0.0.1:8080/all.086af95eaf4ece49.js:45219
    (Async: EventListener.handleEvent)
    <anonymous> http://127.0.0.1:8080/all.086af95eaf4ece49.js:45207
    <anonymous> http://127.0.0.1:8080/all.086af95eaf4ece49.js:452

Build steps:

 > redo clean
redo  clean
 > redo      
redo  all
redo    build/public.tree
redo      build/main.css
redo        build/mode
redo      build/main.css (resumed)

225:3	⚠  start value has mixed support, consider using flex-start instead [autoprefixer]
498:3	⚠  You should write display: flex by final spec instead of display: box [autoprefixer]

redo      build/main.css.checksum
redo      build/all.js
redo        build/wasm.js
redo          build/toodles.jimage
redo      build/all.js (resumed)                                                                                              

main.tsx → ../build/all.js.redo.tmp...
(!) Plugin typescript: @rollup/plugin-typescript TS2322: Type '{ "xlink:href": string; }' is not assignable to type 'UseSVGAttributes<SVGUseElement>'.
  Property 'xlink:href' does not exist on type 'UseSVGAttributes<SVGUseElement>'.
app.tsx: (195:105)

195     <a class="image-link" target="_blank" href="https://github.com/ianthehenry/toodle.studio"><svg><use xlink:href="/icons.svg#github"/></svg></a>
                                                                                                            ~~~~~~~~~~

created ../build/all.js.redo.tmp in 1.4s
redo      build/all.js.checksum                                                                                               
 > janet -v
1.27.0-3858b2e1
 > redo --version
0.42d
 > emcc --version 
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.35-git
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

A cloodle that returns nil should automatically die

a totally normal issue title

ianthehenry / toodle.studio Goto Github PK

toodle.studio's Introduction

Toodle Studio

Dependencies

Building

toodle.studio's People

Contributors

Stargazers

Watchers

Forkers

toodle.studio's Issues

recent redo does not seem to work (OSX)

Assistance fixing my hypotrochoid illustration

redo does not work with my version of janet

Local build has JS console errors

A cloodle that returns nil should automatically die

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent