@bigakubu アートとプログラミングがあればいい。

【第3話】x座標とy座標を書き換えてドクロの表示位置をコントロールする


前回 【第2話】最初のサンプルプログラムでドクロを表示。幅と高さを変えてみるに続き、プログラムの中の数字を適当にいじりながら、ドクロがどう変化するかを観察してみたいと思います。使うのは同じ練習画面 https://jsfiddle.net/dokubara/h3ydwf87/65/ です。

ちなみに以下のような表示部分では、Result(結果)やJavaScript(プログラム)と書かれたタブを押すことでプログラム表示と結果表示を切り替えることができるので活用してみてください。

実行結果/javascript


さっそく以下を試してみましょう。

(プログラムの13行目)前2つの数字20,40を500,200に上書きする

※そしていつものように、最上部のメニューバーの[▷Run]を押す。この操作は次回以降説明を省略することにする。

ドクロはどうなりましたか?以下のように、右方向・下方向に位置が変わったはずです。※ドクロの下アゴ部分が見えなくなっている場合はサンプル画面部分をスクロールしてください。

実行結果/javascript



プログラムのポイント解説

これら2つの数字がドクロの「位置」を表していることがわかりますね。画面上の「位置」は下図のように x座標(左端からの距離)とy座標(上端からの距離)で表します。左上のかどが基準点(0,0)です。座標が大きすぎると画面からはみ出したり、完全に見えなくなってしまったりします。(特にエラーにはならないので要注意です)

ドクロの表示位置とx座標・y座標の関係を確認しよう

また、図からもわかるように、ドクロの位置はドクロの左上の座標が基準点になっています。ドクロの「中心」ではないところに注意してください。


画面サイズはとりあえずiPhone8の壁紙サイズにしてある

ちなみにこのプログラムでの画面(結果表示する部分)のサイズは750×1334に設定してあります。なぜこのサイズにしたのか?iPhone8の壁紙の最適サイズだからです。このサイズはプログラムの4〜5行目で指定しています。

javascript

canvas.width = 750;
canvas.height = 1334;

iPhone8以外の壁紙サイズに合わせたい場合はここを好きな数値に変えればよいわけですが、当面はこのままにしておくほうが練習内容を理解しやすいかもしれません。


ここまでの「まとめ」として大きさや位置の違う4つのドクロを表示してみる。

実行結果/javascript


ここまでのまとめとして「ドクロの家族」をイメージして4つのドクロを描いてみました。左から父、長男、長女、母。父と長男は少しがっしり系(横幅が広い)で長女と母は面長の美人系といったところでしょうか。


プログラムのポイント解説

プログラムはどうなっているかというと、今まで学んだことしか使っていません。

javascript

context.drawImage(skull, 50, 80, 230, 210); // 父
context.drawImage(skull, 250, 150, 150, 120); // 長男
context.drawImage(skull, 390, 150, 130, 120); // 長女
context.drawImage(skull, 510, 100, 200, 200); // 母

今までは数字を上書きするだけでしたが、今回はドクロを表示する行自体を4回書いています。もちろんコピペが利用できるのでまずはコピペでOKです。その上で、位置や幅・高さを調整し、ドクロの家族を作っているわけです。

※プログラムの全体を確認したい場合は、ドクロの家族が表示されている部分の[Javascript]タブを押してプログラム表示に切り替えてみてください。


これはこれで面白いが結局「手作業」じゃないか?

こうやって数字を調整しながら、またはコードを複製しながらデザインを作っていくのは十分に楽しいことです。しかし、これはプログラミングといっても結局のところ「手作業」ですよね。序文で述べたように手作業には限界があり、その先にあるデザインを手にするためにプログラミングを学習を始めたはずです。

そこでいよいよ次回 【第4話】<for命令>でループ!たくさんのドクロを簡単に並べる で、プログラミングによる「反復」作業をやってみたいと思います。ここからぐっとプログラミングらしくなるはずです!



Google Ad

Google Ad

Recommend

【第1話】プログラミングで「ドクロと薔薇の壁紙」をデザインしたい!

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第1話では、この講座のテーマを紹介しています。スマホの壁紙のデザインはもちろん手作業でもできますが、手作業には2つの限界がありそうです。一つは「大量の反復作業ができない」もう一つは「自分の思いつくものしか作れない」ということです。プログラミングでこの限界を越えてみましょう。

アート系プログラミング入門講座

【第6話】<if命令>で条件分岐!ドクロと薔薇を巧みに出し分ける

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第6話では、2つ目のモチーフ「薔薇」を使います。2つのモチーフが出てくることでその出し分けという発想が生まれます。プログラミングでいう「条件分岐」javascriptをはじめとして多くのプログラミング言語で「if命令」を使います。ドクロと薔薇を組み合わせてデザインの可能性を広げます。

アート系プログラミング入門講座

【第8話】「剰余(割り算のあまり)」を活用したデザインパターン

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第8話では、割り算の「あまり」を活用して新しいデザインパターンを作ります。剰余計算は日常あまり使わないかもしれませんがプログラミングでは非常に有用です。javascriptでは%記号で剰余を計算できます。例えば7%2=1となります。さあこれをどうデザインに活かすのでしょうか。

アート系プログラミング入門講座

【第10話】ここまで学んだことを組み合わせて壁紙をデザインしてみる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第10話では、ここまで学んだことすべてを組み合わせて壁紙を完成させます。for命令、if命令、剰余計算、乱数などプログラミングの必修テクニックを使い、実際に使える壁紙画像を作る体験ができます。単に文法を覚えるのとは違う「使えるプログラミング」を感じていただければ幸いです。

アート系プログラミング入門講座

【第4話】<for命令>でループ!たくさんのドクロを簡単に並べる

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第4話では、javascriptでも重要度の高い「for命令」を使ってループ(反復)処理をする方法を学びます。これにより手作業ではなくプログラミングで思い通りの数だけ作業を繰り返すことができるようになります。前回学んだ「座標」と組み合わせてたくさんのドクロを正確に並べてみます。

アート系プログラミング入門講座