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

高専生の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 石川高専

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