福野泰介の一日一創 - create every day

プログラミングB分類、算数、円弧の面積「fillArc」 in JavaScript with 万華鏡

2018/12/11
#js #KidsIT 

算数が嫌いな小学生が多いことにショックを受けたので、算数プログラミングシリーズを増やします。
テーマは「円弧と面積」
津幡町のまちなか科学館の万華鏡が気に入ったので、websarasaを使っています。

fillArc - websarasa.js
こちらJavaScriptのソースコード、今回はセミコロン、辞めました。(JaovaScript Advent Calendar 2018

var main = function(scr) { scr.loop = function(g, ts, dt, vw) { var speed = 60 var deg = ts / 1000 * speed % 360 // var deg = 120 // var deg = 240 // var deg = 0 g.setColor(255, 255, 255) // 背景 R, G, B g.fillRect(0, 0, 1000, 1000) // x, y, width, height g.setColor(250, 220, 0) // R, G, B g.beginPath() g.moveTo(500, 500) g.arc(500, 500, 100, 0, Math.PI * 2 - deg / 360 * Math.PI * 2, true) g.fill() if (deg == 0) deg = 360 g.setColor(0, 0, 0) var m = 10 * 10 * Math.PI * (deg / 360) g.fillTextCenter("angle:" + fixfloat(deg, 1) + "° area:" + fixfloat(m, 0), 500, 500, 19) } }

degが円弧の角度。経過時間(msec)を表すtsと動く速度speedを使って、じわじわアニメーションさせています。
プログラムであれば、ひとつひとつ手描きするより圧倒的に楽ですね!


var deg = 120 と角度を指定すると、アニメーションを止めてじっくり観察することができます。
思う存分いじり回してください。


var deg = 360 とすると円弧は消えてしまうバグを発見。
0度か360度かの二者択一、360度で円になる方を選びました。(if (deg == 0) deg = 360)

プログラミングをしていると、いろんな判断の連続です。
間違いはありません。結果は瞬時に返ってきます。
最終的に自分で決めたものが、正解と言えるかもしれません。

プログラミング教育が、算数嫌い低減のきっかけとなりますように!
リクエストなど、Facebook/Twitterなど、受付中です!

正2.22角形は何辺ある? 正2.5角形の謎とVSCodeでもF5 / 高専IT系部活紹介レビュー

2018/12/08
#js #kosen 

小学校のプログラミング教育A分類として紹介されている、正N角形の描き方。
前回は、円周をNで割った角度を線で結ぶアルゴリズムで描きました。
すると、Twitterにて、正2.5角形なる存在を知る。
これぞ一日一創的わらしべ長者!

正N角形の定義を、下記をすべて満たす多角形とする。
- すべての辺の長さが等しい
- すべての内角が等しい
- 内角が(180-360/N)度、ただしN>=2

すると、実は、Nは整数ではなくても描画できてしまう。
例えば、N=2.5とすると、内角は36度となり、描画すると星型があらわれる!


N=2.05、正2.05角形は、41角ある多角形(自己交叉多角形とも呼ぶらしい)

N=2.11、正2.11角形だと、211角。

ちょうどN=3になると、無事おなじみ正三角形

ひとつ進めた、正3.01角形

タップや上下キーで自在に増減できるアプリ「equilateral-ex

(タップ or クリック or キーの上下 で、変更できます)

下限はN=2、下回ると内角がマイナスになってしまいます。この線分を多角形と呼ぶかどうかは定義次第。

今回のアルゴリズムは定義に忠実に、内角に沿って曲がって線分を描画を繰り返すもの。
最初は始点からはじめて終点に戻るまでループとしていましたが、もうちょっとスマートにいきたい。

小数2桁の正N角形の角の数Cを下記のアルゴリズムで求めました。
N*100を因数分解する
100の因数、2,2,5,5をあれば取り除く
残った数をすべてかけた数が、角の数C
(もっとスマートな方法がありそうな予感ですが、ひとまず十分なパフォーマンスが出たので今回は良し)

JavaScriptのプログラムだとこの部分(詳細はアプリでソースを表示してみてください)

var getCorners = function(n) { var d = Math.floor(n * 100 + 0.5); var fs = getFactors(d); removeFromArray(fs, [ 2, 2, 5, 5 ]); return calcMultiple(fs); };

アプリ上の「角」、英語 equilateral の lateral は辺だったので変更。

コンピューターを変えるプログラミング!
JavaScriptを始めるのに、VSCodeをオススメすることにします。
決めては、実行がIchigoJam BASICと同様、「F5」なところ。
さすが、BASICからスタートした、Microsoft製!

「VSCodeで始める、お手軽JavaScript」は、また後日まとめて、Hana道場でIchigoJamを学んだこども達や、IT系部活な高専生たちに試してもらおうと思います。

高専IT系部活 #kosenit Advent Calendar 2018
各地の高専のIT系部活の事情がとても勉強になります。

逆求人にいく全高専生に送る、好印象持たれやすいコツ - みずきちの甘め日記。
沖縄高専ICT委員会のOB、jigインターンのOBでもある、みずきちさん。(*OBで統一/Boyの意味はありません)
IT系部活出身の新社会人からの視点で、高専生へのアドバイス。
高専プロコンなどで選ばれる側ばかりでなく、高専時代に小中学生向けのコンテストを主催し選ぶ側を体験してみるのも、オススメです。

宇部高専コンピュータ部の今までとこれから - Theories of Pleiades
宇部高専のはすみくんさん。なんと総勢53名、宇部高専コンピュータ部についての紹介。
3年生のときからのプログラミング部としての立て直しストーリーがすごい!
中国地区高専コンピュータフェスティバル(コンフェス)というローカルなイベントがあるのも楽しそう。
課題などもどんどん共有し、いい解決方法を共有していくといいですね。

北九州高専 コンピュータ研究部の紹介 - 共産趣味情報系高専生の日記
北九州高専コンピュータ研究部「コン件」のトミーさん、jigインターンOBでもあります。
ここにもローカルな大会「九州アプリチャレンジ・キャラバン」が登場。
活躍の場、あればあるほど燃えますね!(今年の受賞もおめでとう!)
部室の様子が写真付き、過去の高専プロコン競技部門を1年生向けの練習に使っているのも楽しそう。
こういう情報見て、中学生が入りたい!といってくれるはず。
ゆっくり進む学校のプログラミングの授業を先取りして、一気に学べる環境、いいですね!
イラスト部門もあるのはデザインが重要になっている昨今、強みかも。
コミュニケーションツールに関する悩み、どこもいろいろありますね!

一関高専電子計算機部を支える〇〇 - Qiita
一関高専電子計算機部「電算部」で使っているいろいろツールの紹介。
無料で使えるツールがありすぎて逆に迷うくらいですが、ひとまずみんなで楽しく品評するつもりで使って、レポートを共有するのも他のIT系部活の人に役立つ、立派な活動!

参加いただいた方々、ありがとう!
まだ若干の余裕があるので、ぜひこの機会に楽しい知識共有、お試しください。

links
- 高専IT系部活 #kosenit Advent Calendar 2018

プログラミングA分類、正N角形をかくプログラム、正解はひとつじゃない

2018/12/05
#KidsIT #js 

小学校プログラミング教育の手引」のA分類として有名な正三角形。 これをなぞるだけでは、コンピューターの良さは伝わりません。

Q1. 学習指導要領に例示された算数、理科、総合的な学習の時間だけでプログラミング教育を実施すればよいのでしょうか?
A1. 小学校段階の教育課程全体を見据え、各学校の創意工夫により、様々な場面で積極的に取り組むなど、発展させていくことが望まれます。
小学校プログラミング教育の手引 Q&Aより)

正三角形、正四角形(=正方形)、正五角形・・・と、単純に増やしていくとどうなるでしょう?
手で作図するのは大変ですが、コンピューターには朝飯前!


equilateral」クリックするほどに増える!

答は1つに決まらない社会課題、答が1つの学校教育との差をプログラミング教育で埋めましょう。

コンピューターが得意は、超高速正確な計算、抜群の記憶力、加えて、圧倒的コスパ!
秒間5,000万回計算し、半永久的に3万文字を記憶し続けるCPUが、たったの100円という事実。
まずは大人が「今」を認識しなければなりません。

「プログラムは人が作成していること、また、コンピュータには得意なこととなかなかできないこととがあることを、体験を通して気付かせることです。」
小学校プログラミング教育の手引 Q&Aより)

コンピューターのハードやソフト技術の発展により、なかなかできないことを教えるのは大変ですが、こどもたちが、実際試行錯誤してみることが一番でしょう。


大原テクノアートデザイン専門学校で IchigoJam x sakura.io を使ったIoTプログラミング講習!


実際手を動かし、体験するのが一番です!

links
- 答は1つじゃない、IchigoJamプログラミング入門 with グラスミーゴFC

ふくいAIビジネス・オープンラボで初技術セミナー、はじめてのIoTプログラミング体験と度数分布図 in JavaScript

2018/11/26
#fukui #IchigoJam #IoT #js 

福井県情報システム工業会越前がにロボコンに続き、運営を担当することになった「ふくいAIビジネス・オープンラボ」にて、技術研修。 第一回目のテーマは、IoT。衝撃の月額64円の4G通信モジュール sakura.io と、誰でも簡単BASICでプログラミングできる、IchigoJam の組み合わせ、IchigoSodaを使ったIoTづくりと、ネットワークの基本を体験。

ケニヤから留学生も手伝いに来てもらいました。


スペシャルゲスト、ナチュラルスタイル / PCN代表、松田さん!


ワイヤーを使って、ミニマムなネットワークを作って、通信と攻撃と防御を体験し、セキュリティの基礎体験。


Histogram.js 度数分布図 デモ
IchigoSodaからネットに送られたデータを sakura.io の管理画面を通じて、webアプリで表示。
ちょっとおもしろく表示させるべく、度数分布図をリアルタイムに描画するアプリ、作ってみました。
好きなデータを設定できます → histogram.html#10,5,3,3,0,10,2,9,9,8,3,3

JavaScriptを使って、オープンデータ活用するアプリ研修を今度の企画にしたいと思います。
はじめてのJavaScriptには、こちらもどうぞ!


せっかくなので展示見学


100万枚のミニ四駆画像を使って学習したAIによる、ミニ四駆を見ると喜ぶカムロボ by ナチュラルスタイル


福井県勝山市発、IoTイノシシ捕獲装置。ちょうど佐賀県庁からお越しの方に、開発協力した松田さん自らご紹介。


雨風に強いケースに入った中身、イノシシ捕獲装置の制御部にはIchigoJam!


その他、展示詳細は、こちら


福井県産業支援センター1Fにオープン、見学無料!

音声合成で会場案内をお手軽に! オートアナウンサーアプリ

2018/11/24
#js #ced #python 

越前がにロボコンなどのイベント会場で便利な会場案内。
音声合成を使って手軽に、翻訳も使えば多言語案内も即時に反映できて便利!


オートアナウンサー(越前がにロボコンデモ)

多言語音声翻訳コンテスト」で無料トライアル可能な音声合成APIを使っています。
GitHub上に、音声合成呼び出し用の Python3 のプログラムを追加したので、参考にどうぞ!
tagengo - GitHub / taisukef

音声合成API、「越前がにロボコン」のイントネーション違いが気になる。
直したいけど直す方法あるのかな?
IchigoJamでも使える、AquesTalk なら自由自在に制御可能だけど、全部設定するのがちょっと大変。
技術は適材適所で使いましょう。

ブラウザで動くトーナメント表アプリ! 今週末開催、越前がにロボコン!

2018/11/23
#js #ced 

ゲーム大会、スポーツ大会でおなじみトーナメント表を、JavaScriptで作った「トーナメントjs」
スマホやタブレット、PCがあれば、ちょっとした温泉卓球大会などでご活用いただけます。
何かのシステムに組み込んでのご利用、色変更、デザイン変更もご自由に!

トーナメントjs
人数と名前をいれて生成、トーナメント内をマウスクリックで勝者を選択可能。


32人いるとちょっと狭すぎかも。(奇数人数のときに表示がちょっとおかしくなります)

JavaScriptプログラミング入門に「万華鏡づくり」はいかがでしょう?
コンピューターの基本から学ぶならオススメ、IchigoJamプログラミング!
(まだ間に合う、IchigoJam x sakura.io によるIoTプログラミング勉強


2018/11/25(日)開催、小学生対抗「越前がにロボコン
福井県版、地域ICTクラブ、鯖江の拠点、Hana道場のこどもたちの戦い!
福井市のショッピングシティ・ベル 3階あじさいホールで見られます!

越前がにロボコンの得点システムでも「トーナメントjs」が活躍します

万華鏡で学ぶプログラミングの基本5ステップ - var/if/for/function

2018/11/21
#kosen #js #KidsIT 

プログラミング言語、伝える相手が人とはちょっと違ったコンピューターが相手なので癖はあるけど、実はシンプル。
こちら、プログラミング言語の基本です!

1. 順番に実行していく、逐次実行
2. コンピューターに覚えてもらう、変数 (var x = 15 で、 x は 15 とおぼえてね、など)
3. 条件によってやることを変える、条件分岐 (if イフ がよく使われる)
4. 何度もやってもらう、繰り返し (for フォー がよく使われる)
5. やってもらうコトをまとめる、抽象化 (function ファンクションがよく使われる、関数、メソッド、サブルーチンとも)

万華鏡アプリを題材に、これらを順に体験できる教材を開発!
万華鏡で学ぶJavaScriptプログラミング


逐次実行


変数


条件分岐


繰り返し


抽象化


関数

あとは応用、いろいろ好きなように改造してみよう。壊しても大丈夫、動いているところまで戻ればOK。
作品ができたら、万華鏡アプリコンテストにも挑戦してみよう!

高専生のwebプログラミング入門にオススメ! JavaScriptで書く万華鏡 - websarasa.js 更紗眼鏡コンテスト

2018/11/19
#js #kosen #megane 

石川高専が先生を務めたIchigoJamプログラミング体験@津幡町まちなか科学館で発見、巨大な万華鏡に触発されて、webで動く万華鏡JSフレームワーク「websarasa.js」を開発!11月末締切、何かが当たる更紗眼鏡コンテストを開催!

goals17 / websarasa.js
SDGsカラーのアプリ「goals17」をカレイドスコープ化!
タップ or クリックするごとにパラメータが変わります。
プログラムはGitHubにあって、ライセンスは CC BY のオープンデータなので自由に改造できます。

3ステップで動かせる、websarasa.js 簡単チュートリアル

1. 好きなテキストエディタ(メモ帳でもOK)でつぎのコードをコピペ

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>websarasa.js</title> <script src="https://taisukef.github.io/websarasa/websarasa.js"></script> <script>"use strict"; var main = function(scr) { scr.loop = function(g, ts, dt, vw) { // 背景 g.setColor(255, 255, 255); g.fillRect(0, 0, 1000, 1000); // 赤い動く丸 var x = 500 + 80 + Math.sin(ts / 200) * 80; var y = 500 - 50; g.setColor(255, 0, 0); g.fillCircle(x, y, 60); }; }; </script> </head><html>

2. simple.html などと、拡張子.htmlで、名前をつけて保存
3. Chromeなどのブラウザで開く!(動く!タップするとデバッグモード

websarasa.js リファレンス

var main にセットされた関数が呼び出す main に渡される scr の loop にセットされた関数で万華鏡のように描画 * 他は、JavaScriptに準拠する g.setColor(r, g, b); // 色変更 g.drawLine(x1, y1, x2, y2); // 線を引く g.drawRect(x, y, w, h); // 四角を描く g.fillRect(x, y, w, h); // 四角で塗りつぶす g.drawCircle(x, y, r); // 丸を描く g.fillCircle(x, y, r); // 丸で塗りつぶす

#websarasa コンテスト応募方法

1. GitHubアカウントをつくる(もうもっていれば不要)
2. websarasa.js を Fork する(Forkボタン、押すだけ!)
3. Forkした(コピーした)サンプルをベースに、オリジナルの更紗眼鏡(万華鏡の別名)をつくる
4. 作品のURLと作者名を index.html に加えるプルリクを送る(2018.11.30締切)
5. 優秀作品として選ばれたら、何かを受け取る!(連絡は メールや、Twitter DM などを想定)

高専生の挑戦、求む!(もちろん中高校大学生、大人でもOKです)

links
- websarasa.js - kaleidoscope on web
- つなごう高専IT部、沖縄高専で情報セキュリティ実習&ICT委員会訪問、PCN美ら爆誕!
- 高専生が審査する小中学生プロコンいいかも!? 大人も子供も高専生もみんなで研修、IoT with PCN仙台
- 高専生が伝える小学生プログラミング at スゴイ津幡町まちなか科学館、高専生先生の意気込み&感想動画 / KidsVenture x 石川高専

地域ICTクラブxオープンデータで創る地方の未来 ~地域活性化の鯖江モデルと横展開~ / 地域活性化センター講演と地域のこだわりマップアプリ

2018/11/15
#opendata #js #IchigoJam 

全国の自治体職員が集う、地域活性化センターの研修交流事業「プロばな」にて講演!
テーマは「地域ICTクラブxオープンデータで創る地方の未来 ~地域活性化の鯖江モデルと横展開~」

今日はネットにつながっていないネクタイ「IoTie」のスイッチを入れて、講演開始!
(講演資料のPDFダウンロードはこちら、20181115-probana-tokyo.pdf


世界をつなぐ、5つ星オープンデータ!


オープンデータは遊具!
地域のこどもが自在に遊ぶことから生まれる未来があります。
4年前から始まったIchigoJamによるこどもプログラミングプロジェクト。
IchigoJam一期生はIT使いこなし自作の越前がにロボコン向けのロボットキット「さばえカニロボット」の設計、製造、販売や、AIを使って各地のプロコン・ハッカソンに参加中!


見に来てくれた、内閣官房IT室の植田さん、総務省の加藤さん!


IchigoJamスピードバックを使ったプログラミング、タッチアンドトライと、スピードデモ!

1 C=0 2 N=RND(6)+1 3 C=C+1:IF C=3 THEN N=6:C=0 4 ?N 5 WAIT60:GOTO 2

こちら、3回に一回必ず6がでる「操作されたサイコロ」プログラム(ブラウザで動く IchigoJam web で試せます


日本中のこどもたちがBASICによるプログラミングに燃えるきっかけベーマガ!
Oh! Young~Golden 80's」掲載の大橋編集長をご紹介!


マイコンBASICマガジンの黄金時代と今、そして復刊へ!
いつの時代のこどもたちもコンピューター、プログラミングへのワクワクは変わりません!


MSX CANON/V-10、名古屋に住んでいる8才の時、初めて買ってもらったパソコン、載ってました!


あの頃の楽しかった思い出、原点を形にしたこどもパソコン「IchigoJam
シリコンバレーを熱狂させた、Apple初の製品「Apple I」と同じコンセプト!
ビルゲイツ氏の初仕事はBASICづくり。ザッカーバーグ氏もエベンアプトン氏もプログラミングはじめは、BASIC。

プログラミング言語の学び方がわかれば、他の言語へのステップアップも簡単です。
こちら、JavaScriptによるオープンデータを使ったwebアプリ。


地域のこだわりナビ
昨日作った「地域の推し食ナビ」のデータを地域団体商標データに変えて、少し画面をいじってできあがり!
webアプリづくりも簡単です。ダウンロードして、手元でHTMLやCSSをいじって試したり、Google Mapsのキーを取得して、GitHubにアップすれば無料でアプリのできあがり!
都道府県別 子供減少率マップと青森マップアプリハンズオン、青森オープンデータ利活用セミナー

福井の推しは、越前がに&こどもプログラミング&IoT!

2018/11/25(日)開催、小学生対抗「越前がにロボコン

翌日、11/26(月)開催、「IoTプログラミング勉強会 / ふくいAIビジネスラボ」も受付開始!

鯖江視察、歓迎です!本日も福井県こどもプログラミング協議会、地域ICTクラブの拠点、Hana道場へ、韓国から視察の方!


鯖江の食べられるメガネと合わせて記念写真、ありがとうございました!
三重県、青森県、山口県、茨城県、北海道、鹿児島県など、さまざまなところから出向で来ている地域活性化センターの方々。
ぜひITの楽しさ、広めましょう!

地域の推し食「越前がに」GI登録記念アプリ / 地理的表示保護制度とは?

2018/11/14
#opendata #js #fukui 

特定農林水産物等の名称の保護に関する法律、地理的表示法。
特定の産地と品質等の面で結び付きのある農林水産物・食品等の産品の名称(地理的表示 = GI)を知的財産として保護し、生産業者の利益の増進と需要者の信頼の保護を図ることを目的としているとのこと。(地理的表示法とは

現在、69コ登録があり、その最後が我らが福井の「越前がに
鯖江市も爆弾のような丸いナス「吉川ナス」を登録済み!あと、なぜかイタリアからも一件登録あり!?
登録産品一覧:農林水産省


地域の推し食 GIナビ - 地理的表示保護制度(GI)マップ
LinkData.orgにあった「地理的表示オープンデータ」を活用させてもらってます。

名称や説明文章から検索できるようにしてあります、各地の推し食、いろいろ巡ってみてください。
好きな食べ物相関をとって、ガイドするアプリづくりも良さそうです。

共通語彙基盤化し、世界中の推し食(Oshi-Syoku)リンクしたい!


今月、11/25(日)は、小学生対抗「越前がにロボコン
翌日、11/26(月)は、福井県でオープンデータ&IoT研修をふくいAIビジネスラボで開催!
IoTプログラミング勉強会 ~IchigoSoda はじめてのIoTプログラミング~ - connpass」 福井の推し食と合わせてどうぞ!

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