クリエイティブコーディングが楽しい!p5.jsでうねうね動く曲線を描いてみた

p5.jsを使って模写

TwitterかnoteをみていたときにICS MEDIAの編集長さんの記事が目にとまりました。

参考:JavaScriptで取り組むクリエイティブコーディング – パーリンノイズを使いこなせ – ICS MEDIA

これを読んで「うわ〜、すご〜い」って思った。ラジアンとかsinなど僕がかつて学んでいた(そしてすっかり忘れている笑)数学をさらりと使っているし、僕の興味のあるフロントエンド分野のスペシャリストのようですし。

今やHTML5とJavaScriptでこんな面白そうなことができるんだ!
僕も作ってみたい!

というわけで、ProcessingのJSライブラリ「p5.js」を使って模写しました。
成果は▼こちら。

※ソースコードは記事下においておきます

 

先の記事は段階的に処理を説明してくれていますので、ひとつひとつ同じことをp5.jsで実装していきました。p5.jsのお作法を知るためにリファレンスを見ながらコツコツと。

その途中経過の産物が▼こちら。
マウスを押している間にぺジェ曲線のコントロールポイントが左右に動きます。(スマホでは動きませんでした)

 

しかし、記事の「まとめ」にp5.js版のサンプルコードがあることを知ったのは最終段階に近づいたあたり(笑)

おかげでいい勉強になりましたけどね。例えば、

  • 時間の概念についてp5.jsではdraw()内に記述すれば良いのですが、JSだと「requestAnimationFrame(tick);」を使って時間の概念を作っていること。
  • p5.jsは特に指定しない限り描いたものが残る(描き続ける)もの、JSではFlashやBlenderでいうタイムライン(パラパラ漫画的)の概念があるもの。
  • Date.now()から刻一刻の変化量を求める手法がある。

など。

Generative Design:論理性と偶然性のアート

プログラムしたものが動くわけだから、そのルールに収まったもの・決まったものしか描けません。でも、変数をいじってみたり、for文とfor文を掛け合わせてみたら思いがけない設定が生まれたりする。そういうものから偶然に描かれるものがあるはず。

「何が生まれるのかが最後まで読めないこと」が僕には魅力的。

AdobeやBlenderを使って現実のもの・想像上のものを形にするのもいいけれど、プログラミングで創造することもまたいい。論理性と偶然性が織りなす何かがいいのです。

IMG_1825

おわりに

昔から「動くものを作りたい」という気持ちはありましたが、これといって作ってきたわけでもなし。でも興味だけはずっとあった。それがたまたま目にした記事で進み出すとは思わなかったです。

で、どうせなら動くものの方が心躍るね。画面をタッチする、マウスカーソルを合わせる。インタラクションっていうのかな。

それから、これきっかけにJSライブラリに興味が出てきました。今の時代は色々あるんですねぇ。フレームワークもたくさんあってJSって面白いって感じてます。

本業の写真と融合させられないか考えてみようか。動いてみようか。

 

※ICS MEDIAさんの記事はわかりやすくがまとめられていて、参考&刺激になります。

うねうね動く曲線のソースコード

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>p5.js demo | Takashi Q. Hanamura Photography</title>
    <style>
        body {
            margin: 0;
            height: 0;
            overflow: hidden;
        }

        canvas {
            width: 100vw;
            height: 100vh;
            background: black;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="sketch180924.js"></script>
</head>

<body>
</body>

</html>

※ICS MEDIAさんのサンプルを真似させてもらいました。CSSの設定方法は超参考になりました。

JavaScript(sketch180924.js)

/*
  https://ics.media/entry/18812 の動作をp5jsで再現する。
  HTML Canvas要素とJavaScriptで実現している。
  自分なりに作ってから上記URLのp5js版のコードを移植したもの。
*/

let stageW = innerWidth;
let stageH = innerHeight;
const lineNum = 100; // ラインの数
const segmentNum = 100; // 曲線の分割数
const amplitude = stageH / 2; // 振幅

function setup() {
    createCanvas(stageW, stageH);
    colorMode(HSB);
    strokeWeight(1);
}

function draw() {
    background(0, 0, 0);
    noFill();
    drawCurve();
}

function drawCurve() {
    [...Array(lineNum).keys()].forEach(j => {
        const time = Date.now() / 6000; // 擬似アニメーション用の媒介変数
        const coefficient = 50 + j; // 係数

        // ラインのカラー設定
        const h = round(j / lineNum * 360); // 色相
        const s = 100; // 彩度
        const l = round(j / lineNum * 100); // 明度

        beginShape();
        stroke(h, s, l);

        [...Array(segmentNum).keys()].forEach(i => {
            // X座標
            const x = i / (segmentNum - 1) * stageW;
            // Y座標
            const px = i / coefficient; // 横軸の入力値
            const py = (j / 50 + time); // 時間の入力値
            //const y = amplitude * noise(px, py) + stageH / 3;
            const y = (noise(px, py)) * stageH;
            vertex(x, y);
        });
        endShape();
    });
}

// マウスを押している間は処理を止める
function mousePressed() {
    noLoop();
}

function mouseReleased() {
    loop();
}

この記事を書いた人

花村貴史|Takashi Q. Hanamura

空気感フォトグラファー/傾聴者/エンプティチェアが好き/Creative Codingが好きな、写真を生業とする元ソフトウェアエンジニア。
「自分の好きを大切にしよう」と会社員をやめて大好きな信州に移住。2年半の信州生活を終え、愛しの相方さんのいる兵庫に移住。
その人・その場の「空気感をそっとすくい撮る」写真が好評。撮影した写真で「自然体のあなた」を世に伝えるメッセンジャー。
オシゴトについては「WORKS」へ。ご依頼は「CONTACT」からどうぞ。

写真のオシゴト一覧

撮影|Photo Session

お話しながらのポートレイト撮影です。「今」そして「これから」のあなたにフォーカスして撮影します。SNSやサイト用のプロフィール写真に。

 

撮影|Photo Shooting

「友達と楽しんでいる」「セミナーで講演している」「パーティーを主催している」など、皆さんが大切な時間を過ごしている瞬間をスナップします。

 

写真術|Photo Lecture

カメラの使い方、撮影術、Lightroomの使い方などの「マンツーマンレクチャ」や「少人数制のワークショップ」について。写真に関する疑問の解決に。

 

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします