今日の作業は「クリックした位置のライフを反転する」です。

昨日の作業でクリックしたライフの座標を特定済みのため、その数値をシェーダに送って色を変化させます。

“スピード” を 0 にしてライフを止め、文字を書いてみました。

もちろん、その後動かせばLiFEの文字はルールに従い崩れます。

機能がちょっとずつ増えて、面白くなってきました。

以上です！

今日の作業は「クリックしたライフ位置を計算する」です。

こんな感じのコードになりました。

function handleMouseDown(event) {
  _canvas = document.getElementById("canvas");
  let rcCanvas = _canvas.getBoundingClientRect();
  _canvasOffsetX = rcCanvas.left + window.pageXOffset;
  _canvasOffsetY = rcCanvas.top + window.pageYOffset;
  let x = event.pageX - _canvasOffsetX;
  let y = event.pageY - _canvasOffsetY;
  let xDotIndex = Math.floor(1 + _life.bw * (x / window.innerWidth));
  let yDotIndex = Math.floor(1 + _life.bh * (y / window.innerHeight));
}

_life.bwは、横方向のライフ数、_life.bhは、縦方向のライフ数です。xDotIndexとyDotIndexが目的のクリックしたライフ位置になります。

どうでも良いですが、GTR-NISMOの本家のデアゴスティーニの箱の方が消化出来ずに積み上がってきました。なんとか消化したいです。

｡･ﾟ･(ﾉД`)･ﾟ･｡えーん

以上です！

ラジオボタンで手軽に色を切り替え可能になりました。

動くところがちょー綺麗です。

以上です！

今日の作業は「シェーダーにラジオボタンの色選択情報を渡す」です。

滞りなく作業をサクッと終えました。

Uniform変数を作ってシェーダーにラジオボタンの選択値を渡しました。

明日は、この値を使ってうまくライフの色を変えられると良いなぁ・・・

以上です！

今日の作業は「ソースコードを直接変更してライフを青色にする」です。

綺麗だなー。

以上です！

色変更処理が思ったより大変だったため、作業内容を細かく分けます。

36日目：ソースコードを直接変更してライフを青色にする。
37日目：シェーダーにラジオボタンの色選択情報を渡す。
38日目：選択ラジオボタンで色を変える
39日目：クリックしたライフ位置を計算する。
40日目：クリックしたライフ位置のライフを反転する。
41日目：マウスドラッグした線上のライフを全て反転する。
42日目：予備日(次の週の予定を立てる)

たとえ新しいPCを買ったばかりでも、ベンチマークばかりいしてないで毎日少しずつでも作業を進めていこうと思います。

すみません、今日はASUS ROG Maximus XI APEX と 9900Kでオーバークロックを楽しんでいたため、ちょっと進みが遅かったです。

本来は「色選択ラジオボタンで色を変える」予定でしたが、ソース直接変更で緑色を試すのが精一杯でした。

こんな日もあります。作業調整をし、来週から頑張りたいと思います。

以上です。

今日は勘違いして３４日目予定の「画面クリック時の動作選択ラジオを追加」を行いました。本来の３３日目作業は明日やる予定です。

はい、昨日作成したライブラリが早速役立ちました。クリックした時の動作を変更するラジオボタンを追加しました。「DRAW」はクリックした箇所にライフを付ける機能、「RANDOM」は全体をランダマイズする機能の予定です。

UIの項目が増えて迫力が増してきました。

今日の作業は以上です！

今日は「ラジオボタンライブラリを文字と絵の両対応に」を行いました。

以上です以上です以上です。

今日の作業内容を、イメージだけで伝えます。

何が変わったか分かりましたでしょうか？

ラジオボタンって、名称付けなくても選択内容(上記で言えば色)がはっきりしてれば大丈夫そうです。

これで、自家製ラジオボタンUIライブラリの汎用性が上がりました。

今日は以上です！