Hacker News new | past | comments | ask | show | jobs | submit login
Turtletoy (turtletoy.net)
382 points by njn on Dec 14, 2018 | hide | past | favorite | 61 comments



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.


That is really cool!


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.


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.


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

1: https://turtletoy.net/turtle/9ddc6d4dc5



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


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


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)


Theeere you go!

http://imgur.com/gallery/7PmEM5p

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


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

http://imgur.com/gallery/UjtiQXy

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


This is so cool!!!!!


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 :)


That's huge! Thanks


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


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.


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.


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


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!


+1


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

https://turtletoy.net/turtle/9ddc6d4dc5


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


I saw yours and went for Buddhabrot: https://turtletoy.net/turtle/e196b49813


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!


Reminds me of https://dwitter.net: you get 140 characters to animate an HTML canvas.


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.


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.


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


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.


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.


Reminds me of Context Free Art https://www.contextfreeart.org/

They developed their own declarative language for generating art.


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!


Yes, there is a download button for each drawing


Thanks, I confused it for an upload button.


These are great!

Also reminds me of the Forth Haiku Salon: https://forthsalon.appspot.com/


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


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


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


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


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.


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


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

https://twitter.com/lindenmoji


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


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


in JavaScript




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: