
Turtletoy - njn
https://turtletoy.net/
======
jncraton
If you like this project, you may be interested in a similar project that I
did a while back using using the turtle interpretation of grammars to
represent connections between LEGO bricks:

[https://github.com/jncraton/connectiongrammar](https://github.com/jncraton/connectiongrammar)

The "API" is admittedly quite poor currently, as I just quickly hacked this
together on top of NLTK, but I was able to put together some fun results.

~~~
YeGoblynQueenne
That's a really cool one. Do you know of any attempts to learn a connection
gramar, instead of creating it by hand?

~~~
jncraton
I'm not aware of anything like that. It should be possible, though. When
models are available for the elements, as they are with LEGO, it should be as
simple as identifying connection types and mapping them to spatial movements.

------
rudolfwinestock
This reminds me of a story of how Logo was implemented on 8-bit
microcomputers.

Leigh Klotz was the man who ported MIT Logo to the Apple ][ and then the
Commodore 64. According to him “The Commodore 64 CPU 6510 has a bidirectional
parallel port at location 0 and 1, taking up 2 of the 256 "page zero"
locations, which are the only ones you can indirect through. When I ported MIT
Logo from the Apple II, there were lots of places that dereferenced nil
without checking, and those caused crashes. Commodore gave me a chip they
fabbed in qty 12 yield that brought out the I/D decide status as a pin, and we
used a Nicolet-Paratronica logic analyzer to feed the address and data bus to
a Pet running a BASIC disassembler. I could then set a breakpoint in-circuit
to see the 256 instructions prior to or after the errant memory access, so I
could go put on guard code...”

I got it from Jamie Zawinski's weblog. Be forewarned. Following the link from
Hacker News will lead to an unsavory image. Just copy & paste it, instead.

[https://www.jwz.org/blog/2018/11/weird-
machines/#comment-192...](https://www.jwz.org/blog/2018/11/weird-
machines/#comment-192213)

~~~
nikofeyn
why does hacker news redirect the link like that? isn't this a major bug and
security issue?

~~~
jachee
It's JWZ's way of expressing his opinion of HN, by serving up content when HN
is the referrer.

~~~
nikofeyn
oh. i didn't even notice the words at the time, probably because i wasn't
looking for it since i had no idea who this person is. i had made the
assumption that hacker news' link shortening did something to it.

~~~
cmbailey
HackerNews doesn't impose any link shortening. Which is great.

------
ebcode
I'm seeing some really interesting JavaScript techniques in the turtlevm.js[1]
source.

This line in particular stands out: const code =
String(work).trim().split("{").slice(1).join("{").slice(0, -
1).trim().replace("/0/", _turtlevmapi).replace("/1/", strCode);

It looks like the author is injecting the turtle code written by the user into
a "work" function that removes dangerous objects (XMLHttpRequest, WebSocket,
etc).

Can someone with experience writing a VM in JS point to a good reference on
the topic?

[1][https://turtletoy.net/js/turtlevm.js?v=56](https://turtletoy.net/js/turtlevm.js?v=56)

~~~
whyonearth
I certainly hope that isn't the intent, because there are other ways to
generate network requests (new Image() and fetch(), for example). Sandboxing
JS eval is a very hard problem and even Angular 1's "bulletproof" sandboxed
template engine was repeatedly owned. I'd be wary of XSS on any site like this
one.

------
aarondf
Go to this one [1], change the GEAR_NUM to like 30 and enjoy the rendering

1:
[https://turtletoy.net/turtle/9ddc6d4dc5](https://turtletoy.net/turtle/9ddc6d4dc5)

~~~
milancurcic
Tweaking the value of PI2 is a lot of fun..

~~~
antoineMoPa
As a potential future engineer, 2 * pi is pretty much 10.

------
azeirah
Ahhh, love this site. I own an axidraw pen plotter, and because I'm feeling
generous, I'll print every sketch made by people in this HN thread.

<3

~~~
antoineMoPa
I fear the method I used here will be really inefficient on a pen plotter
though:
[https://turtletoy.net/turtle/63b170ed47](https://turtletoy.net/turtle/63b170ed47)

(Lots of useless moves happen while the pen is up)

~~~
azeirah
Theeere you go!

[http://imgur.com/gallery/7PmEM5p](http://imgur.com/gallery/7PmEM5p)

It didn't take too long, the pen up movements were fine

~~~
azeirah
Oh, and here's a hyperlapse of the plot, I started recording about 20 seconds
in.

[http://imgur.com/gallery/UjtiQXy](http://imgur.com/gallery/UjtiQXy)

This plot took about 3 minutes in total, the gears one took about 15.

~~~
antoineMoPa
This is so cool!!!!!

------
deyan
Immediately took me back to Logo and 9 year old me trying to figure out how to
move the turtle :) Great memories!

------
guillaumec
For anyone interested about this kind of things, I did something a bit similar
for 3d voxel rendering: [https://voxeltoy.com/](https://voxeltoy.com/), also
inspired by shadertoy.

------
antoineMoPa
I have seen this site some days ago (reddit maybe?) and I really like the
concept! The design is very clean!

One feature I'd like: A way to slow down the render so we can see the whole
generation in slow-motion.

~~~
gabriel34
well, it is javascript, so you could implement something like
[https://stackoverflow.com/questions/951021/what-is-the-
javas...](https://stackoverflow.com/questions/951021/what-is-the-javascript-
version-of-sleep)

the async way doesn't seem to work inside the walk function, but the older
(and uglier imo) way does

As an example here is the modified code for
[https://turtletoy.net/turtle/eed0f57234](https://turtletoy.net/turtle/eed0f57234)

    
    
      // You can find the Turtle API reference here: https://turtletoy.net/syntax
      Canvas.setpenopacity(1);
      
      // Global code will be evaluated once.
      const turtle = new Turtle();
      turtle.penup();
      turtle.goto(0,0);
      turtle.pendown();
      
      function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      }
      function pausecomp(millis)
      {
          var date = new Date();
          var curDate = null;
          do { curDate = new Date(); }
          while(curDate-date < millis);
      }
      // The walk function will be called until it returns false.
      function walk(i) {
          turtle.forward(i);
          turtle.right(150);
          //await sleep(100); //await not valid inside the walk function
          pausecomp(50)
          return i < 200;
      }
    

edit: implemented:
[https://turtletoy.net/turtle/e99ca811ad](https://turtletoy.net/turtle/e99ca811ad)

------
kayamon
I am highly impressed that some of these actually implement wireframe hidden
surface removal:

[https://turtletoy.net/turtle/9ddc6d4dc5](https://turtletoy.net/turtle/9ddc6d4dc5)

------
mrspeaker
Not really in the true spirit of turtle (if it doesn't "go forward" I don't
count it!), but I had to make this one based on the MAD computer program
discussed here yesterday.

[https://turtletoy.net/turtle/ba15abdde7](https://turtletoy.net/turtle/ba15abdde7)

~~~
drostie
I saw yours and went for Buddhabrot:
[https://turtletoy.net/turtle/e196b49813](https://turtletoy.net/turtle/e196b49813)

------
DBYCZ
This reminded me of a physics toy I saw ~10 years ago where you would draw
simple two-dimensional robots with legs and muscles, optimize their gait, and
race them.

If only I could remember the name of it...

~~~
scrumbledober
I am reminded of what i believe is the same thing constantly and can never
find it. I always thought it was called something like Sodaracer but searches
have been unsuccessful. I remember evolution algorithms to make the fastest
amoeba wheels.

EDIT: soda constructor by sodaplay.

[http://maciejmatyka.blogspot.com/2018/02/soda-constructor-
re...](http://maciejmatyka.blogspot.com/2018/02/soda-constructor-
revisited.html)

EDIT2: from that link, here is a playable open source recreation linked at the
bottom

[https://peterfidelman.github.io/constructor/](https://peterfidelman.github.io/constructor/)

~~~
DBYCZ
Thank you for finding this! Me and my siblings used to play with this for
hours.

~~~
scrumbledober
thank you for inspiring the search that finally found it. I can't wait to get
done with work today and go build some bots!

------
_xgw
Reminds me of [https://dwitter.net](https://dwitter.net): you get 140
characters to animate an HTML canvas.

------
chime
While TurtleToy is way more advanced, few years ago I built a small webapp
that uses nested CSS to make recursive images:
[https://zetabee.com/weave/](https://zetabee.com/weave/)

Click [Help] button to get an idea of how it works. It was heavily inspired by
Structure Synth but written from scratch to work with CSS3 in a modern
browser.

------
welly
This takes me back. I remember learning Logo at school when I was 10 or 11 and
had a project to do using Logo. For some reason I couldn't make it into school
for a few weeks, I'm not sure if I was ill or something else but was going to
miss the project hand in date, so I wrote the code on paper while I was at
home as I didn't have a Logo compiler or interpreter for my ZX Spectrum. My
teacher put my code into the interpreter and it ended up looking exactly as I
had expected. I think it was a tank and used procedures/functions which was
above and beyond what we'd been taught.

Of course Logo wasn't the most complex language ever but I remember being
pretty pleased with myself having written a computer program on a bit of paper
and it doing exactly what I'd visualised it to do.

~~~
timbit42
> Of course Logo wasn't the most complex language ever

Logo's turtle graphics aren't the most complex language ever, but underneath
of it is a Lisp without the parentheses, which is quite powerful including
list processing and recursion.

~~~
welly
Well, I didn't know that! My Logo days are well past and have no recollection
of doing anything more than using turtle graphics to draw tanks.

------
ArtWomb
I am so glad this exists. Turtle Graphics remains the best way to teach so
many fundamental concepts. From recursion to path finding.

One feature that I wish existed was library import. Or community accepted set
of extension modules. An easy way to call polar coordinates, Spirographs,
matrix transforms, etc.

------
viach
Reminds me of Context Free Art
[https://www.contextfreeart.org/](https://www.contextfreeart.org/)

They developed their own declarative language for generating art.

------
agumonkey
Some of them are super impressive. Well I mean full fledged 3d renderers

------
ejo4041
Is it possible to get vector files of some sort out of these? .SVG, .AI, .PDF,
or something similar would be awesome.

Edit: I meant directly from the site. I could do it from my desktop using
python.

PS, this is awesome!

~~~
Jack5500
Yes, there is a download button for each drawing

~~~
ejo4041
Thanks, I confused it for an upload button.

------
nottwo
These are great!

Also reminds me of the Forth Haiku Salon:
[https://forthsalon.appspot.com/](https://forthsalon.appspot.com/)

------
etrautmann
If you're into this, you might also be interested in robotic pen plotters.
This article from last year kicked off a serious new hobby for me which
combines code/art/robotics/etc and has been a ton of fun.

[http://www.tobiastoft.com/posts/an-intro-to-pen-
plotters](http://www.tobiastoft.com/posts/an-intro-to-pen-plotters)

------
jlesk
If you're into this kind of thing, I made a similar Turtle clone with a
simpler syntax:

[http://prismaco.de/](http://prismaco.de/)

But I also like the approach here of using Turtle as a way to introduce
JavaScript syntax. :)

------
neiled
So many memories of using a physical robot version of this at school. Good
times.

------
baby
I suggest adding this to the title: "Create your own generative art using a
minimalistic Turtle graphics API."

~~~
alpb
Agreed, no clickbait title like a single-word non-explanatory title on the
front-page top 10. It will definitely get more clicks than the title you
proposed.

------
damck
I won my first (and only) programming contest in Logo. Fun to see the idea
alive.

------
beaugunderson
if you want an even more minimalist API you can try out lindenmoji:

[https://twitter.com/lindenmoji](https://twitter.com/lindenmoji)

------
sonatas
Love this site well done. Concept and design is pretty nice.

------
glitchc
This is basically Logo in Python. Looks like a good effort.

~~~
rrherr
in JavaScript

