ゼロから始めるクリエイティブコーディング
こんにちは。
スタジオディテイルズのチーム4989です！
第4回はゼロから始めるクリエイティブコーディングと題して、弊社のTwitterでも公開している、エンジニアの社内勉強会「SDCC」について紹介したいと思います！
「SDCC」って？
SDCCとは、社内（ SD ）のエンジニアが各々クリエイティブコーディング（ CC ）を用いた作品を自主制作として作り、発表する会のことです。毎回テーマを決めて作品を作ることでアウトプット量を増やし、制作のクオリティを上げたり、表現の引き出しを増やしたりすることを目的としています。
スタジオディテイルズでは定期的に @ikeryou 主導のもと、エンジニアでクリエイティブコーディングを用いた作品を作る会、題して"SDCC"を行っております。
— STUDIO DETAILS Inc. (@studiodetails) June 25, 2020
テーマを決めて作品を作ることでアウトプットの量が増え、表現の引き出しやクオリティなどを上げることが目的です。 pic.twitter.com/IOWIsJnKhw
◯クリエイティブコーディング（ 以下 : CC ）とは？
CCとは、表現力や実装の能力を向上させるために自由な表現を実装するプログラミングのことです。実現したい表現を狙った通りに実装できると喜びや達成感が生まれ、ソースコードを触るうちに意図せず面白い表現に出会うのも楽しみの1つで、各SNSでCCを発信されている方も多いです！
SDCCは、弊社チーフクリエイティブデベロッパーの池田を主導に行われ、制作した作品に対してフィードバックをいただいたり、実装方法を教えていただいたりして制作を進めています。
この勉強会の発信を通じて、私たちと同じ駆け出しエンジニアや、コーディングに興味を持っている方とともに成長していけたらと思っています！また、弊社のエンジニア職に興味を持ってもらうことで、ともに働ける仲間と出会えるきっかけになればと思います！
テーマ「追従」
第1回のテーマは「追従（だんだんと値が近づいていく）」です。
端的にいうと
ターゲットが、ある位置からある位置へといい感じに移動する技術です。
Webサイトでよく使わる応用の効く技術の一つで、弊社で制作した下記サイトの動きも追従を応用しています。
---
KITAMURA MAKURA 海外サイト
TOPキービジュアルの太陽が登る動き
---
BLUES DESIGN コーポレートサイト
マウスストーカーの動き
作例からまず、追従の動きのポイントや印象をまとめてみました。
◯追従の動きのポイント
・ターゲットがある位置からある位置へと、いい感じに移動する
・開始値と目標値からいい感じに使えそうな値を使う
こちらを踏まえ、開始位置と目標位置があればそこに向かって線形補間のような動きをしてくれることがわかりました。目標位置へ収束していくような動きにはイージングのかかったような心地よさが感じられました。
※参考のコード
// 今の位置
nowX = 0;
nowY = 0;
// 目標とする位置
targetX = 100;
targetY = 100;
// 速さ
ease = 0.3;
// 毎フレーム実行する関数
function update() {
nowX += (targetX - nowX) * ease;
nowY += (targetY - nowY) * ease;
}
これらのポイントを踏まえて実際に制作していきました。
制作：渡辺
初めまして、入社1年目の渡辺です。
実務経験はあるものの、CCに関しては初心者です。
今回のテーマは追従ということで初めにマウスストーカーを制作しました。
http://sample.details.co.jp/sdcc/1/watanabe/
シンプルですね。
実は dat.gui 初めて使いました。超便利。
ここから更にブラッシュアップが必要なため、FBを頂き、以下の改善点を踏まえてブラッシュアップすることにしました。
◯目標
サイトKVになるような派手なビジュアル
◯FB/改善点
・GL要素を取り入れる
→ 3Dオブジェクトを配置
・追従値を活用
→ マウスの追従に合わせてオブジェクト全体の角度/色/線の太さを変える
できたものがこちら
http://sample.details.co.jp/sdcc/3/watanabe/
今まで追従と聞くとマウスストーカーのような物体がついてくるイメージが強かったのですが、今回の制作を通して追従値を色や大きさなど様々な変化に用いることができることを知りました。初めての試みではありましたが、ネットには豊富なドキュメントが転がっているため初心者でもクリエイティブコーディングは始めやすいと感じました。
制作：漆島
今年の4月に新卒で入社した漆島です。
大学では建築学を専攻していましたが、建築ではなくエンジニアの道に進もうと思いスタジオディテイルズに入りました。
そのため自分はJavaScriptにあまり触れたことがなく、もちろんマウスストーカーを実装するのも初めてでした。
今回は自分で検索しながら実装してみたのですが、以下の記事を参考にすると意外と簡単にマウスストーカーができることが分かりました。
最初に実装したのがこちら
http://sample.details.co.jp/sdcc/2/urushi2/
単純にマウスの現在の位置座標を取得し、マウスストーカーに適用したものです。ただし、マウスストーカーが1つでは面白くないので、時間をずらして4つ付いてくるようにしてみました。
上の作品を提出したところ、
もっとマウスストーカーの色や形が
派手に変化するようになると良くなると思うよ！
と池田さんからFBを頂いたので、一定時間でこれらを変化させてみることにチャレンジしました。
最終的な作品がこちら
http://sample.details.co.jp/sdcc/3/urushi/
マウスストーカーの色や大きさが時間変化するように実装しています。池田さんに実装方法を教えていただき、目指していたものに限りなく近い実装ができました。ちなみに背景色も一定時間で変化するようにしてあります。
今回のSDCCで初めてマウスストーカーを実装したのですが、意外と簡単に実装することができ、jsにおける定数の定義方法、関数の分け方やランダムな値の取得などを学ぶことができました。
CCを学べる現場
数多くのWeb制作会社の中でも弊社のようにCCを勉強・実践してアドバイスを頂いてる現場は多くはないと思っています。なぜならCCは作家性が問われたり、独特な技術が使われたりしている側面があるので、そこにアドバイスができる経験豊富な先輩がなくてはなりません。
また、「このような表現をしたい！…でも上手くいかない。」という疑問に対しても解説のついたコードでフィードバック頂けるので、自分のやりたい表現の実現方法を勉強することもできます。
このように、CCのアドバイスを頂けるというのは大変貴重な機会であるので、ブラッシュアップを重ねて良い作品ができるとても良い環境だと身に染みています。
クオリティの高い演出もCCの集合である
Awwwards・FWA・CSSDAなどに掲載されているクオリティの高いサイトで、この演出はどのような実装で実現しているのだろうかと思ったことはありませんか？
一見すると魔法のような演出も、実は分解していくとCCの基礎を積み重ねて応用しているだけなのです。つまり、CCの基礎を勉強することが将来ハイレベルなサイトを制作するために必要です。
CCを始めてみたいと思ったら、まずはいきなりハイレベルなものを完成させようとせず、小さな基礎技術から真似てみてはいかがでしょうか？最初は参考にしているものとのギャップに苦しむかもしれませんが、地道に続けるときっと技術を身に付けることができます。
CCで身に付ける基礎コーディング力
CCの特徴として、主にビジュアルが変化するというものがあります。自分の実装したものが目に見えて反映されるというのはプログラミングの勉強というハードルを大きく下げると考えています。この特徴を活かし、CCをしながら基礎コーディング力を上げてみるのも良いかもしれません。CCで実現したいもののためにCSSやJavaScriptなどの基礎的なコーディング方法を勉強すれば、モチベーションを維持しつつ作品制作ができて、さらに基礎の勉強もできるという一石二鳥な可能性を秘めています。これからプログラミングを勉強してみようと思った方は、一度CCから始めてみるのも良いかもしれません。
講師の池田からのメッセージ
SDCC主導の池田からSDCCへの想いをお聞きして、
とにかく見た目に拘ってたくさん作ること！見た目について、プログラミングでどうアプローチするかを何度も試行錯誤することが大事！
というメッセージを頂きました！
これを受け取って、まず一つの演出の見た目に拘って、その見た目ができるアプローチをいくつも試して演出を極めることが大事だと感じました。そして、それをいくつもの違った演出で試すことによって様々な演出×様々な手法を引き出しに持っておけるのではないかと考えました。
さいごに
スタジオディテイルズではフロントエンドエンジニアも採用中です！
この記事をみてCCに興味が沸いた方、ハイレベルな演出を実装したいと思った方、一度弊社にご応募いただけますと幸いです！
◯採用情報はこちらから
https://www.wantedly.com/companies/details
そして、SDCC第２回のテーマは「ナビゲーションUI」を予定しています。
ナビゲーションのボタンのロールオーバーや文字の出方にもCCは活かすことができます。心地よいと感じるインタラクションを追求し、さらなる実装のレベルアップを図っていきます！
お楽しみに！
---
編集：渡辺・漆島
---
Twitter：https://twitter.com/studiodetails
Instagram：https://www.instagram.com/studiodetails/
facebook：https://www.facebook.com/studiodetails/
この記事が気に入ったらサポートをしてみませんか？