作品概要

p5.jsというオープンソースのJavaScriptライブラリを使用し制作したアニメーション作品です。この各６色のアニメーションのデザイン・サウンドはプログラムを書くことによって制作しています。

赤色、橙色、黄色、緑色、青色、紫色と、近い色相の色に順に変化し、その色から連想されるイメージを演出させています。

制作背景

私は卒業制作をどのようなものにするかを考えたときに、これまで学んで得た知識と、これから学んで得る知識を合わせて、大学生活の集大成となる作品を制作したいと考えました。

私は大学生活を通して、主にグラフィックデザインやアニメーション、サウンドについて学びました。そして、IT企業に就職が決まったので、就職後に必要となるプログラミングの知識を深めたいと考えました。

そこで、プログラミングでイラストやアニメーション、サウンドなどのクリエイティブなものを制作する「クリエイティブコーディング」というものに興味を持ちました。デザインやサウンドの知識を活かすことができる上に、プログラミングの知識を学ぶことができるので、自分自身にとって一番良い形の挑戦になると思い、クリエイティブコーディングによる作品を制作しようと決めました。

制作過程

1. テーマの設定

プログラミングでアニメーションの制作をする上で、デザイン、サウンドの両方を活かせるモチーフは何かということを考えました。結果、色彩をテーマに制作することにしました。

2. 色彩から感じられるイメージの連想

心理的三原色の「赤色」「黄色」「青色」と、それぞれを混ぜてできる「橙色」「緑色」「紫色」のシーンを制作することにし、その6色それぞれから連想できるイメージを書き出しました。

• 赤色 → 炎、火花、溶岩…
• 橙色 → 夕焼け、紅葉、太陽…
• 黄色 → 電気、雷、閃光…
• 緑色 → 植物、葉、風…
• 青色 → 水、氷、波、波紋…
• 紫色 → 夜空、魔法、妖精…

3. 連想したイメージをプログラムで表現

それぞれの色から連想したイメージをプログラムで制作しました。

4. 動画化しYouTubeにアップロード

制作したプログラムを録画し、動画化しました。６つのシーン全てを繋げた動画１本と、６シーンそれぞれの縦長動画６本を制作し、それぞれYouToubeにアップロードしました。また、縦長動画はYouTubeショートとしてアップロードしました。