テクノロジア魔法学校をクリアした人のための環境構築手順 #processing

あなたはテクノロジア魔法学校の卒業生ですか。

一応知らない方のために説明しておくと、オンラインで学べるディズニーのプログラミング教材です。
ファンタジーの世界で遊びながら、
・メディアアート
・Webデザイン
・ゲーム
の3種類のスキルが身につきます。
（本格的な謎解きや、葉書のコレクションも楽しめます！）
https://www.technologia-schoolofmagic.jp/

私も楽しく進めていって、無事卒業したのですが、とあることに気づきました。
『あのコーディングする枠がないと自分の作品が作れない...』

（テクノロジア魔法学校のレッスン画面より引用）

ブラウザにコードを書き込むだけで、きれいな映像やら楽しいゲームやらが簡単に表示できてしまうため、すっかりこの環境に甘えていました。

自分のPCでも自由にコードを書けるようになりたい！
ということで。環境構築手順をまとめてみました。
（Macで確認しています）

メディアアート

Processingという、アートのためのプログラミング言語を使っているらしいです。

まずは下記のサイトの'Download Processing'から、自分のPCに合うバージョンをダウンロードしてきます。
https://processing.org/

起動すると、sketchと呼ばれるファイルが新規作成されます。

初期設定ではJavaになっていましたが、テクノロジアのコードとなんとなく近そうなp5.jsに変更します。（そうすると空の関数が2つできます。）

あとは関数内に、習ったコードを書き込みましょう。

function setup() {
  createCanvas(windowWidth, windowHeight);
}


function draw() {
  background(0, 0, 0, 20);

  noStroke();
  fill(255, mouseX/4, mouseY/4);
  quad(mouseX, mouseY+60+30*sqrt(2), mouseX-60-30*sqrt(2), mouseY-60+30*sqrt(2), mouseX, mouseY-60,mouseX+60+30*sqrt(2), mouseY-60+30*sqrt(2));
  ellipse(mouseX + 60, mouseY - 60, 120);
  ellipse(mouseX - 60, mouseY - 60, 120);
}

最後に実行ボタン(左上)を押すと、
ブラウザが開いてアートが表示されます。

レッスンではミッキーでしたが、ハート型にアレンジしています。かわいい。

Webデザイン

Webサーバーとして、今回はApacheをインストールし、ローカルで実行します。
以下のコマンドを実行
brew install httpd

/usr/local/var/www に、httpファイルとcssファイル、画像を置きます。
（こちらもレッスンを思い出して好きに変更しましょう）

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="cat.css">
  </head>
  <body>
    <div>
      <h1>White Cat</h1>
      <h2>おしゃれな猫の雑貨屋さん</h2>
      <img src="cat.png">
      <p>かわいい白猫のマリーがあなたを待っています</p>
    </div>
  </body>
</html>

cat.css

h1{
  color: rgb(0, 180, 255);
  font-size: 80px;
  font-family: serif;
}

h2{
  color: rgb(255, 180, 180);
}

p{
  color: rgb(100, 100, 100);
  font-size: 24px;
}

div{
  text-align: center;
}

img{
  width: 220px;
  border-radius: 50%;
}

/usr/local/etc/httpd/httpd.conf に以下を追記して、
ServerName localhost:8080

以下のコマンドでサーバーを起動します。
sudo apachectl start

ブラウザでlocalhost:8080にアクセスすれば、ページが表示されます。
白猫のシルエットを、淡い色と合わせてみました。

停止する際は
sudo apachectl stop
です。

ゲーム

執筆中です