HTML5 Canvasで動くジェネラティブ・アートをブログに貼る

「ジェネラティブ・アート」

最近『ジェネラティブ・アート』という本を買いました。ジェネラティブ・アート(Generative Art)とは、通常のアート作品のように人間が描いたりつくったりするのではなく、何らかのアルゴリズムやランダム性を利用して生成的につくられるものを言います。ちょっとしたプログラムでアートができるので、絵心が不要なのが魅力です。

下のように画像検索すると、かっこいいものがいくつもでてきます。
generative art - Google 検索

HTML5 Canvasで描いた絵をブログに貼り付ける方法

本を読んだら実際に製作してこのブログに貼り付けたいので、お絵描き方法としてはHTML5 Canvas + Javascriptを使うことにし、貼り付け方を調べてみました。本ではProcessingという言語を使っているのですが、Javascriptの方が好みなので。

試してみると意外に簡単でした。はてな記法しか試していないのですが、たぶん以下をブログ編集画面にコピペするだけでOKです。ほかのブログ、記法でもいけるのではないでしょうか。
これは単純に赤い長方形を書くだけの例です。HTML5 Canvasの使い方の説明は他のWebサイトや書籍を参照してください。

<canvas id="canvas1" width="300" height="300"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");

    // このあたりに好きなプログラムを記述！！！
    ctx.fillStyle = "rgb(255, 0, 0)";// 赤色
    ctx.fillRect(50, 50, 200, 100);// 長方形を書く

</script>

上のプログラムを編集画面にコピペすると、以下のようにお絵描きができます。

はじめてのジェネラティブ・アート

ブログへの貼り付け方が分かったので、早速作ってみます！書籍『ジェネラティブ・アート』の中盤あたりを参考にしつつ、適当にオリジナルで作りました。

以下のStart/Pauseボタンをクリック(タップ)すると開始し、もう一度クリック(タップ)すると一時停止します。開始すると、色と中心をランダムに変えつつ、線がぐるぐるとまわっていきます。ランダムなので、ページを更新してStartする度に異なる模様があらわれるはずです。
あまり洗練されてない…

Start / Pause

このプログラムは以下のようになっています。

<button onclick="start_pause()" style="font-size: 1em; font-weight: bold; padding: 0px 5px; background-color: #248; color: #fff; border-style: none;"> 
    <h1> Start / Pause </h1>
</button>
<canvas id="a_canvas" width="300" height="300"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("a_canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 300;
    canvas.height = 300;

    var cx = canvas.width / 2.0;// center x
    var cy = canvas.height / 2.0;// center y
    var line_len = 30;
    var ang = Math.PI / 3.0;
    var rand_r, rand_g, rand_b;
    var start_or_stop = 0;

    function draw_line(x1, y1, x2, y2, w){
        ctx.lineWidth = w;
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.closePath();
        ctx.stroke();
    }

    function update(){
        line_len += 10*Math.random() - 5;
        rand_r = 100 + Math.floor(156*Math.random());
        rand_g = 100 + Math.floor(156*Math.random());
        rand_b = 100 + Math.floor(156*Math.random());
        cx += 10*Math.random() - 5;
        cy += 10*Math.random() - 5;
        ctx.strokeStyle = "rgb(" + rand_r + ", " + rand_g + ", " + rand_b + ")";
        draw_line(cx - line_len*Math.cos(ang), cy - line_len*Math.sin(ang),
                  cx + line_len*Math.cos(ang), cy + line_len*Math.sin(ang), 2);
        ang += 0.1*Math.random();
    }

    function start_pause(){
        if (start_or_stop==0){
            timer = setInterval(update, 10);// update関数を定期的に実行してアニメーション
        }else{
            clearInterval(timer);// ストップ
        }
        start_or_stop = 1 - start_or_stop;// 状態を更新
    }
</script>

おわりに

いい感じの作品ができたら本ブログに掲載してみます。

参考にした本はこちら↓

[普及版]ジェネラティブ・アート―Processingによる実践ガイド