Soramame.Block」カテゴリーアーカイブ

Processingでタートル言語を作ってみた

screenshot_s

Scratchみたいなツールから、ビスケット塾みたいな勉強会まで、子供向けのプログラミング教育が、一種のブームになっていますが、その源流にあるのが、シーモア・パパートLOGOだったりします。

LOGOで特徴てきなのが、タートルグラフィックスと呼ばれる機能ですね。亀ロボットを操作することで、子供でも手軽にコンピュータでグラフィックを描いてみることができます。Scratchにも、同じような機能が搭載されています。

そんなタートルグラフィックスを実現するタートル言語「p5_turtle.js」を、Processingで作ってみました。ProcessingのJavascript実装である、p5.jsで作ってあるので、ブラウザだけでそのまま動作します。

これまでもProcessingに、タートル言語ライブラリはあったのですが、ライセンスが厳しかったりして、個人的にはイマイチ使いづらいと感じていました。そこで、そのあたりをゆるくして。さらに、がんばって、カメが絵を描く軌跡をアニメーションで表示する機能も盛り込みました。

ただし、まだエディタ機能を持たせていないので、jsファイルを直接編集する必要がありますし、コマンドもまだ4つくらいしかありません。

とはいえ、p5.jsとスプライトなどをサポートするp5.play.jsライブラリのおかげで、わりと簡単に機能拡張できそうなので、もう少し遊べるオモチャにしてみたいと思います。


CoffeeScriptをブロック型エディタで学習できる「Pencil Code」

pencil-code.net

Pencil Code」(ペンシルコード)は、ScratchやBlocklyのようなブロック型エディタを使って、プロフェッショナル向けの本格的なプログラミング言語を学習できるサイトです。ブラウザだけで、ブロック型エディタとテキストエディタを交互に切り換えて、気軽にプログラミングを体験したり、結果を共有することができます。

Pencil Codeは、GoogleのパートタイムプログラマーであるDavid Bauと、その息子のAnthony Bau、Code.orgのスタッフらによって提供されています。
かなり完成度が高いです。
また、サイトのリソースは、ほとんど全てがオープンソースで公開されているようです。
今回は、このPencil Codeについて簡単に紹介します。
続きを読む


mameblock.js:Beta ver.0.1.4 – ちょっとだけ、Processingが編集できるようになりました

lego_computer3

mameblock.js:Beta ver.0.14を公開しました。
今回は、サンプルを追加して、ちょっとだけProcessing(P5.js)が編集/実行可能になりました。

Processingは、デザイナーやアーティストのクリエイティブ・コーディングのためのプログラミング言語です。p5.jsは、それをJavascriptで実装したライブラリです。今回、mameblock.jsで、Processing/p5.jsのプログラムを編集/実行できるようにしてみました。

続きを読む


mameblock.js:Beta ver.0.1.3 – シンプルなビジュアルプログラム編集ライブラリ

lego_computer2

長らく作っていた、mameblock.js:Beta ver.0.13を公開しました。
ScratchやBlocklyのような、ブロック型プログラミングを実現する、シンプルなJavascriptライブラリです。

  • シンプル: ほんの100行のJavascriptコードと、いくつかのライブラリで構成
  • 埋め込み : Webページやアプリに、あなた独自のビジュアルコードエディタを埋め込み
  • オープンソース : MITライセンスで提供

続きを読む


100行のJavaScriptで ビジュアルプログラミング言語(のフロントエンド)を作ってみた、という話をした

OSC 2015 Tokyo SpringのLLで、久しぶりにライトニングトークしてみたら、半分しか話せなかったのですが、もし、興味のある方がいれば、ご意見・ご感想をいただければ!

追記:2015-03-12 html5jの「HTML5とか勉強会の大ライトニングトーク大会」でもしゃべってみました。それに合わせて、スライドもアップデート。タートルグラフィックのデモを追加。