授業用画像貼り付け用

夏休みプログラミング課題用画像貼り付け枠

折り博「なんだこれは。」

うにまろ「気にするな。」

processing 第3回 図形の表示

3日連続でお世話になりますうにまろです。今回は図形に関して。ここから自分もあまり自信ないのでご注意ください。

とりあえず、第1回で説明したとおりに、画面を準備しましょう。サイズは800×600ぐらい。背景色はなんでもOK。黒が一番みやすいかも。

size(800,600);

background(0);

↑これで準備はできると思います。

はい。こんな感じですね。ではこの800×600の真っ黒の空間に1つの円を置きましょう。

円のコードは、『ellipse』です。ちゃんと書くと、

ellipse(x,y,width,height);

↑このようになります。x,y,は、円の座標になります、打ち込んだ座標に、円の中心点が来るようになります。右上の座標ではないのでご注意ください。widthは横の大きさ、heightはたての大きさです。

それでは、ウィンドウの中央に50×50の円を書き出します。

size(800,600);

background(0);

ellipse(400,300,50,50);

↑これでできるはずです。どうでしょうか。

↑このようになりました。あとはそれぞれの数値をいじればいろいろできると思います。

ちなみに、四角形は『rect』になります。先ほどのやつをこれに書き換えてみましょう。

size(800,600);

background(0);

rect(400,300,50,50);

↑このようになります。

何か違和感がありますね。そうです。円とは違って四角形はｘ、ｙの座標は、四角形の右上の座標になります。そこだけ注意してコードを書き込みましょう。

今回はこのくらいで終わります。ほんとはもっといびつの形の四角形や三角形も紹介したかったのですが、いかんせんコードが複雑なため、またの機会に紹介させていただきます。たくさんの図形が書けるようになったら、図形を組み合わせて絵をかいたりなんてできたりしますからね。ぜひお楽しみに。

それではみなさん。また次回。毎日投稿はここでいったん終了です。

processing 第2回 四則演算の方法。

お疲れ様です、うにまろです。今回は前回の続き、四則演算の方法です。足し算、引き算、掛け算、割り算のことですね。ちなみにカバーの画像のやつは単純に文字を書き出すコードです。

println("書き込みたい内容”）；

で、できます。”をつけることを忘れずに。つけないと文字として認識されず、エラーになってしまいます。ちなみに書き込む内容は全角英数字のみ可です。

それでは四則演算やりましょう。といっても単純で、整数（小数点以下のない数字）の場合は先ほどの『println』でできるんですけどね（笑）。

では手始めに４＋２をやってみましょう。

println(4+2);

これでできるはず(^_^;)。

↑この通りになるはずです。整数ならこのやり方で四則演算全部できます。足し算は＋、引き算はー、掛け算は*、割り算は/です。簡単ですね。

最初に言った、”に関して、勘のいいひとはわかると思いますが、さっきの足し算のコード。

println(4+2);

println("4+2");

この二つのコードは全く違った仕事をします。表示も変わります。どうなるでしょうか。

こうなりますね。”をつけることで、「計算式」ではなく「文字列」として読み取られるのでご注意ください。

今回は以上にします。小数の計算の方法はまた今度。ぶっちゃけ計算とかより図形とか絵を動かしたほうが絶対楽しいもんね。どうしても気になる方は調べてみてください。前期中間試験の範囲ですので( ´∀｀ )。

それではみなさんまた次回～。

学校でやってるプログラミングのお話。

こんにちは。うにまろです。そういえばこのブログシリーズの名前って「ゲーム制作記」でしたねｗと思い、なんとなく書き始めました。

折り博「やっとお前もやる気になったか。」

うにまろ「やる気も何も、単位とらないといけないからなぁ。」

折り博「ここで授業の復習する形か。」

まずは使ってるソフトというかなんというかをご紹介。

『processing』

よくわかんないけどこれ使ってます。ＪＡＶＡに対応してるとかなんとか。ただただ単純に楽しい。

この画面。白い画面に書き込んだら黒いところに計算が書き出されていったり、エラーが表示されたり。画像は別のウィンドウが開かれます。

試しに800×600の一面真っ白の画面を出してみましょう。

size(800,400);

↑コレでウィンドウの大きさを設定することができます。size(X軸の大きさ,Y軸の大きさ）；になります。基本的に一つの命令の後にはセミコロンを付けます。

はい。これで800×600の画面が出てきました。でも灰色ですね。白にするためには背景色を設定する必要があります。

そんな時には「background」を利用します。

background(255);

↑これで背景色は白色になります。（）の中の数字はRGBの値（色を示す値）です。0に近づくほど黒に近づきます。そのまた逆もしかり。本来は（２５５，２５５，２５５）という表記になりますが、RGBのすべての数値が同じの場合は（255）だけでOKです。

はい。こうなりました。ちゃんと白くなりましたね。コードとしては以下の様になります。

size(800,600);

background(255);

これでできるはず。興味があるひとはぜひダウンロードしていろいろいじってみてください。『processig』で検索したら一番上に出てきますので。数値を変えればいろいろできますので。次回は図形の出し方or四則演算をやります。

それではみなさんまた次回～。