沖縄市に熱いスポット誕生、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 にも接続予定です。お楽しみに!

毎日創って毎日公開「一日一創」を掲げた2012年元日。うるう年、計366のwebアプリが誕生。作りきった達成感は良い自信になりました。 宣言時に終了条件を入れ忘れたので、そのまま今まで続いています。

2013年からはブログという形に変更。気がかりだった2012年製アプリ達を、この度ブログへ統合完了!現時点で3,533記事となりました。

一日一創100アプリ達成記念
一日一創のはじまり「一日一創カレンダー


福野泰介の一日一創一覧
ced2012タグで、検索も可能!

次は、古くてうまく動いていないものや、APIが停止しているものなのなど、ちょっとずつメンテナンスしていきます。

一覧XMLを使った一覧取得、HTML取得、パース、XML化などのJavaScript/Denoの変換プログラムは下記にコミット済み。参考にどうぞ。
taisukef/fukunojigjp

仕事としてのwebアプリ開発に興味ある方。
webアプリ開発入門勉強会&会社説明会、開催します!
プログラミングは好きだけど、サーバーを使ったwebアプリはちょっと敷居が高くてやってみるきっかけがない人などにオススメです。

配列とは、初歩的なプログラミング用語、BASICやJavaScriptなど、ほぼすべてのプログラミング言語にある基本的なデータ構造。数などのデータが順番に並んだものです。

色をデータにする代表的な方法が、RGB、光の三原色、赤(RED)、緑(GREEN)、青(BLUE)の強さという数3つで表せます。長さ3の配列として処理することができます。

画像は色の配列で表せます。横と縦、共に1,000画素あれば100万コ長さを持ったの色データの配列。人間にとって100万コは膨大ですが、現代のコンピューターには取るに足らない量ですね。(IchigoJamの100円CPUですら1秒間に5,000万回、計算)

横80縦45、たった3,600画素しかない PanCake は、画像というデータ構造と遊びながら理解を深めるのにちょうどいいプラットフォーム。 IchigoJamにちょっと慣れた人にオススメです。

先日、開発再開した PanCake webCC BY-NC で公開されている背景画像や8x8のかわいいスプライトの表示に対応しました!


PanCake web」(src on GitHub)

JavaScriptからも下記のように使えますし、IchigoJamでのPRINT表記でブラウザ上から遊べます。
ゲームづくり便利な再描画などを自動化してくれるスプライト機能にも対応したいところです。

作れば作るほど作りたくなるものづくり、楽しい底なし沼です。

IchigoJamでカラーが楽しめる拡張ボード「PanCake」をブラウザ上でエミュレートする PanCake web プロジェクトスタート!


PanCake web
まずは単一カラーでのクリアと、点を置く、線を引く機能の実装と、ESモジュール化、ns-pancake HTML拡張タグ化を完了。

<html> <body> <script type="module" src="https://ichigojam.github.io/ns-pancake/pancake.mjs"></script> <ns-pancake id="pancake"></ns-pancake> <script type="module"> const pw = 80; const ph = 45; const rnd = (n) => Math.random() * n >> 0; // pancake test setInterval(() => { pancake.clear(); for (let i = 0; i < 100; i++) { pancake.line(pw / 2, ph / 2, rnd(pw), rnd(ph), rnd(16)); pancake.pset(rnd(pw), rnd(ph), rnd(16)); } }, 500); </script> </body> </html>

こんな感じで、ブラウザでかんたんなJavaScriptのプログラムと共にかわいいグラフィクスが埋め込めます。

ライセンスは、CC BY-NC、非営利であれば自由に拡張できます。コントリビュートも歓迎です!
IchigoJam/ns-pancake on GitHub

links
- ネットワークで楽しさ広がるIchigoJam!! こどもグラフィックボード「PanCake」をエミュレート!

IchigoJam morseを使ってくれたJO3GBDさんより、非対応だった文字のモール符号のご提案! せっかくなので、Ascii-Morse(アスキーモールス)としての標準化を目指して、GitHubにCSVデータ、JSONデータ、C言語のプログラム生成プログラムとして公開しました。
IchigoJam/ascii-morse


IchigoJam morse にも組み込んでみました。SOUND-GNDにLEDを接続すると音を見ることができます。

ファームウェアはこちら。データが消えても大丈夫な、お手元のIchigoJamでお試しください。(保存は1ファイルのみ対応)
- IchigoJam morse β2 for LPC1114


