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

【第2話】最初のサンプルプログラムでドクロを表示、幅と高さを変えてみる


さっそく始めましょう。まずこれから展開するドクロと薔薇の壁紙づくりの「種」になる短いプログラムを用意しました。

javascript


いまの段階では「まったく意味がわからない」状態でOKです。
とりあえず以下のURLにアクセスしてみてください。
(練習用画面:https://jsfiddle.net/dokubara/h3ydwf87/58/



「プログラミング練習」の進め方

このような画面が表示されましたか。中央下の枠に上記プログラムがすでに書かれています。※プログラムや実行結果が表示されているパネルの幅や高さは境界線のドラッグで好みのサイズに調整できます。

これからプログラミングを学ぶフィールドになる画面。

そして、右下の枠に早くもドクロが表示されていると思います。

いまどんな状況かは後ほど説明するので、まずは(かなりいきなりですが…)プログラムをいじって、デザインを変える体験 をしてもらおうと思います。といっても簡単な操作です↓

  1. 左下枠のプログラムの13行目、後ろ2つの数字 200,200 を 400,400 に上書きする
  2. 最上部のメニューバーの[▷Run]を押す

以上で完了です。上図のように、ドクロが大きく変化していたら成功。
尚、プログラムを書く際は基本的に半角の英数字・記号を使う。数字の間の点も半角のカンマ(,)だ。ピリオド(.)や全角の読点(、)にならないように注意してください。



深く考えず、数字を色々変えて実行結果の変化を確かめる

さきほど 400,400 と上書きした部分を、好きなように変えてドクロがどう変化するかを見てみましょう。2つの数字は同じである必要もありません。100,200 とか 200,100 など思いつくままに試してみましょう。

もう気づきましたね。2つの数字のうち、最初の数字はドクロの「横幅」をあとの数字は「高さ」を決めていたわけです。



初心者こそ「習うより慣れろ」

いま試したことは特にわかりやすい事例ですが、プログラミングを学ぶ上で非常に大切なことです。プログラムを少しいじってみる、すると実行結果が変化する。なるほど、この数字はこの長さを決めていたんだという気付き。これを繰り返すことで徐々にプログラムが動く仕組みを理解できるようになります。先生に一方的に習ったり、教科書通りに勉強するよりも自分で発見していくほうがはるかに上達につながると思うのです。

もちろんいつもこのようにシンプルに運ぶとは限りません。結果の変化が目に見えないこともあるし、ほんの少しのプログラム変更によって何も表示されなくなってしまう(いわゆるバグによりプログラムが止まってしまうなど)こともあります。しかし恐れる必要はありません。学びに失敗はつきものです。

※当面は心配する必要ありませんが、将来サーバー上でプログラムを動かしたり、Web上に公開して不特定のユーザーが使うものを作ることになった際には、他者に損害を与えないよう、十分なテストとデバッグ(不具合の排除)作業が必須であることを念の為書き添えておきます。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

【第5話】<for命令>による2重ループで縦横に並べ画面をドクロで埋め尽くす

アート系プログラミング入門講座「ドクロと薔薇の壁紙」の第5話では、前回学んだfor命令を2重ループにすることでドクロを縦横にずらっと並べてみます。for命令の2重ループはjavascriptに限らずプログラミングで非常によく使う必修パターンでデザイン作業にも欠かせない手法ですので、色々試しながら身につけておきましょう。

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

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

アート系プログラミング入門講座「ドクロと薔薇の壁紙」前回に続いてサンプルプログラムを少しずつ改良しながら必要な知識を学びます。第3話のテーマは、デザインをする上で欠かせない「座標」これを理解することでドクロを自分の思い通りの位置に表示できるようになります。ここまでのまとめとしてちょっとした「作品」を作ってみます。

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

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

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

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