64 comments

[ 0.21 ms ] story [ 126 ms ] thread
So many memories of using a physical robot version of this at school. Good times.
(comment deleted)
Some of them are super impressive. Well I mean full fledged 3d renderers
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!

(comment deleted)
Yes, there is a download button for each drawing
Thanks, I confused it for an upload button.
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.

And once you can slow down the generation, it would also be lovely to highlight the line of code being executed as the picture was drawn!
well, it is javascript, so you could implement something like https://stackoverflow.com/questions/951021/what-is-the-javas...

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

  // 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
Immediately took me back to Logo and 9 year old me trying to figure out how to move the turtle :) Great memories!
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

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

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

How are you translating the sketches into files that work with Axidraw? I have one as well and would love to do the same!
The site has a "download as SVG" button on every render. It's small, in the bottom right corner of the rendered result pane.

It even comes with an option to optimize the paths to minimize pen travel for plotters :)

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...

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...

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

https://peterfidelman.github.io/constructor/

Thank you for finding this! Me and my siblings used to play with this for hours.
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!
This is basically Logo in Python. Looks like a good effort.
(comment deleted)
Love this site well done. Concept and design is pretty nice.
For anyone interested about this kind of things, I did something a bit similar for 3d voxel rendering: https://voxeltoy.com/, also inspired by shadertoy.
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/

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.

I won my first (and only) programming contest in Logo. Fun to see the idea alive.
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

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.

That's a really cool one. Do you know of any attempts to learn a connection gramar, instead of creating it by hand?
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.
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

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.
If you're into this kind of thing, I made a similar Turtle clone with a simpler syntax:

http://prismaco.de/

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

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...

DDoS of brogrammers and financially obsessed man-children. I think he nailed it. However the content in his pages is very lightweight and hosted in AWS it looks like so maybe that referrer logic pre-dates him hosting it and the DNA Lounge website there and... also because what he has to say is certifiably true. Good laugh.
why does hacker news redirect the link like that? isn't this a major bug and security issue?
It's JWZ's way of expressing his opinion of HN, by serving up content when HN is the referrer.
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.
HackerNews doesn't impose any link shortening. Which is great.
Oh, joy. Now we have to have a disucussion about jwz' anti-autistic bullshit.