日別アーカイブ: 2021-08-02

夏休みの宿題0

このごろの宿題

この頃、スポーツ、勉学、芸術などの分野において個人の努力というより一家をあげての総力戦のような様相を受けます。

このことを自分が事をなし遂げられなかった言い訳には使いたくありませんが、当たらずとも遠からずでしょう。

詳しい実情はわかりませんが、義務教育の長期休みの宿題は家庭の援護が当たり前のような気がします。

そこで他山の石、路傍の石でしょうが、宿題の完成の一助になればとブログで取り上げます。

めざす作品の形式

料理についてもいえることですが、完成品の寿司、天丼、ピザなどを出前することができます。次に半完成品の冷凍食品、そうざい半製品などが考えられます。最後に様々な食材や調味料を取り揃えて腕を振るう個別料理があります。

PC、タブレットなどで実現可能な宿題を完成させるには、その人の技量にもよりますが、完成品、半完成品、個別作品になります。このブログでは半完成品形式の食事の用意に相当する作品完成を目指します。

万華鏡を作る準備をする

万華鏡を作るに当たり、一から手作りする方法は時代にそぐわないことです。多くの基本技や開発ツールは先人が用意しています。後を継いだ者は本質的な点に力を注げるようになっています。

以下の図は今まで作り上げた作品の一部です。

 

万華鏡を描画する機能はp5.jsライブラリーを使います。万華鏡を描くライブラリーは丸型ではなく下の1図のように四角に描かれるので丸型に描くには2や3のように加工します。総合力と言ってはおこがましいですが、いいものに仕上げるには様々な知識が必要です。

注:万華鏡を作る準備をしています。
123

 

プログラミングコード

上の図は以下のようなコードで描画されます。

<div style="width:340px; height:24px; border:0px solid red; padding-left:20px;"><b>注:</b>万華鏡を作る準備をしています。</div>
<span style="float:left; margin-left:70px;">1</span><span style="padding-left:110px">2</span><span style="padding-left:110px">3</span>
<div style="float:left; margin-left:20px; width:100px; height:100px; background:pink; clear:both;"></div>													<!--①-->
<div style="float:left; margin-left:20px; width:100px; height:100px; background:cyan; border-radius:52px; border:2px solid darkkhaki;"></div>	<!--②-->
<div style="float:left; margin-left:20px; width:103px; height:103px; background:cyan;">															<!--③-->
  <img style="width:104px; height:104px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
</div>

総合力を結集

他人のものをコピー&ペーストしていい作品を作ることは難しいです。当ブログでは根本に立ち返って基本をマスターしていただけるような内容になっています。地道な挑戦をご期待申し上げます。

万華鏡を描く部分は次回以降になります。