ランサーズ（Lancers）エンジニアブログ > アドベントカレンダー > アートとエンジニアリング

アートとエンジニアリング

blog_admin｜2022年12月24日
アドベントカレンダー

この記事は、Lancers Advent Calendar 2022 の24日目の記事です。
昨日は、二橋さんの「立ち上げから2年で20名以上のエンジニアがジョイン！ランサーズHRBPの取り組みを紹介します！」でした。

フロントエンドエンジニアの谷（@high_g_engineer）です。
今回は趣味に振り切ったアートとエンジニアリングのお話です。
本題の前に、自分がアート領域のエンジニアリングを趣味嗜好にするに至るまでのストーリー的なものも添えてお送りいたします。

強烈に憧れた存在

自分はランサーズに所属して1年3ヶ月程で、その前のエンジニアキャリアは、
情報系専門学校を卒業後、5年程受託システム開発会社でフルスタックエンジニアを経験
4年半程クリエイティブ制作会社でフロントエンドエンジニアを経験
という経緯があり、キャリアの半分くらいはクリエイティブ制作の現場に身を置いていました。

なぜ、クリエイティブ制作の現場に身を置いていたかというと、その界隈で強烈に憧れた一人の存在がいたからです。

その人の名前は、中村勇吾さん。
本人は職種をデザイナーとしていますが、クリエイティブディレクター領域、エンジニア領域もバリバリにこなすスーパークリエイターです。

引用：BAUS ブレイクスルー・クレジットストーリー #02｜中村勇吾（tha） https://baus.jp/magazine/story/8362

作品のリンクをいくつか貼っておきます。



2000年代後半のWebクリエイティブというとまだまだFlashが全盛期で、
Flash界隈で中村勇吾（yugop）さんの名前を知らない人はおそらく居なかったはずです。

今の中村勇吾さんは、コーネリアスのライブ演出やデザインあ展等に関わっていたりする様です。

中村勇吾さんがNHKのプロフェッショナル仕事の流儀に出た会があり、この放送会をバイブルとして仕事に行き詰まった時や何かの節目のタイミングで見ることがあるのですが、そこから得た教訓は今の自分にもつながっている点が多いです。
番組中で、中村勇吾さんは以下のような行動をとっていたり、マインドを語っていたりしました。

  • とにかく可能性があるだけ、技術の素振りをし、モックを作りまくり、その瞬間の最善を生み出すことに全力を注ぐ
  • どうせ時間をかけて作品を作るなら、限りある人生の中で意味のあるものを生み出したい

自分は、今でもこれらのマインドを大切にしています。

クリエイティブ制作のお仕事について

クリエイティブというと、キラキラしている、おしゃれ、最新技術を使っているみたいなポジティブなワードを思い浮かべそうで、確かに完成物に関しては実際にキラキラでおしゃれで最新技術を使っているものになりやすいです。
しかし、実際の仕事はキラキラとは程遠く、かなり泥臭いものとなっています。

  • とにかく短納期
  • クライアントのノリが体育会系で、良く分からない無茶振り的な要望が多い
  • プロデューサー、ディレクター、PMだけでは分からない技術的仕様を現場のエンジニアやデザイナーが早めに潰さないと死ぬ（徹夜でコードを書く日々）
  • 世の中の影響を受けてスケジュール変動することがよくあり、案件同士がバッティングする
  • 何かの案件をこなしながら、別の案件を隙間でこなし、その隙間で技術調査を行う日々
  • 妥協を許さないクリエイター（プロデューサー、ディレクター、エンジニア、デザイナー）が多い為、案件終盤でも気を抜けない

前前職のシステム開発の現場でも無理難題を突きつけられることはあったのですが、今思うと温々とした環境でした。
そんな環境からクリエイティブな現場に飛び込んだばかりの自分は、アウトプットすることが生きる証（案件で忙しいはずなのに、個々で案件とは別のアウトプットをしている超人が普通にいる環境）的な人と肩を並べて仕事をし始めて、「ああ、だめだ。。この人達と正面でやりあうにはまだまだ足らないことが多すぎる。。当分は修行しまくらねば。。。」というのを感じる日々でした。

サービス開発の働き方と決定的に違うのは、作って壊すを繰り返す為、運用フェーズがほとんど無いことです。（ほとんどが2, 3ヶ月。最短で1, 2日。長くても半年〜2年程。）
その為、毎回が新しいプロジェクトとなり、開発効率という言葉はたまに出てきたりするものの生産性を上げるとかPDCAを回すとかはほとんど無縁の世界で、成果物を生み出す為にメンタルと技術力で乗り越える日々でした。

明らかに言えるのは、クリエイティブ制作のお仕事のおかげで、バチバチにメンタルと技術力を磨き、自分の色々な好き、嫌い、どう立ち回れば死なない開発が出来るか等が研ぎ澄まされていったということです。

