HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内容を記事として紹介します。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次のモーショングラフィックの作成方法をステップ形式で解説します。サンプルのソースコードはすべてGitHubにて公開していますので、あわせて参照ください。 ▲ 完成版サンプル。実装する上で重要な表現のエッセンスだけを絞って解説します サンプルを別ウインドウで開く コードを確認する ステップ① 描画のためのcanvasを用意 サンプ
![JavaScriptで取り組むクリエイティブコーディング - パーリンノイズを使いこなせ - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/b401c093f10ce45f215dbfbf410b29329a15ff2b/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F18812%2Fimages%2Feyecatch.png)