投稿

4月, 2018の投稿を表示しています

ゼロからはじめる Processing | 第1回 : なにもしない

イメージ
「ゼロからはじめるProcessing」シリーズ第1回です。今回はなんと「なにもしません」。 今回の内容 setup や draw の意味を知る コンソール画面に文字を表示してみる なにもしないプログラム まずは「なにもしないプログラム」からはじめていきます。 // プログラムを起動したとき、最初に1回だけ実行する void setup() { } // 画面を描画するとき定期的に実行する void draw() { } 上のような、プログラミング言語で書かれたプログラムのことを ソースコード や コード と呼びます。 ためしてみよう Processingを起動して、上のコードを実行してみてください。 ウィンドウが出てくることを確認できましたか? この記事には あと2箇所、コードを打ち込んでほしいところ があります。 まだProcessingを閉じないでくださいね。 さて、準備はできましたか。 ここからは、この「なにもしない」コードで何が起きているのか、ひとつひとつ紐解いていきます。 コメント文 「//」から行末までを コメント文 や 注釈文  といいます。 // プログラムを起動したとき、最初に1回だけ実行する // 画面を描画するとき定期的に実行する コメント文は、 プログラムの動作に影響しません 。 ソースコード中にメモ書きを入れるための機能です。 そのため、下のようにコメントを削除しても、動作はなんら変わりません。 void setup() { } void draw() { } setup関数 void setup() { } 「void setup() { … }」の部分を セットアップ関数 と呼びます。 void setup() { // ここがセットアップ関数の中身。 // ここに命令を書いていく } プログラミングでいう 関数 とは、(一般的には) 命令リストに名前をつけたもの のことです。 Processing には、 波括弧 { } のなかへ順番に命令を書いていく、というルールがあります。 ここでは「setup」という名前を付けた、命令のかたまりを用意しています。 Processingで「setup」という関数を用意

ゼロからはじめる Processing | 第0回 : Processing をはじめよう

イメージ
「ゼロからはじめる Processing」シリーズは、これからゲーム制作をはじめる方のための、Processing (プロセッシング)でプログラミングの基礎を学べる連載記事です。 Processing を用意する ダウンロード Processing は processing.org  (公式サイト) から無料でダウンロードできます。 (以下は2018年4月現在のダウンロード手順です) 1. 「Download Processing」をクリック 2. 使っているOSと同じ版を選ぶ 起動する ダウンロードしたZIPファイルを展開すると、 Processing の実行ファイルが出てきます。 この実行ファイルを開くと Processing が起動します。 Processing の開発画面 Web上で Processing を使う Processing をうまく導入できない場合、オンラインで Processing プログラムを作成・共有できる 「 OpenProcessing 」 のようなサービスを使うこともできます。 OpenProcessing はアカウント登録が必要ですが、すぐにブラウザで動くという点では手軽ですね。 OpenProcessing を使う際の注意点 初期設定では、右側のバーにある Mode が P5js になっています。 この記事では本家 Processing の文法で書いていくので Processing.js に切り替えます 。 (P5js モードでは JavaScript で書く必要があります) 「Mode」 を 「Processing.js」 にする はじめてのプログラム Processing のプログラム編集画面に、以下のプログラムを打ち込んでみましょう。 void setup() { size(300, 300); frameRate(30); textSize(20); } void draw() { background(24); text("Yeah", 125, 150 + 100 * sin(frameCount / 15.0)); } このプログラムを実行して、「Yeah」という文字が上下に