正直なところ、クリエイティブと向き合うことは大好きでしたが、働き方に関しては、システム開発上がりということもあり、根が効率的に働きたい人間なので、納期ギリギリまで仕様が決まらなかったり、スケジュール無視で平気で仕様をひっくり返したりすることが良しとされていたり、コードや設計がぐちゃぐちゃでも良いから成果物がすべてだったり的なことが横行していて、自分の美学と相反するところがあり、それらはどう頑張っても好きになれませんでした。

そんな生活を送る中で、相変わらず中村勇吾さん的な作品は好きで、当時の先輩や同僚に共感していただけることが多く、その延長の趣味嗜好になりそうな書籍や情報をいくつか共有いただくことがありました。
その時に共有されたものの中で、一冊の書籍が自分のエンジニアリングの趣味嗜好に大きな影響を与えます。

NATURE OF CODEとの出会い

当時の先輩や同僚に共有いただいた情報はどれも素晴らしく、自分が好きなジャンルは、「ジェネラティブコード」や「クリエイティブコーディング」というもので、そういったジャンルを具体的な内容に落とし込んだ「NATURE OF CODE」という書籍があるということでした。僕はこの「NATURE OF CODE」に対して感銘を受けました。

この書籍は、実世界に起こる自然現象をシミュレートするためには、どういったコードを書けばよいか考えるという内容になっています。

自然現象をシミュレートするというと抽象的なので、具体的にどういったものを扱うかというと、
例えば、円に対し、一定間隔でランダムな座標情報を与え、画面上を上下左右に不規則に進む生き物の様な動きを実装するというものがあります。

実際にコードを見てみましょう。

本書のコードを実行する為の言語、動作環境にはProcessingを利用します。
※オンラインのPlaygroundを利用することも可能です。

Processingのコードはシンプルです。
実行時にsetup関数が初回だけ動作し、その後draw関数が一定のフレームレートで動作します。
デフォルトは、60フレーム/秒です。1秒間に60回draw関数が実行されるということです。

// 初回のみ動作
void setup() {

}

// ずっとループで動作
void draw() {

}

例えば、以下の様なコードを記述し、実行すると

void setup() {
  size(640, 360);
  background(255); // 背景色白
  smooth(); // 線を綺麗に表示
}

void draw() {
}

setupが実行され、以下の様に640×360で背景色が白の領域が描画されます。

実装仕様を改めて確認してみると、
円に対し、一定間隔でランダムな座標情報を与え、画面上を上下左右に不規則に進む生き物の様な動きなので、コード化すると以下のようになります。

Walker w;

void setup() {
  size(640, 360);
  w = new Walker();
  background(255);
  smooth();
}

// 一定間隔で実行
void draw() {
  w.step(); // 座標情報を更新する
  w.display(); // 状態を画面表示する
}

class Walker {
  int x;
  int y;
  int size;

   Walker() {
     x = width / 2; // 中心のx座標
     y = height / 2; // 中心のy座標
     size = 40; // 円の直径
   }
 
   void display() {
     background(255); // 画面を白でリセット
     stroke(0); // 線の色を黒で指定
     ellipse(x, y, size, size); // sizeを直径に持つ円を描画
   }

   void step() {
     int choice = int(random(4)); // 0, 1, 2, 3のどれかランダムで取得

     // 取得した値により、更新する座標情報を決める
     if(choice == 0) {
       x++;
     } else if(choice == 1) {
       x--;
     } else if(choice == 2) {
       y++;
     } else {
       y--;
     }
   }
}

このコードを実行すると、毎フレームごとに座標情報がランダムに変更される為、円に命が宿った様な振る舞いをさせることができます。

まとめ

この様に数学、物理学、コードを利用し、様々なものをビジュアライズ化することでアートに昇華させるエンジニアリングの分野があり、自分はこの分野が非常に好きです。

以下は過去に自分が実験をしていたものです。
（最後の2つは、Processingではなく、ORCAやGLSLというものが混ざっています。）

他には、音と光、図形を連動させたものや線をさらに組み合わせて生物感を帯びたものなどが好きです。

https://twitter.com/msykem/status/1290150009288028161

以上、アートとエンジニアリングについての共有でした。
日々、業務的なコードしか書いていなくて、もっと刺激的なコードを書きたいそこのあなた。
今すぐジェネラティブアートに入門し、刺激的な世界に没入していきましょう。

最終日は、我らがkata_devさんの担当になります！お楽しみに！

 

関連記事

  1. アウトプットしつづけることの大切さ
  2. ランサーズSalesforceのこれまで
  3. 課題分析からリリース、結果分析までサイクルを回して学んだ3つのこと
  4. SendGridのユーザイベントをBigQueryに送り分析可能にする小ネタ