【html5】Girls Only Code Lab / Hack-a-thon 9/4
行ってきました！
前回のハッカソンの続きをやろうかと思いましたが…
ちょっと私の技量では厳しいかなー…と思ったので、初心者コースに参加させていただきました。
初心者コースでは、課題をいただいて、個人で作りました。
課題
canvasを使って、円を大量に描く(出来れば動かす)
課題制作の流れ
少しづつ発展させていって、課題に近づけて行きました。
- まずcanvasに1つの円を描く
- 円の色を変える
- 同時に100個の円を描く(多少は重ならないように)
- 100個の玉の大きさをそれぞれ変える
- 100個の円の色をそれぞれ変える
私は早めに終わったため少し発展させて別のことをやっていました。
上の続きとして
- 円にグラデーションをかける
- 通常の円形のグラデーションだとあまり綺麗に見えないため、グラデーションの中心を、左上にする
- 100個の円を動かす
できたものは以下です。(chromeでのみ動作確認済み)
http://sea-mountain.info/html5/canvas2.html
http://home.sea-mountain.info/html5/canvas2.html
マシンスペックによって、大分動きがカクカクしたりします。
更新するごとにちゃんと色や大きさがランダムに変わります。
とても重いので、見終わったら、速やかにページを閉じてください
canvasはただでさえ重いらしいのですが、グラデーションがとても重いです…。
円の色は、ランダムで変わるので、更新すると色が変わって面白くなるようにしてあります。
また、単純に上から下に行くのではおもしろくなかったので、ﾌﾖﾌﾖ変な動きをしています。仕様です(ｷﾘｯ
前回は、完全初心者＋いきなりハッカソンだったので、中々難しいところもあったのですが、今回は個人で課題を進めるというかたちだったので、大変やりやすく、色々できて楽しめました。
次の機会があればぜひ参加しようと思います！
今回は女性onlyで、講師の方が男性というぐらいで、珍しい男女比でした。いつもの勉強会やハッカソンとは全く違う雰囲気でとても新鮮でした。
楽しかったです！
みなさんがとても優しくて、色々な方とお話できて、とてもいい機会になりました！
あと、世の中が狭すぎてびっくりしっぱなしでした(笑)
