「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
コードは詩に例えられることがありますが、アートとの相性も抜群です。最新の技術とアートを組み合わせることによって、インタラクティブでレスポンシブな作品を作れます。
今回は、コードとアートを組み合わせた作品を7つご紹介します。
目次
はじめにご紹介するのは、徐々にリアルに変化していく自画像です。
さらに自画像が完成すると、カーソルを動かしたりデバイスを傾けることによって3Dエフェクトを楽しめます。
See the Pen
Parallax Self Portrait (Use Mouse on Desktop and Tilt on Mobile) by ryan_brwn (@ryankbrown)
on CodePen.
もうひとつ自画像をテーマにした作品をご紹介します。こちらは、ポリゴンスタイルの自画像をアニメーションと組み合わせた作品です。
絵を描画と消去を繰り返しています。1990年代後半から2000年代初頭の、初期の3Dゲームを思わせるデザインですね。
See the Pen
Low Poly Portrait by Daelen Berg (@daelen)
on CodePen.
芸術家のバンクシーがオークションで落札された絵をシュレッダーにかけたニュースは、世界中で話題になりました。この作品はそのオマージュで、自分の画像をシュレッダーにかけることができます。
バンクシーの件を快く思わない人もいるでしょうが、少なくともこの作品にはお金が絡みません。お気軽にシュレッダーしてください。
See the Pen
Banksy Shredder by Lee Martin (@leemartin)
on CodePen.
著名な絵をWeb上で再現するのがトレンドになっていますが、こちらはロイ・リキテンスタインの作品をCSSのみで再現しています。
CSSのパワフルさがよくわかる作品です。
See the Pen
Paint with CSS: Spray by Christina Gorton (@cgorton)
on CodePen.
こちらはパーティクルアニメーションを使って、ゴッホの名作『星月夜』をピクセル単位で描画した作品です。
完璧に再現できているわけではありませんが、それでもすばらしい出来栄えですね。
See the Pen
Particle Paint by Sean Free (@seanfree)
on CodePen.
感情を表現しているという点において、絵文字もまたアートだと言えるかもしれません。
この作品もまたバンクシーのシュレッダー事件と同じく、私たちが生きる今の時代を象徴的に表しています。
See the Pen
Emoji Painting by Maciej Caputa (@MaciejCaputa)
on CodePen.
芸術作品は私たちに新しい視座を与えてくれますが、この作品も例外ではありません。
画像にカーソルをあわせると、臨場感たっぷりにズームインします。コードのもつエキサイティングな一面を感じさせてくれる作品です。
See the Pen
Romantic Zoom Effect by Adrien Bachmann (@AdrienBachmann)
on CodePen.
コードが芸術として注目されることは少ないかもしれません。むしろ表舞台には出てこないことのほうが多いでしょう。
しかし今回ご紹介したように、縁の下の力持ちであるコードは主役にもなれるのです。ぜひコードが主人公になるような作品を作って、その可能性を探ってみてください。
(原文:Asuka Nakajima 翻訳:Eric Karkovack)
こちらもおすすめ!▼
Three.jsでパーティクルアニメーションを作ってみよう
Workship MAGAZINE