ascii-morse/ascii-morse.csv at main · IchigoJam/ascii-morse
ちょっと速めの設定ですが、こちらの表と見比べながらいろいろ触ってみると、だんだん慣れていきますよ!

IchigoJamのボタンでモールス信号を打って、入力できるバージョンも楽しそう!

links
- JO3GBD-IchigoHam
- IchigoJamでモールス:デジットの「赤外線モールス通信機」 を試してみました (その1) |JO3GBD - ブログ
- IchigoJam電子工作パーツセット 赤外線モールス信号機 送受セット / MORSE-jamP
- IchigoJam モールス信号エンコーダー アルファベット編

7才になった、IchigoJam。鯖江市Hana道場でプログラミング学ぶこどもたちが、記念イベントに参加してくれました。 初心者向けの「IchigoJamでお絵かきしよう」と中上級者向けの「IchigoJamプログラミング大喜利」の二本立て。

プログラミング楽しんでくれていて何より!(スライドオープンデータ on GitHub


キーボード「Insert」キーを押して、カーソルの形をシカクにすると、自由カーソルモードになってお絵かきしやすいよ!


お絵かき中!キャラクターを組み合わせて好きな絵を描くことは、機能を組み合わせて好きなプログラムを創る練習になるかも。


ShfitとAltを押しながら打つとでるIchigoJam絵文字、囲み線を描くためのチートシート(早見表)。


力作、巨大宇宙船の絵!渋い建物やロボットから、かわいいワンちゃんまで、アウトプットが多彩で楽しい!

画面をプログラム領域の後半を使って保存しよう

COPY#D00,#900,#300

復元してアニメーションするプログラム

10 COPY#900,#D00,#300 20 SCROLL1:WAIT30:CONT

ゲームのオープニングムービーづくりとかもいいですね!


みんなで記念撮影!

続いて、プログラミング大喜利、今回のテーマは「音だけで遊ぶゲーム」
目を使わないプログラミング講座における「かわくだりゲーム」的定番ゲームを探してます。


元鯖江市役所、Code for Sabae牧田さん、こどもたちの開発サポート!


バリバリ開発する姿が頼もしい!


一番盛り上がったのはお手本の音のタイミングを聞いて、その後ぴったりそのリズムをスペースキーで刻むゲーム。 画面による表現は無いので、プログラムの写真を掲載。音だけの音ゲー、いい感じに難しくて楽しい!


ハッカソン後の記念撮影。

音の間隔が一番狭くなったところでボタンを押す居合斬り的ゲームや、音階を当てるゲームも良かった! その派生、Hana道場インターン生のアイデア「音だけジャンケン」がコンパクトに作れて良さそうだったので、教材化しました。


はじめてのプログラミング with IchigoJam readnspeak
福井県立盲学校での教材に、ジャンケンゲームづくりを足しました。BEEP音をPLAY文に変更することで、より豪華になります!


かわくだりゲーム同様、1行ずつ打ち込んでいくハンズオン型。

最終的にできあがるゲームのプログラムはこちら

10 BEEP:WAIT30:BEEP15 15 WAIT30 17 K=INKEY()-49:IF K<0 CONT 20 N=RND(3):BEEP 15-N*5:WAIT30 30 IF K=N BEEP15,30:GOTO15 40 IF K-N=-1 OR K-N=2 BEEP8,30:END 50 BEEP20,30

グー、チョキ、パーと音の高さだんだん高くなる3音で聞き分け、自分の手は1から3で選びます。買ったら高い音、負けたら低い音、アイコのときは中くらいの長い音がなってもう一度!


小学生、中学生、高校生、高専生、大学生、社会人、みんなで創るともっと楽しい!
お祝い、ありがとう!

links
- IchigoJam7歳誕生日会。HanaキッズとIchigoJamプログラミングお絵描き&大喜利 | きらきら星のつぶやき☆鯖江モデルを全国へ
- 祝、沖縄市にオープン、Hanaわらび!すべての世代に可能性を! IchigoJamレベルメーターとMSX BASIC入門
- 目隠ししてチャレンジ!? 福井県立盲学校で研修、音とキーボードを使った IchigoJam readnspeak プログラミングはじめのいっぽ

鯖江のHana道場、会津若松の寺子屋Hanaに続くHanaシリーズ3拠点目、沖縄県沖縄市に「Hanaわらび」オープン! IchigoJamによるはじめてのプログラミングから、JavaScriptなどプロも使うソフトウェア技術まで、電子工作、レーザーカッター、3Dプリンターなどを使ったものづくりなど、可能性伸ばす場づくりが広がっています。


Hanaわらびの代表、玉城哲真さんからの熱い事業発表!


すべての世代に可能性を!大人も学生もこどもも地域も!


Hana道場寺子屋Hana、そして、Hanaわらび


ニッポンの「未来」を現実にするをビジョンとする、SAP Japan、大我さんから祝辞!地方創生、人材育成、製品開発、スタートアップまでの強力なエコシステム!
沖縄市に、多世代向け教育プログラムの実施拠点 「Hanaわらび」を開設、地域教育を支援 - SAP Japan プレスルーム

この語、HanaわらびではIchigoJamを使ったプログラミングワークショップ。楽しそうな写真がシェアされてました!

福井県鯖江市のHana道場の取り組みを知ってから約2年、やっと沖縄にもHanaをオープンさせることができました。 ご参加いただいた皆さん本当にありがとうございました! 多世代向け教育プログラム実施拠点Hanaわらびをよろしくおねがいします!

Kenichiro Toyosatoさんの投稿 2021年4月3日土曜日

すぐ楽しいのがBASIC、でも、意外と奥も深いのです。
たったの10行のコードで作られたMSX用RPG「10 Lines Hero」をブラウザで遊んでみた - GIGAZINE
IchigoJam誕生のきっかけ、34年前に出会ったパソコンMSXで育ったエンジニアは数多く、今でもファンやユーザーが多くいます。その新作、BASIC10行で作られたロールプレイングゲームが話題です!

こちらプログラムのすべて!縦読みもできちゃうスゴイプログラム!1行の上限いっぱい255文字で10行、サイズは約2.5KB、IchigoJam BASICは1KBのプログラムが4つ保存、連携できるので、規模的には同じくらい。

IchigoJam BASIC ユーザーのための、MSX BASICの読み方を紹介。
1. コメントにデータ埋め込みは共通技(プログラムはメモリの#8000にあります、IchigoJamは#C00)
2. PCGの書き換えはVRAMへ書き込む、VPOKEを使う(アドレスはIchigoJamと同じ)
3. テキスト画面と独立したキャラクターを表示するスプライトがあります(PUT SPRITE、VRAMにパターン書き込み)
4. 8文字単位で色をつけられます(VRAMの所定パターンに値設定)
5. =などの条件が正しいときは -1 になる(IchigoJamはC言語に合わせて 1 )
6. NEXT変数名で、特定のFORループへ戻れる(IchigoJamではFORループの指定はできません)
7. 二種類の割り算、/は結果を小数で返し、¥は整数で返します(IchigoJamは整数を返す/のみ)
8. 配列は()を使い、10コ以上使う場合はDIMで宣言(IchigoJamは主流言語と合わせて[]を使用)
9. ステージ生成用のマイナスを指定して乱数初期化(IchigoJamのSRND命令)
10. 変数は2文字まで使えます(IchigoJamは1文字)
11. T$は文字列変数、MID$など文字列専用の命令あり(IchigoJamはSTR$を使います)

JavaScriptのように読みやすくインデントすると、データ部を除き180行くらいと、やはりコンパクト。GOTOを使っているのはクリア時の無限ループの一箇所のみ。おもしろい作りです!


なめらかに動く体力ゲージがステキだったので、IchigoJamでも1ドット毎に増減するレベルメーターを作ってみました。

10 FORI=0TO8:FORJ=0TO7:POKE#700+(8-I)*8+J,255<<I:NEXT:NEXT 20 N=32+SIN(I*8)/8:GSB@BAR:?:I=I+1:CONT 40 @BAR:?STR$("████████",N/8);:IFN>=64RTNELSE?CHR$(224+N%8);STR$(" ",7-N/8);:RTN

Nに0から64までの数を入れて表示したい場所へLOCATE(LC)した後、GSB@BAR と呼び出すとレベルメーターが表示されます。

RPGを自分で創ってみたい人、まずはこちらのゲームの打ち込みからチャレンジしてみよう!
Beat the Z for IchigoJam - プログラミングして過ごそう! PCN仙台オンラインIchigoJam講座とミニテクニック


いろんな連携、楽しみですね!

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

プログラミング、やってみたい?
→ いいえ:またやってみたくなったらいつでもどうぞー 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代表、松田さん、閉会の挨拶。


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

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