さぁ、スクラッチでナニ作る！？
動画で見てみよう
チュートリアルの元になった作品
小技：サイン波を計算して虹色を描く
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1ペンの初期設定
準備
スプライト名を「ペンプロッター」に変更
実装
が押されたときでスタートしたら、スプライト本体は隠すで隠す。このスプライトはあくまで「ペンを持つ手」だから、画面に見える必要はないんだ。全部消すで前の描画を全消しして、ペンサイズを8にセット。
そしてペンの[COLOR_PARAM]を[VALUE]にするでペンの透明度を100に。ループが回り始めてから色が確定するまでの一瞬に、ゴーストドットが描画されるのを防ぐための保険だよ。
#2サイン波で赤を計算
準備
変数「★色相」を追加
現在の色相角度。毎ループ5ずつ増加し、RGBの計算基準になる
変数「★赤の値」を追加
ペンの赤チャンネル値（0〜255）。HUEのサイン波から計算される
実装
ずっとループの中で、虹色を生み出す計算が始まるよ。まずは「★色相」変数を毎ループ5ずつ増やして、そこから赤チャンネルの値を算出するんだ。
普通に色を変えるならScratchのペン「色」パラメータをいじるだけでいいけど、この作品ではサイン関数（sin）を使ってRGB値を直接計算しているのがミソ。「★赤の値」の計算式は 128 + 127 × sin(★色相) で、sinの結果（-1〜1）を0〜255の範囲にマッピングしてるんだ。
#3緑を120度ずらして計算
準備
変数「★緑の値」を追加
ペンの緑チャンネル値（0〜255）。HUEに120度オフセットしたサイン波から計算される
実装
式は 128 + 127 × sin(★色相 + 120) になる。赤と全く同じ波だけど、120度先にスタートしてるから、赤がピークのときに緑はまだ途中、っていう具合にタイミングがずれる。360度を3色で均等に分けてる（120 × 3 = 360）から、常にどれか1色がピークにいて鮮やかな色が途切れないんだ。
#4青を240度ずらして完成
準備
変数「★青の値」を追加
ペンの青チャンネル値（0〜255）。HUEに240度オフセットしたサイン波から計算される
実装
ここまでのR/G/B計算を俯瞰すると、やってることは3つの波が120度ずつずれて重なってるだけ。たった1つの「★色相」変数を増やし続けるだけで、全ての色が自動的に循環するのがこの手法の美しいところ。
#5RGB合成とマウス検出
ペンの色を[COLOR]にするに渡す値は ★赤の値 × 65536 + ★緑の値 × 256 + ★青の値 という計算式。65536は256の2乗で、これはコンピュータが色を「赤8ビット＋緑8ビット＋青8ビット＝24ビット」で表現する仕組みそのものなんだよ。この1行で任意のRGB色をペンに設定できる。
その直後にもし ( ) ならとマウスが押されたを組み合わせて、マウスが押されているときだけ描画処理に入るようにするよ。
#FF8800 みたいな16進カラーコードも、実はこれと同じ仕組みなんだよ。普段ネットで見てる色が、全部この掛け算で表現されてるって考えるとちょっとエモくない？
#6マウス位置にドットを描画
x座標を ( ) 、y座標を ( ) にするでマウスのx座標・y座標にスプライトを瞬間移動させてから、ペンの[COLOR_PARAM]を[VALUE]にするで透明度を0にする。これで初めてペンが「描ける」状態になるんだ。直後にペンを下ろすでペンを下ろすと、スプライトの位置にペンサイズ分のドットが1点だけ描画されるよ。
#7ドット完成と透明度復帰
ペンを上げるでペンを上げて、すぐに透明度を100に戻す。これでドット1点の描画が完了だよ。
普通にペンで絵を描くときは「ペンを下ろす → 移動 → ペンを上げる」で線を引くよね。でもこの作品では「移動 → ペンを下ろす → ペンを上げる」を一瞬でやることで、線じゃなくて点を打っている。しかも描画のたびに透明度を0→100と切り替えることで、ずっとループの色計算中にゴーストドットが描かれるのを確実に防いでるんだ。クリックしまくって虹色の軌跡を楽しもう！
まとめ
sin関数でRGBを計算するテクニック、バッチリ理解できた？色相変数1個を増やし続けるだけで虹色が延々とループするって、かなりエレガントな発想だよね。クリックしまくっていろんな軌跡を描いてみてね！ペンのサイズや透明度をいじったり、sin関数の係数を変えて色の変化スピードを調整したりして、自分流のペインターに育てていこう。