Generative Designs

creative coding

Brief

Create several computationally generated visuals using a JavaScript library called P5.js.

JavaScriptライブラリーのP5を使用して、コーディングベースのビジュアルを作りました。

Tools

Brackets/ブラケット
HTML
CSS
P5.js
Processing

Concept

Creative coding has been a particularly inspiring and interesting area of programming that expands visual designers’ abilities. Through short lines of code, numerous numbers of objects can be drawn on a digital canvas at an instance. Creating visual elements via programming requires both sides of a brain, meaning its design process becomes much more complex and thoughtful. One of the primary goals of this projects was to challenge myself to generate computational visuals that can inspire my design peers. These visuals were used to ask them to join me to explore further the world of creative coding and learn about how designers will be able to better perform in a multidisciplinary team environment in a technology-driven business firm. Greatly inspired by John Maeda, the head of Computational Design and Inclusion at Automatic, and Daniel Shiffman, one of the three co-founders of Processing and P5.js communities.

クリエイティブコーディんは自分の中でもとても興味のある分野でした。少しのコードで何千もの点や線を一定のルールに沿ってデジタルキャンバス上で動かすことができることに関して常々面白いものだと感じていました。中でも自分の思い描くビジュアルのロジックを元に作り出すとコンセプトがデザインのプロセスをより一層深みのあるものにしてくれるものであると気づき、現在でも自分の空き時間に勉強を重ねています。このプロジェクトの目的は、そういった自分の気づきを周りのデザイナーをしている友人に共有し、テクノロジー中心の環境でデザインをすることにより一層の興味を深めることにありました。このプロジェクトに取り組むに当たって、コンピュテーショナルデザインの第一人者であるジョン・マエダ氏やプロセシングファンデーションのダニエル・シフマン氏から多くの影響を受けました。

Works in P5

Different variations of generative images based off of Daniel Shiffman’s tutorials on P5.js.

様々なコードベースのビジュアルをダニエル・シフマン氏のチュートリアルを元に作りました。