「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 石川高専
2024-04-26 Fri Night
