プログラミングにいきなり挑戦したけど、イマイチ面白みがわからない、自分でどうやってコードを書いたらいいかわからない、という方のために、プログラミング講座を開講することにしました。このページでは、読者の皆様の疑問を有効活用しようと思っておりますので、気になった方は是非コメント欄で疑問点を送ってください。次回以降の講義の参考にいたします。
さて、今回の講義では、プログラムを観察する、ということをやってみたいと思います。何事も観察によって得た気づきが重要。では行ってみましょう。
プログラムを実装する上で、全ての人が思うことというのはいつも同じとは限らないと思います。人によって疑問に思うポイントは異なるはずです。
ソースコードを見て、そのまま丸写しする、というのも一つの勉強法ではあるのですが、それだと、「自分の目で見て気づいたこと」というのが蔑ろにされる、という危険性もあります。
なので、じっくりとプログラムの実行結果を見た上で、「自分にとって、このコードのどこが気になるだろうか」というのをしっかりと感じた上で、その疑問点に基づいて、行動を開始される、というのも一つの方法ではないか、と思います。
FxUG@Fukuoka 「three.jsはじめましょ」LT資料を公開しました « イナヅマTVログ
例えば、最近僕がネットサーフィンで見つけた上のサイトですが、このサイトで扱われているプログラムにおいて、僕が気になったのは、その独特の配色でした。なんとなく、ただランダムに色を指定しているだけでは、このような配色にならないような気がしたのです。
それと言うのも、rgbカラーによる配色というのは、以下のようなものであり、なんとなく毛色が違っているのがお分かりかと思います。
従って、このような配色をランダムに作り出しているのは、どういったコードによるのか、といった疑問が浮かびます。
そのような疑問を持ちながら、「色指定」について調べていると、hslカラーとrgbカラーの違いについても知ることができました。
hslカラーの利点とは？？
端的に言って、hslカラーではカラフルな明るい見た目のランダムな配色を作りだす時にとても優れた力を発揮するという特色があります。
次のコードを見てください。
while(number<100){
let X = Math.random()*(canvas.width);
let Y = Math.random()*(canvas.height);
context.fillStyle = `hsl(${Math.random()*360},100%,50%)`;
context.fillRect(X,Y,10,10);
number += 1;
} 上のコードにおいて重要なのは、fillStyleを指定している部分です。
hsl(~~,~~,~~)の記述には、引数にJavaScriptの変数を用いる場合には、``(バック・クォーテーション）と記述部分を &{}で囲う、ということに注意してください。
さて、hslカラーの第一引数は、「色相」と呼ばれ、360度の円環に、虹色の各色がグラデーション 状に並んでいるという特色があります。
従って、第一引数を動かすだけで、存在する各色を自在に引き出せるのですが、rgbカラーでは、このようなことはできません。
rgbカラーにはもっと別の特色もあるのですが、このことについてはまた別の記事で書いてみようと思います。
最後に、hslカラーで作れる典型的なランダムカラーのソースコードを載せておきます。
See the Pen
Untitled by justmeet0924 (@justmeet0924)
on CodePen.
今回は色の観点から、プログラミングの面白さについて解説してみました。
よければ次回もお付き合いください。
それでは、また。
