準備｜クリエイティブコーディングの教科書

2021/11/21 5 users 教科書 準備

HTMLにはCanvasという描画機能が標準で用意されている。そのままCanvasを利用してもいいのだが、汎用性のためか、あまり単純とはいえない機能なので、代わりにp5.jsという描画ライブラリを利用したい。p5.jsはProcessingという描画ライブラリをJavaScriptで扱えるように移植したものだ。 この章ではHTML・CSS・JavaScrip... 続きを読む

クリエイティブコーディングの教科書

2021/11/21 1568 users プリミティブ 教科書 描画 アルゴリズム 本書

ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。 続きを読む

Canvasだけじゃない！requestAnimationFrameを使ったアニメーション表現 - ICS MEDIA

2021/04/16 16 users requestAnimationFrame canvas

requestAnimationFrame()というとCanvas APIなどを使ったクリエイティブコーディングでよく使われる手法ですが、クリエイティブコーディングに限ったものではなく、一般的なウェブサイトのアニメーション表現にも役立ちます。 この記事では「トップに戻るアニメーション」を例に、requesetAnimationFrame()の基本的な使... 続きを読む

JavaScriptで取り組むクリエイティブコーディング - パーリンノイズを使いこなせ - ICS MEDIA

2019/06/03 16 users ICS MEDIA パーリンノイズ WebGL イベント

HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 先月7月25日に開催されたイベント「Frontend de KANPAI! #4」では、プログラミングアートの楽しさを紹介すべく「JavaScriptとWebGLで取り組むクリエイティブコーディング」と題して発表しました。本記事ではそのときの登壇内... 続きを読む

JavaScriptで取り組むクリエイティブコーディング – パーティクル表現入門 - ICS MEDIA

2018/08/24 45 users ICS MEDIA パーリンノイズ 登壇内容 前回 目標

HTML Canvas要素とJavaScriptを使うと、手軽にクリエイティブコーディングをはじめられます。 前回の記事「パーリンノイズを使いこなせ」に引き続き、先月7月25日に開催されたイベント「Frontend de KANPAI! #4」の登壇内容を記事として紹介します。 本記事ではHTML CanvasとJavaScriptの理解につながることを目標に、次... 続きを読む

クリエイティブコーディングを補助するフレームワーク「sketch.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/08/02 19 users MOONGIFT Processing WebGL マウス

sketch.jsはProcessingやOpen Frameworksを使った事がある方であればすぐに使い方が習得できるそうです。基本的にはマウスの動きによって何らかのオブジェクトを描いたりアクションを起こすという使い方になるそうです。グラフィックスはCanvasまたはWebGLを使って描きます。 0 続きを読む