7 ms·

Pencil code

182 points by xiaq 12y ago

flipp3r 12y ago
Is this made with Blockly ( https://developers.google.com/blockly/ https://developers.google.com/blockly/ ) or a copy of it? There's already many sites using blockly to learn to code, the example linked looks much like a copy of Google's Maze example https://blockly-games.appspot.com/maze?lang=en https://blockly-games.appspot.com/maze?lang=en
- xiaq 12y ago
  The block editor is Droplet: https://github.com/PencilCode/droplet https://github.com/PencilCode/droplet. The author of Pencil Code has a good paper which outlined the history of block editors: http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf.
azurelogic 12y ago
At first glance, this looks like a modern implementation of Logo: http://en.wikipedia.org/wiki/Logo_%28programming_language%29 http://en.wikipedia.org/wiki/Logo_%28programming_language%29
- shultays 12y ago
  It even has a turtle
- jegutman 12y ago
  Logo was how I got my start, took me many years to look back and realize that it was even programming, it was so much fun, I would draw crazy scenes. I really wish I had access to any of my old work.
paines 12y ago
Maybe https://scratch.mit.edu/ https://scratch.mit.edu/
- raimondious 12y ago
  We're hiring! http://scratch.mit.edu/jobs/ http://scratch.mit.edu/jobs/
xiaq 12y ago
For anyone wondering about the similarity of the block editor (called Droplet) with Blockly, Scatch, etc., the author of Pencil Code has a good paper on Droplet and previous work: http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf
yagyu 12y ago
I thought of http://pencil-code.nordita.org http://pencil-code.nordita.org (large scale academic finite-difference solver for magnetohydrodynamics, applications for solar dynamics, supernovas etc) (no affiliation, I just work in a related area)
Dorian-Marie 12y ago
Pretty awesome, you can write functions, use variables, etc... This is how I always wanted Scratch to be, thanks.
TazeTSchnitzel 12y ago
> Learn professional programming languages using an editor that lets you work in either blocks or text. I was hoping this would be a visual editor for existing mainstream languages (Python, JS, PHP, C#, etc.). Sadly it isn't, but this makes me want to make one.
- xiaq 12y ago
  It is, for JavaScript and CoffeeScript. Additional adapters can also be created. Read http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf :)
  - TazeTSchnitzel 12y ago
    Oh I see! I hadn't noticed it was CoffeeScript.
Sputum 12y ago
http://sputum.pencilcode.net/edit/first http://sputum.pencilcode.net/edit/first :)
kleer001 12y ago
Thanks OP! That is flipping sweet! Ahh man, takes me back to 1982 sitting in from of an Apple II in 2nd grade fiddling with turtle. Shudders... Ugh, so old. Makes me want to abandon using these new fangled 3D Animation FX softwares and make some green lines and purple circles, drink some Ovaltine, eat some cookies and have a nap. Sorry, had all the nostalgia there. This must be memory triggerings too, right?
- 0xdeadbeefbabe 12y ago
  Making glowing green lines and purple circles is harder than it used to be, because that combination of hardware isn't popular[0]. It might not be that hard to use an old monitor, but it was easier in 92. [0] https://news.ycombinator.com/item?id=7066657 https://news.ycombinator.com/item?id=7066657
  - kleer001 12y ago
    Ahaha, noice1, never thought to take it that far. Seems like there's most probably a web page out there that will do glowing green terminal emulation of some sort. Nothing's going to fit me in my old aquaman under-roos though, lol!
aasarava 12y ago
For those of you feeling nostalgia for Turtle Logo: http://turtleacademy.com/ http://turtleacademy.com/
morley 12y ago
This is really cool. One suggestion -- expand the function names! It took me a little bit to figure out that "fd" was "forward" and "rt" was "right." It doesn't seem like that much more time to type out "forward" than "fd" -- especially if you're just clicking on function names -- and it'd go a long way in making the code more approachable and readable.
Alupis 12y ago
I like these types of projects. Easy to use and easy to get kids into basic coding. Would be a great piece to use in schools for an upcoming "Day of Code".
vinceyuan 12y ago
It's super good for beginners, especially for kids!
deleted 12y ago
[deleted]
mayli 12y ago
Pencil code = Droplet + LOGO.
atentaten 12y ago
Logo Writer and Turtle Graphics! Definitely brings back memories. This is great for early beginners and children. This makes me wonder about what we could create that's similar to this, but for more robust work for adults.
MarcScott 12y ago
This looks amazing, and pretty sure I'll be using it with my students. Would be nice if it supported Python, as that's our preferred language, but JS will do.
- xiaq 12y ago
  You will be happy to know that the author is interested in adding Python support and has listed it as a potential GSoC project (http://ideas.pencilcode.net/ http://ideas.pencilcode.net/).
AKrumbach 12y ago
I couldn't really help myself ... whenever I see any sort of "turtle graphics" engine, I have to re-write my favorite line-art program: http://doctorfractal.pencilcode.net/edit/mystery_one http://doctorfractal.pencilcode.net/edit/mystery_one Sadly, that halts only a tiny way into the drawing when "speed Infinity" is set, and even at "speed 1000" the turtle still seems to run pretty slow (at least it finishes the whole drawing that way).
- pokpokpok 12y ago
  To anyone who can't see output: adjust the "origin" by changing the first jumpxy block to (-50,-50)
leni536 12y ago
I like writing fractals in logo. http://leni536.pencilcode.net/edit/koch http://leni536.pencilcode.net/edit/koch

182 points by xiaq 12y ago

Is this made with Blockly ( https://developers.google.com/blockly/ https://developers.google.com/blockly/ ) or a copy of it? There's already many sites using blockly to learn to code, the example linked looks much like a copy of Google's Maze example https://blockly-games.appspot.com/maze?lang=en https://blockly-games.appspot.com/maze?lang=en

xiaq 12y ago
The block editor is Droplet: https://github.com/PencilCode/droplet https://github.com/PencilCode/droplet. The author of Pencil Code has a good paper which outlined the history of block editors: http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf.

azurelogic 12y ago

At first glance, this looks like a modern implementation of Logo: http://en.wikipedia.org/wiki/Logo_%28programming_language%29 http://en.wikipedia.org/wiki/Logo_%28programming_language%29

shultays 12y ago
It even has a turtle
jegutman 12y ago
Logo was how I got my start, took me many years to look back and realize that it was even programming, it was so much fun, I would draw crazy scenes. I really wish I had access to any of my old work.

paines 12y ago

Maybe https://scratch.mit.edu/ https://scratch.mit.edu/

raimondious 12y ago
We're hiring! http://scratch.mit.edu/jobs/ http://scratch.mit.edu/jobs/

xiaq 12y ago

For anyone wondering about the similarity of the block editor (called Droplet) with Blockly, Scatch, etc., the author of Pencil Code has a good paper on Droplet and previous work: http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf

yagyu 12y ago

I thought of http://pencil-code.nordita.org http://pencil-code.nordita.org (large scale academic finite-difference solver for magnetohydrodynamics, applications for solar dynamics, supernovas etc) (no affiliation, I just work in a related area)

Dorian-Marie 12y ago

Pretty awesome, you can write functions, use variables, etc... This is how I always wanted Scratch to be, thanks.

TazeTSchnitzel 12y ago

> Learn professional programming languages using an editor that lets you work in either blocks or text. I was hoping this would be a visual editor for existing mainstream languages (Python, JS, PHP, C#, etc.). Sadly it isn't, but this makes me want to make one.

xiaq 12y ago
It is, for JavaScript and CoffeeScript. Additional adapters can also be created. Read http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf http://ideas.pencilcode.net/home/htmlcss/droplet-paper.pdf :)
- TazeTSchnitzel 12y ago
  Oh I see! I hadn't noticed it was CoffeeScript.

Sputum 12y ago

http://sputum.pencilcode.net/edit/first http://sputum.pencilcode.net/edit/first :)

kleer001 12y ago

Thanks OP! That is flipping sweet! Ahh man, takes me back to 1982 sitting in from of an Apple II in 2nd grade fiddling with turtle. Shudders... Ugh, so old. Makes me want to abandon using these new fangled 3D Animation FX softwares and make some green lines and purple circles, drink some Ovaltine, eat some cookies and have a nap. Sorry, had all the nostalgia there. This must be memory triggerings too, right?

0xdeadbeefbabe 12y ago
Making glowing green lines and purple circles is harder than it used to be, because that combination of hardware isn't popular[0]. It might not be that hard to use an old monitor, but it was easier in 92. [0] https://news.ycombinator.com/item?id=7066657 https://news.ycombinator.com/item?id=7066657
- kleer001 12y ago
  Ahaha, noice1, never thought to take it that far. Seems like there's most probably a web page out there that will do glowing green terminal emulation of some sort. Nothing's going to fit me in my old aquaman under-roos though, lol!

aasarava 12y ago

For those of you feeling nostalgia for Turtle Logo: http://turtleacademy.com/ http://turtleacademy.com/

morley 12y ago

This is really cool. One suggestion -- expand the function names! It took me a little bit to figure out that "fd" was "forward" and "rt" was "right." It doesn't seem like that much more time to type out "forward" than "fd" -- especially if you're just clicking on function names -- and it'd go a long way in making the code more approachable and readable.

Alupis 12y ago

I like these types of projects. Easy to use and easy to get kids into basic coding. Would be a great piece to use in schools for an upcoming "Day of Code".

vinceyuan 12y ago

It's super good for beginners, especially for kids!

deleted 12y ago

[deleted]

mayli 12y ago

Pencil code = Droplet + LOGO.

atentaten 12y ago

Logo Writer and Turtle Graphics! Definitely brings back memories. This is great for early beginners and children. This makes me wonder about what we could create that's similar to this, but for more robust work for adults.

MarcScott 12y ago

This looks amazing, and pretty sure I'll be using it with my students. Would be nice if it supported Python, as that's our preferred language, but JS will do.

xiaq 12y ago
You will be happy to know that the author is interested in adding Python support and has listed it as a potential GSoC project (http://ideas.pencilcode.net/ http://ideas.pencilcode.net/).

AKrumbach 12y ago

I couldn't really help myself ... whenever I see any sort of "turtle graphics" engine, I have to re-write my favorite line-art program: http://doctorfractal.pencilcode.net/edit/mystery_one http://doctorfractal.pencilcode.net/edit/mystery_one Sadly, that halts only a tiny way into the drawing when "speed Infinity" is set, and even at "speed 1000" the turtle still seems to run pretty slow (at least it finishes the whole drawing that way).

pokpokpok 12y ago
To anyone who can't see output: adjust the "origin" by changing the first jumpxy block to (-50,-50)

leni536 12y ago

I like writing fractals in logo. http://leni536.pencilcode.net/edit/koch http://leni536.pencilcode.net/edit/koch