「メディア情報学」を担当している松山です。よろしくお願いします。

今回も、プログラミングを用いた情報表現を体験しつつ、メディア情報というものを考えてみたいと思います。

これ自体はプログラミングの授業ではないのですが、実際に動かして考えるためには、ある程度プログラミングの知識が必要となってしまいます。

が、とりあえず。まずは、ざっくりと雰囲気をつかんでほしいと思っています。

今回もいくつかのサンプルプログラムを載せています。実際に自分の手で書いて実行してください。

では、はじめましょう。

四則演算

p5.js ではプログラム中に四則演算（ + - * / ）を使うことができます。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  circle(25+25, 5*10, 100-20);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  circle(5*5+25, 25+5*5, 160/2);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  circle(mouseX+100, mouseY, 100);
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  rect(mouseX-100, mouseY-50, 200, 100);
}

演算は、数学と同様に優先順位が決まっています。

たとえば、 5*5+25 と 25+5*5 は、乗算が先に計算されるので、結果はどちらも 50 になります。

加算を先に行いたい場合は、(10+15)*2 のように、() を使って優先順位を明示すればOKです。

変数

変数とは、数値などのデータを一時的に入れておく「箱」のようなものです。

まずは書いてみる　その１

**let x = 50;**

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  **circle(x, 200, 100);**
}

let x = 50;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  **x = x + 1;**
  circle(x, 200, 100);
}