カテゴリー
プログラミング学習

【小学生プログラミング講座】
基礎編1 ①点を打つ

【小学生プログラミング講座】トップへ

アトム先生

本プログラミング講座はProcessing言語で学びます。

・なぜProcessing言語を使うのか?は、こちら

・学習環境の準備をしたい場合は、こちら

❶画面を用意する

まず最初にプログラムを実行する画面を用意します。

ここでは画面のサイズをヨコ500×タテ500ピクセルとします。

【用語の解説】ピクセル(画素)とは?
 1ピクセルは画面上の1つの点のことで、実は今見ている画面は点の集まりでできています。
 例えば、私が今使っているPCの画面サイズは1,920×1,080ピクセルです。横幅が1,920ピクセルで縦幅が1,080ピクセルとなり、掛け算すると画面上の点の数は約207万個となります。
 自分のPCの画面サイズを見てみましょう。
「スタートー設定ーシステムーディスプレイ」で「ディスプレイの解像度」に表示されているサイズが画面サイズになります。

プログラムにはたくさんの決められたコマンド(命令)があり、関数と呼びます。

【関数画面サイズを設定する

size(x,y);

 x:画面横幅のサイズ(ピクセル)

 y:画面縦幅のサイズ(ピクセル)

次のプログラムを入力して実行してみましょう。

プログラムを入力する時は、次のことに注意しましょう。

 ・文字はすべて半角で入力

 ・英字の大文字と小文字は区別されるので別文字となる

 ・プログラムの最後は「;(セミコロン)」で終わる

size( 500, 500 );   //画面サイズ 500×500ピクセル

  ※「//(ダブルスラッシュ)」より右側はコメント(説明文)なので入力しなくてもよい。

1行だけのプログラムを入力したら、実行ボタンをクリックして実行してみましょう。

実行結果1-1

ヨコ500ピクセル、タテ500ピクセルの画面が作成されました。

次の練習問題をやってみましょう。

【やってみよう①】
(1) 画面サイズをヨコ500×タテ1000ピクセルにする。
(2) 画面のサイズをヨコ1000×タテ500ピクセルにする。
(3) 画面のサイズをヨコ100×タテ100ピクセルにする。
(4) 画面サイズを自由に変えてみよう。


❷1つの点を打つ

❶で用意した画面に点を打ってみます。

点を打つ場所を座標といいます。

【用語の解説】座標とは?
 画面の左上が原点(0,0)です。
ヨコ方向をx座標と呼び、タテ方向をy座標と呼びます。

点を打つにはpoint関数を使います。

関数】点を打つ

 point(x座標,y座標);

  x座標:点のx座標

  y座標:点のy座標

座標(50,50)に点を打つプログラムを実行してみましょう。

size(500,500);    //画面サイズ 500ピクセル×500ピクセル
point(50,50);     //座標(50,50)に点を打つ
実行結果1-2

プログラムで書いた点は見えますでしょうか。

点が小さすぎて見えないと思いますので、画面を拡大してみましょう。

Windowsキーを押しながら+キーを押すごとに画面が拡大します。 Windowsキーを押しながらーキーを押すごとに画面が縮小します。

 うまく見えなかった人もいるかもしれません。もう少し大きな点を書いてみましょう。

点をとなり同士に4つ打って大きな点にしてみます。

size(500,500);    //画面サイズ500ピクセル×500ピクセル
point(50,50);     //座標(50,50)に点を打つ
point(50,50);     //座標(50,50)に点を打つ
point(50,50);     //座標(50,50)に点を打つ
point(50,50);     //座標(50,50)に点を打つ
実行結果1-3

どうでしょうか。点は見えましたでしょうか。


❸点を並べて線を書く

10個の点をヨコに並べて線を書いてみます。

次のプログラムを入力し実行してみましょう。

size(500,500);    //画面サイズ 500ピクセル×500ピクセル
point(100,150);   //座標(100,150)に点を打つ
point(101,150);   //座標(101,150)に点を打つ
point(102,150);   //座標(102,150)に点を打つ
point(103,150);   //座標(103,150)に点を打8
point(104,150);   //座標(104,150)に点を打つ
point(105,150);   //座標(105,150)に点を打つ
point(106,150);   //座標(106,150)に点を打つ
point(107,150);   //座標(107,150)に点を打つ
point(108,150);   //座標(108,150)に点を打つ
point(109,150);   //座標(109,150)に点を打つ
実行結果1-4

次の練習問題をやってみましょう。

【やってみよう➁】
(1)スタート位置(200,200)から10個の点をヨコに並べて線を書く。
(2)スタート位置(200,200)から10個の点をタテに並べて線を書く。