ゲームライブラリ整備計画、egcanvas.js に続き、サンプルゲーム用のステキ素材を発見!

egcharmaker
ぴぽや倉庫さんのモンタージュ合成可能なキャラクターを使ったwebアプリを作り始めました。 まだまだ荒削りですが、パーツを選んで、いろんなキャラクターを作れます!(ちゃんと作成するには、chracter.xmlのorderに従った並び順の調整が必要ですが、未対応)

ドット絵ならではのかわいさがありますね!

営利利用も加工もOK、素材としての販売だけは禁止という、オープンデータに近いライセンス体系。 参考に新たなキャラクターを描くのも楽しいかもしれませんね! (素材利用規約 - ぴぽやblog

ディレクトリ(フォルダ)構造の素材データをjson化するDeno用ライブラリ dir2json.js を使った makejson.js によって作成する res.json を使ったwebアプリ。 RPGを作りたい小中学生向けに協力したい方、大募集!(src on GitHub

小中学生の実装力を鍛える、PCNこどもプロコン2021のふりかえりと次の計画ミーティング。 今回もたくさんのステキな作品あつまりました。

IchigoJam BASICや、Scrtachからのステップアップにイチオシはプログラミング言語は、JavaScript。
- 創った作品を簡単に公開でき、パソコンでもスマホでも動く
- 機械学習(AI)を気軽に使える(Tensorflow.jsはじめのいっぽ
- サーバーサイドでも使える(Denoはじめのいっぽ
- オープンソース共有サイト GitHub で最も使われているプログラミング言語(GitHut考察

とはいえ、最新の言語は変化も激しいので、陳腐化してしまった古い教材が多いのが問題です。
ということで、小中学生のプログラミング言語ステップアップ用に新たなゲームライブラリ整備計画をスタート!


egcanvas demo 1 - touch

小中学生憧れのスマホ、PCゲームづくり。まずはスタンダードな2Dゲームをサクッと作成できるライブラリ egcanvas.js として公開。 ダウンロードして、HTMLを開くだけでブラウザで動き、改造し、試せます。
egcanvas.js 1.0.0(200KB)」

はじめのいっぽ、文字を真ん中に出すプログラム

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>egcanvas.js demo</title> </head> <body> <script type="module"> import { createEgCanvas } from "https://js.sabae.cc/egcanvas.js"; const c = createEgCanvas(); c.draw = (g, cw, ch) => { // cw ch は画面の幅高さ、gを使って描画 // 線を引く g.setColor(255, 0, 0); g.drawLine(0, 0, cw, ch); // 画面中央に文字 g.setFontSize(cw / 20); g.setColorHSL(90, .6, 0.5); g.fillTextCenter("hello egcanvas.js", cw / 2, ch / 2); }; // ひとまず最初に描く c.redraw(); </script> </body> </html>

import / export を使った、ピュアなJavaScriptのESモジュールを使っているので、ライブラリを辿るのも簡単です。

import { createFullCanvas } from "./createFullCanvas.js"; import { extendGraphics } from "./extendGraphics.js"; import { extendUI } from "./extendUI.js"; const createEgCanvas = () => { const c = createFullCanvas(); extendGraphics(c.g); extendUI(c); return c; } export { createEgCanvas };

フルスクリーンのCanvasを作成して、CanvasAPIベースのグラフィックとUIを拡張しています。extendGraphics.js を見ると、どんな描画ができるか確認できます。

何かステキな名前をつけて、コンパクトで優しく楽しく学べるプログラミング環境を作っていきます!


egcanvas.js on GitHub
どなたでもお気軽にコントリビュートください!

これを機にwebアプリにチャレンジしたい、高専生、オンライン勉強会やりますよ!
【オンライン開催】jig.jp勉強会&会社説明会 ~募集のお知らせ~

祝!福井高専、ディープラーニングコンテスト、優勝!
福井高専がディープラーニングコンテスト優勝しました!

4/15、イチゴの日。IchigoJam 1.5系ではなく、Arm LPC1114の1.4系のファームウェアのちょっとバージョンアップ。
- IchigoJam 1.4β27 - ファイル3書き込み不可バージョン
ファイル3を書き込み禁止に(ファイル0〜ファイル2が使用可能)
(ichigojam.bin ユーザーファイルなし、ichigojam-withexchg.bin ファイル3にキーボード日本語英語切り替えプログラム付き、ユーザーファイルを上書きします)
起動時にNTSCビデオ信号出力するまで少し待つ処理を追加


今回のファームウェア改造は、キーボードをいろいろ入れ替えながら使う、IchigoJamを使ったプログラミング教室からのご要望でした。 容量カツカツのArm向けでは難しいですが、RISC-V版ではファイルごとの書き込み禁止実装はアリですね。 ぜひ細かなご要望、お寄せください。

コンピューターをフルに使い切るプログラミングを低レイヤー開発と言います。楽な言語でwebアプリづくりをサクサク楽しめるのも、低レイヤーあってこそ!

低レイヤー、高レイヤー、どちらも楽しい、プログラミング!

PanCake webIchigoJam web とつながりました。
IchigoJam web + PanCake」誕生!

まずはかわいい背景画像の変更から。数は 00 から 07 まで対応しています。

?"PC IMAGE 01

下記のような簡単なプログラムで、カラフルな絵を描けます。

10 ?"PC IMAGE 00" 20 ?"PC LINE ";HEX$(RND(80),2);" ";HEX$(RND(45),2);" 28 16 ";HEX$(RND(16),2) 30 GOTO 20

HEX$は、マシン語講座などで必須な数を16進法表記にするコマンド。2つ目のパラメータで、桁数を指定しています。

?HEX$(15) F ?HEX$(15,2) 0F ?HEX$(15,4) 000F

スプライトもOK!

IchigoJamのコンソール(IchigoJam REPL)でいろいろ遊んでみましょう

(コマンドは PanCake公式リファレンス へ)

複数のスプライトを登場させて、競争させる風のプログラム。

5 ?"PC SPRITE START 04" 10 FORI=0TO4:LET[I*2],80,I*9:NEXT 20 FORI=0TO4:?"PC SPRITE MOVE ";HEX$(I,2);" ";HEX$([I*2],2);" ";HEX$([I*2+1],2):[I*2]=[I*2]+1 25 IF[I*2]>80 [I*2]=-RND(20):?"PC SPRITE CREATE ";HEX$(I,2);" ";HEX$(RND(#30),2) 30 NEXT 40 GOTO 20

IchigoJam + PanCake の練習や、教材づくりにどうぞ!

PanCakeのもうひとつの機能、サウンド機能も PC SOUND1 対応!(Thanks @yrm__

?"PC SOUND1 00 03 40 ?"PC SOUND1 00 03 FF

ボーっと音が鳴ります。

links
- IchigoJam web + PanCake
- PanCake

沖縄市に熱いスポット誕生、4/3にオープンHanaわらび


こどもも大人も、楽しく学ぼう、コンピューターを仲間に未来を切り拓く力!


なんと年長さんの頃、はんだづけワークショップにも参加したという男の子、自分で探求する姿が頼もしい。 パソコン、スマホ、タブレットで楽しめる「IchigoJam web」と動画で思う存分やってみよう! はんだづけして自分だけのパソコンづくりもオススメ。


IchigoJam はじめのいっぽ (slide on GitHub)」のコツと、その次講座。腕試しの「PCNこどもプロコン」に向けた、Hanaわらびでのミニハッカソン&発表の練習「プログラミング大喜利」をオススメ。 その場で5分、みんなで「おきなわ」をテーマにやってみました!

オススメコマンド

CLS LC 10,10:?"OKINAWA" WAIT 60 GOTO 10 VIDEO 3 VIDEO 4 BEEP RND(20)

まずは、シンプルに画面をあやつるところからスタート。初心者から上級者まで、熟練度に応じて楽しめます。


IchigoJamのたのしみかた」(slide on GitHub)
こちら、講師向けの資料、オープンデータとして公開。
大人も楽しいコンピューターは、子供にとってはヤバいくらい楽しい。


Hanaわらび発のいろいろ、お楽しみに!


PanCake web
ついにスプライト対応!反転や回転、ユーザー定義スプライトにも対応したので、次はいよいよ IchigoJam web との接続にチャレンジします。


想像力を掻き立てるモノクロ表現で練習したら、16色カラーを使った表現にチャレンジするのもいいですよ!
小説、俳句、キャッチコピーの感動と、気合の入ったフルCG映画での感動、データ量は桁違い違いますが、感動する度合いは創る人、受ける人次第。

links
- 祝、沖縄市にオープン、Hanaわらび!すべての世代に可能性を! IchigoJamレベルメーターとMSX BASIC入門

高専や高校の数学で習う三角関数(サイン、コサインなど)ですが、ゲームなどグラフィクスを扱うプログラミングには欠かせない便利な道具。 IchigoJam BASICのコマンド、SIN/COSを使って、三角関数の基本的な使い方のひとつ、円を描いてみましょう。

IchigoJam BASICのサイン・コサインには角度を0-360の度で指定します。返ってくる値は、半径256の円の原点から指定角度に向かった交点の座標(COSでX座標、SINでY座標)です。 繰り返しで、角度0から360まで、画面上(45,30)を原点として、15で割った場所の座標にDRAWで点を打っていきます。


値をいろいろ変えて遊んでみましょう!
大きくしたり、半分にしたり,つぶれた円(楕円)や、点線での円、原点から線分を引くのもキレイですよ。


PanCake web」円、対応!
JavaScriptでも何でも、作り方は同じです。PanCake web で、CIRCLEコマンドに対応しました!

drawCircle(x, y, r, c) { const n = 32; let x2 = (x + r + .5) >> 0; let y2 = (y + .5) >> 0; for (let i = 1; i <= n; i++) { const th = Math.PI * 2 / n * i; const x1 = (Math.cos(th) * r + x + .5) >> 0; const y1 = (Math.sin(th) * r + y + .5) >> 0; this.drawLineDots(x1, y1, x2, y2, c); x2 = x1; y2 = y1; } }

円コマンド実装部分を抜粋。角度をラジアンで指定していたり、小数を四捨五入していたりと細かな部分の違いはありますが、ほぼ一緒です。


PanCake web
デモプログラムにランダム円を加えて、ちょっとゴージャスになりました。

スプライトに対応したら、IchigoJam web にも接続予定です。お楽しみに!

すべてのこどもたちにプログラミングを!

プログラミング、やってみたい?
→ いいえ:またやってみたくなったらいつでもどうぞー END
見えますか?
→ はい:IchigoJam でやってみよう! END
聞こえますか?
→ はい:PCは持ってますか?
 → はい:IchigoJam readnspeak でやってみよう! END
 → いいえ:IchigoJam morse! [new] でやってみよう! END
振動は感じますか?
IchigoJam morse with 振動モーター を問い合わせる! END

モールス信号で打ち込んだ文字や、表示した文字を聞く IchigoJam の新バージョン「IchigoJam morse (イチゴジャム モールス)」が新登場!

起動後のメッセージから、LED点灯までをデモ。BEEPや、PLAY文で遊ぶのがオススメです!
キーボードをガチャガチャ押すだけで音がでるので、小さなお子様から遊べるおもちゃとしても使えます。 遊んでいる内に、いつの間にかモールス信号を覚えてしまうでしょう。

ダウンロードはこちら! for LPC1114(保存されているファイルは消えてしまうので注意!)
- IchigoJam morse for LPC1114

今週末、鯖江市、Hana道場でお誕生日会!

沖縄市では、Hanaわらびのオープニングセレモニー!

PCNから、RaspberryJam!?

C言語で改造、IchigoJamのファームウェア、モールス信号生成のプログラムはこちら
IchigoJamがわかる人には、なんとなく読めますねっ

static uint MORSE[] = { 13,3111,3131,311,1,1131,331,1111,11,1333,313,1311,33,31,333,1331,3313,131,111,3,113,1113,133,3113,3133,3311, 33333,13333,11333,11133,11114,11111,31111,33111,33311,33331 }; int morse_encode(char c) { if (c >= 'A' && c <= 'Z') { return MORSE[c - 'A']; } else if (c >= 'a' && c <= 'z') { return MORSE[c - 'a']; } else if (c >= '0' && c <= '9') { return MORSE[c - ('0' - 26)]; } else if (c == '.') { return 131313; } else if (c == ',') { return 331133; } else if (c == ':') { return 333111; } else if (c == '?') { return 113311; } else if (c == '_') { return 113313; } else if (c == '+') { return 13131; } else if (c == '-') { return 311113; } else if (c == '*') { return 3113; } else if (c == '^') { return 111111; } else if (c == '/') { return 31131; } else if (c == '@') { return 133131; } else if (c == '(') { return 31331; } else if (c == ')') { return 313313; } else if (c == '"') { return 131131; } else if (c == '\'') { return 133331; } return 0; } void morse_out(char c) { int dt = 2; if (c != '\n' && c != ' ') { if (c >= 28 && c <= 31 && _g.cursory >= 0) { int now = _g.cursory * SCREEN_W + _g.cursorx; c = vram[now]; } int m = morse_encode(c); if (!m) { return; } int tone = 20; for (int i = 100000; i > 0; i /= 10) { int l = m / i; if (l) { psg_beep(tone, l * dt); // ver 1.0.2b4 IJB_wait((l + 1) * dt, 1); m -= l * i; } } } IJB_wait(dt * 3, 1); }

2014年生まれのIchigoJam、今日でちょうど7才
うれしかった、お小遣いで買ったIchigoJamでプログラミングを始めて、活躍する高校生の記事!
感激、小6の時にIchigoJamを買ってプログラミングをはじめた高校生による記事と、WebAssembly再入門
すべてのこどもたちにプログラミングを届けよう!

links
- 2014年 目指すはMSX! Raspberry Pi より安価な IchigoJam 発表!
- 2015年 創る人を創ろう! Pepper より安価な こどもロボットPaprika 発表!
- 2016年 MSXになりたい「こどもパソコンIchigoJam」あの起動ロゴを搭載!
- 2017年 IchigoJam Zero the World's Lightest PC 0g 150yen for IchigoJam Things!
- 2018年 盲聾のこどもたちにもプログラミングを! 体で感じる体表点字、IchigoBrailleでブラインドプログラミング、IchigoJam 4th Birthday!
- 2019年 IchigoJam for MSX!? はじめてパソコン CANON V-10 と IchigoJam 5th anniversary!
- 2020年 こどもパソコン通信のホストを開局! 新型コロナウイルスダッシュボード for IchigoJam 提供開始、6才になりました!
- 2021年 コンポジット不要、モールス信号で組むプログラミング IchigoJam morse 誕生! IchigoJam 7才

すべてのこどもたちにプログラミングを!
PCN主催、11回目の小中学生向けプログラミングコンテスト「PCNこどもプロコン2021」の表彰式。応募総数282点、海外からも12点の作品が集まり実質世界大会!

チャレンジしてくれたこどもたち、ありがとう!受賞した人、おめでとう!受賞しなかった人も、受賞した人の技を盗んで次にチャレンジ!

PCNこどもプロコン2021表彰式ライブ映像」(録画、2021.3.27 追記)


IchigoJam賞は、おしえて!アイチャン!
障害物との距離を音で教えてくれるアイチャンを頼りに、障害物を避けて進むゲーム!
両目が見えなくなった家族の声をきっかけにまずはゲームづくり。勉強して実用的なものにもチャレンジしたいとのこと!
副賞として、勉強用の図書券5,000円と、新たなデバイスづくりに活かせるIchigoJamハーフキット
IchigoJam readnspeak もぜひ参考に)


神山まるごと高専賞


高専機構賞、谷口理事長、ご参加ありがとうございました!
小中学絵師にいいところ見せたい高専生向け、インターンで腕磨こう!


ラズベリーパイ財団賞には創始者、エベン・アプトンからメッセージ!
BASICで育ったEbenとは同い年!こどもプログラミングを伝える同士!


アイ・オー・データ機器賞


細野会長からのメッセージ!


自分で作ったロボット、コロちゃんと共に受賞の喜びを伝えてくれました!


最優秀賞 The color picker、おめでとう!

今回も多数提供した副賞のノートパソコン。ScratchやIchigoJamで学んだ子たちは、ぜひステップアップにもチャレンジしてほしい!

Scratch、IchigoJam,JavaScript(Deno)で人類最古のアルゴリズムと言われる最大公約数を求めるユークリッドの互除法を実装する様子。(Scratch, IchigoJam BASIC, JavaScript(Deno), C言語

緯度経度の新表現、Geo3x3が対応するプログラミング言語数は、今回Scratchにも対応して69。 用途に合わせていろいろなプログラムがあります。ぴったりの言語を探してみよう!


次回もやるよ!とPCN代表、松田さん、閉会の挨拶。


参加してくれたこどもたち同士の交流の場、創りたい!

朝、何か記事を書いてくれると、うれしい連絡。
公開された記事を読んで感激、元IchigoJamユーザーの高校生エンジニアでした!


子供向け2000円PC!IchigoJamって何?! | FascodeNetwork Official Blog

小学6年生のとき、本屋さんで見かけた国野さんの本を、数日後にIchigoJamもお小遣いで購入、「IchigoJamがなければ絶対にプログラミングを始めてなかった」とのこと!

動かすために必要なもの、プログラミング入門、マシン語、基板やガーバーデータまで触れた自作のススメ、容量、カラー化、ネットワーク接続など、IchigoJam愛あふれる多彩な内容にも感激です。

著者のHiroさんは、その後、ラズパイ3でPythonを学び、今では PC自作記事や、自分でJavaScriptを使って開発した作品公開など活躍中。

RISC-V版の IchiroJam R や、見なくてもプログラミングできる IchigoJam readnspeak など、いろんな IchigoJam、ちゃんと整理しないといけませんね。

PCだけでなく、スマホやタブレット、Chromebookでも動く、IchigoJam web は、WebAssemblyというweb技術で動いています。DRAWコマンドのバグ修正のためにM1 Macでの環境構築。 かつてよりぐっとシンプルに環境構築できるようになってました!


WebAssembly first-step」(src on GitHub)
Macなら、llvmをhomebrewでインストールして、c.shを動かすだけ! 下記のコンパクトなC言語のプログラムがJavaScriptから呼び出せます。

#define SIZE 10 int mem[SIZE]; int* getMemory() { return mem; } int getMemorySize() { return SIZE; } int calc() { int sum = 0; for (int i = 0; i < SIZE; i++) { sum += mem[i]; } return sum; }

Enjoy program!


OB/OGが多数活躍、PCNこどもプロコン、いよいよ今週末 2021.3.21!


プログラミング好きな学生にオススメ、チーム開発とweb開発をハンズオン、jigインターン、2021.3.22締め切り!

プログラミング言語はいくつあるでしょう? 何を持って1つのプログラミング言語と呼ぶかに依りますが「Online Historical Encyclopaedia of Programming Languages」の数え方では8,945言語とのこと。

言語は1つで十分と人間界でも言えないように、コンピューターと会話するための言語も1つというわけにはいきません。 様々なコンピューターの設計があり、様々な用途があり、様々な言語開発者のこだわりがあります。 自分にぴったりなものがないと感じたら、創ってしまうことが気軽にできるソフトウェアの世界、世界中で新しい言語が誕生します。 中学生が開発した「Blawn」も有名ですね!(15歳が独自プログラミング言語「Blawn」を発表 わずか数週間で開発 - ライブドアニュース


Go言語が好きだけど、ちょっと不満があることできっと誕生したV言語でGeo3x3を実装してみました。(src on GitHub、公式ロゴできました!Thanks < macoto1655)

module geo3x3 pub fn encode(lat f64, lng f64, level int) string { if level < 1 { return "" } mut res := "E" mut flat := lat mut flng := lng if lng < 0.0 { res = "W" flng += 180.0 } flat += 90.0 // 0:the South Pole 180:the North Pole mut unit := 180.0 for _ in 1 .. level { unit /= 3.0 x := int(flng / unit) y := int(flat / unit) res += (x + y * 3 + 1).str() flng -= f64(x) * unit flat -= f64(y) * unit } return res }

Go言語よりちょっとコンパクトに書けてなかなかいい感じです。 値を変化させるときにはRustのようにmutを付けることと、文字を囲む時の記号が ' ではなく、` なのがポイントで、好みが分かれるところかも。

V言語は、C言語のソースコードを生成するトランスパイラとして実装されています。

C言語の最初の #include 行を書くのが嫌 → 1行追加するトランスパイラ言語
forやifをIchigoJamのように大文字で書きたい → FORやIFを小文字に変換するトランスパイラ言語
{}じゃなくてbegin/endで書きたい → #define begin { を追加するトランスパイラ言語
・・・

好みに合わせて無限にできそうですね。
自分だけの言語、一度創ってみること、オススメです!


プログラミング好きなこどもたちのおまつり、PCNこどもプロコン今週末!


プログラミング好きな高専生のおまつり、jigインターン今週末締め切り!

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS