趣味としてのクリエイティブ・コーディング：001：プログラムを動かしてみよう

deconbatch

2018年10月8日 18:04

さあ、始まりました、とか能書き抜きで、とっかかりとしてサインカーブを書いてみましょう。

サインカーブは簡単なプログラムで美しいカーブを描けるので、やってて楽しいと思います。
応用の幅も広くて、こんな感じのものも作れるんですよ。

道具立て

使う道具は下記の 3つです。
・テキストエディタ
・Web ブラウザ
・インターネット接続

テキストエディタ
単にエディタとも言います。
Windows の人は「メモ帳」でもいいです。Mac の人は「テキストエディット」や「Simple text」かな。

Linux の人は言う必要ないし、きっとヘタなこと言わないほうがいいですよね。(エディタ戦争)

わかる方は各種 IDE を使ってももちろん OK です。

Mac の「テキストエディット」はそのままだとコーディングに向かないようです。
以下のページを参考にして HTML ファイルを作成したり、HTML ファイルを編集モードで開けるようにしてください。
https://support.apple.com/ja-jp/guide/textedit/txted0b6cd61/1.14/mac/10.14
あるいは、下記などを参考に Atom とかをインストールしたほうが楽かもしれません。
https://eng-entrance.com/free-texteditor-mac-2

Web ブラウザ
単にブラウザとも言いますね。
Chrome とか、Safari とか、Firefox とか、Internet Explorer とかのことです。
どれでも動くと思いますが、動作確認は Chrome（バージョン: 69 64 ビット）で行っています。

インターネット接続
これは道具というか、パソコンがインターネットに繋がっていれば OK です。

テキストエディタでプログラムを書いて、Web ブラウザでそのプログラムを動かすという手順で進めていきます。
このプログラムを動かすときにインターネットに接続されている必要があります。

いきなり動かしちゃえ！

道具の説明ばかりじゃつまんないんで、早速プログラムを動かしてみましょう。

…え？プログラムのこととか何もわかんないけどいいのかって？
いいんです！「趣味の～」なんだから楽しけりゃいいんです。

プログラムの解説なんか聞くより動かして結果見るほうが楽しいでしょ？

ということで、下記のコードをテキストエディタにコピペして、ファイルとしてどこかに保存してください。

ファイル名は最後が .html ならなんでもいいですが、決めかねるなら sample.yymmdd.01.html で yymmdd に今日の年月日を入れておきましょうか。
こうしておくと命名に悩まないし、年月日で順に並んで整理も楽です。

あとでブラウザでそのファイルを開きますから、どこに保存したかは憶えておいてください。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0.
      
function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100, 100);
    blendMode(SCREEN);
    noStroke();
    noLoop();
}

function draw() {
    background(90, 20, 10, 100);
    translate(40.0, height / 2.0);
    fill(0, 60, 50, 100);
    for (i = 0; i < TWO_PI; i += 0.03) {
	ellipse(i * 50, -sin(i) * 50, 5, 5);
    }
}

    </script>
  </body>
</html>

できましたか？

では、保存したファイルをブラウザで開いてみましょう。
ファイルをブラウザにドラッグ＆ドロップしてもいいし、Windows の場合ブラウザ上で Ctrl キーを押しながら離さずに o キーを押して開いてもいいし、ご自由にどうぞ。

どうです？こういう結果が表示されましたか？

やりましたね！
これであなたも今日から趣味のクリエイティブ・コーダーです！

「環境」って？
プログラミング界隈ではよく「環境」という言葉が出てきます。
日常生活では「環境問題」とか「環境にやさしい」などでよく耳にする言葉ですね。
例えば「Windows 上でメモ帳を使って P5.js のコードを書き、Chrome で結果を表示する」という世界を用意してそこで開発を行う。この「世界」を「環境」と呼んでいると思っていただければ大丈夫です。
「どういう環境で開発してるの？」と他人に聞かれたら、「Windows 上でメモ帳を使って～」と答えればいいわけ。
逆に他の人に「どういう環境で？」と聞いていくと、新しい世界をいろいろ知ることができるでしょう。

更新履歴
18/10/08 道具に「インターネット接続」を追加

この記事が面白かったらサポートしていただけませんか？ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