2021年に作成したものを振り返る
2021年にクリエイティブコーディングの活動での作成物を振り返ります。
目次
- はじめに
- 2021年1月
- 2021年2月
- 2021年3月
- 2021年4月
- 2021年5月
- 2021年6月
- 2021年7月
- 2021年8月
- 2021年9月
- 2021年10月
- 2021年11月
- 2021年12月
- まとめ
はじめに
2021年に作ったものの振り返りです。
一ヶ月ごとに振り返っていて、ひと月に3個前後の作品をピックアップして感想を書いています。
Twitterに投稿したもので気になったものや、印象深いものを埋め込みで貼り付けています。
埋め込みによって、画面的に長くなってます。
自分のための記事で、他の人が見てどう思うのかはよくわかりません。
振り返った本人は十分楽しめました。
2021年1月
arcとシェーダーを使うとおもしろいかも。
— ギン / Gin (@gin_graphic) 2021年1月8日
arcで作った図形はuv座標も変化しているっぽい。#p5js #creativecoding #generativeart #glsl #プログラミング pic.twitter.com/6pFEfI4zzJ
これは32枚の絵をシェーダーで描いておいて、それをarc()を使って分割表示しています。
星空をイメージしてみた。
— ギン / Gin (@gin_graphic) 2021年1月17日
自分でも良い出来栄えな気がする!#p5js #processing #creativecoding #generativeart #glsl #プログラミング pic.twitter.com/cEfcdhOdPj
シェーダーで輝く点を作って描く表現は、この頃に出会いました。
この表現が2021年通して気に入って、よく使っていました。
多角形をそれぞれたくさんならべました。#p5js #processing #creativecoding #generativeart #glsl #プログラミング pic.twitter.com/a4rCpHsP5Q
— ギン / Gin (@gin_graphic) 2021年1月21日
シェーダーで派手な色を扱ってみた作品も作ってみました。
反響は大きかったのは派手な見た目だからですかね。
2021年2月
昨日のやつを少しだけアレンジ。
— ギン / Gin (@gin_graphic) 2021年2月1日
形変えて透明度下げて、stroke有りにしたら、手で塗ったような雰囲気になったかも。不思議。#p5js #processing #creativecoding #generativeart #glsl #プログラミング pic.twitter.com/aMGpc3ZG7o
シェーダーを使って表現の中で、割とオリジナリティが出せたのがこの作品です。
淡い水彩のような色味を作れました。
#PCD2021 砂漠#p5js #processing #creativecoding #generativeart #glsl #プログラミング pic.twitter.com/3ivZp2Jb8Y
— ギン / Gin (@gin_graphic) 2021年2月17日
PCD Japan2021のデイリーコーディングチャレンジで「砂漠」をテーマに作成したものです。
サボテンをモチーフにしたキャラを描いたのですが、イラスト系のものをここで初めて扱って苦労した記憶があります。
2021年3月
まずは難しいことせず、2020年東京の気温データを並べてみた。
— ギン / Gin (@gin_graphic) 2021年3月14日
上からに1〜12月。左からに1〜31日。
色が気温で、紫が一番低く、赤が一番高い。#p5js #processing #creativecoding #プログラミング pic.twitter.com/WLl7f9cZ17
PCD Japan2021で山辺さんのKeynoteを聞いたので、データビジュアライゼーションに挑戦してみました。
2020年東京の気温データ使って可視化をした作品です。
begin〜endShape()を使って三次元のウネウネしたshapeを生成。
— ギン / Gin (@gin_graphic) 2021年3月19日
色を変えて、並べて動かす。
ずっと見てられるな。#p5js #processing #creativecoding #generativeart #プログラミング pic.twitter.com/PBeiq8i9OW
波の動きを応用した作品を作ったのですが、twitterでいいねをこれ程多くもらえて驚きました。
動画の中で、グリッチエフェクトをランダムに適用。
— ギン / Gin (@gin_graphic) 2021年3月22日
画面が乱れます。#p5js #processing #creativecoding #プログラミング pic.twitter.com/883hcX8OuT
グリッチを初めて扱ったのもこの頃です。
ちょっとアート感出てる。#p5js #processing #creativecoding #generativeart #glsl #プログラミング pic.twitter.com/V3TEfdCAfE
— ギン / Gin (@gin_graphic) 2021年3月24日
手書きの様な表現も試してみました。
2021年4月
写真から色を抜き出して、ランダムウォーク。
— ギン / Gin (@gin_graphic) 2021年3月31日
桜には見えなくなってるけど、おもしろいな。
色々な写真で遊べる!#p5js #processing #creativecoding #generativeart #プログラミング pic.twitter.com/xaRuTSQnAN
この頃から写真を扱った作品にも挑戦してみました。
ランダムウォークさせつつ、シェーダーで歪ませる。#p5js #processing #creativecoding #generativeart #プログラミング #glsl pic.twitter.com/7ouTbfKmBg
— ギン / Gin (@gin_graphic) 2021年4月10日
手書き風の表現は3月に引き続いて、この頃も追求していました。
最近はp5.jsで和柄を描いてます。
— ギン / Gin (@gin_graphic) 2021年4月29日
和柄をプログラムで表現するの楽しい。https://t.co/nR45kxJ7ve#p5js #creativecoding #プログラミング pic.twitter.com/2oDBmRJVwB
和柄を再現するのを始めたのが4月で、制作の試行が見ます。
2021年5月
boxを球面上で動かしてみた。
— ギン / Gin (@gin_graphic) 2021年5月7日
動きは半分ランダム。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/fuKagyYXOV
こういった数学よりの作品もたまに作ったりしていました。
これは反響も良かった記憶があります。
なんかステンドグラスみたいになった。楽しい。#p5js #creativecoding #generativeart #プログラミング #glsl pic.twitter.com/uv4bqPb0qv
— ギン / Gin (@gin_graphic) 2021年5月25日
エッジ抽出を応用して作成していた時期もあります。
これ以外にもエッジ抽出は何度も使っていました。
2021年6月
ベクトル場を用意して、各座標で受ける力を計算。
— ギン / Gin (@gin_graphic) 2021年6月20日
計算結果を三角形をで可視化してみました。
久しぶりに数式で遊べて満足。#p5js #creativecoding #プログラミング pic.twitter.com/59dj5sdoaW
ここで急に思い立って、数学を利用した作品作りを始めました。
引き続き、引力で遊んでます。
— ギン / Gin (@gin_graphic) 2021年6月28日
円運動しながら、赤で引力、黄で斥力を時間で切り替えた時の動き。#p5js #creativecoding #プログラミング pic.twitter.com/cVhoMw31B3
引力・斥力のシミュレーションみたいなこともやってみました。
2021年7月
少し変えて遊んでみました。
— ギン / Gin (@gin_graphic) 2021年7月1日
引力使った作品は今日で終えて、次また何か考えよう。#p5js #creativecoding #プログラミング pic.twitter.com/ftH8uk6b04
数学的な部分を作品に落とし込んでみるところまで頑張ってみました。
noiseやblurを使って水彩っぽくできた気がする。
— ギン / Gin (@gin_graphic) 2021年7月24日
ただ、まだ円しか描けないので、試行錯誤してこう。#p5js #creativecoding #プログラミング pic.twitter.com/K8R0xW8cCl
手書きっぽさ、水彩っぽさは、時々追求したくなり試行錯誤していました。
2021年8月
花火打ち上げました#CreativeCoding花火大会#p5js #creativecoding #generativeart pic.twitter.com/Lmub0L5pe5
— ギン / Gin (@gin_graphic) 2021年8月2日
おかずさん主催のCreativeCoding花火大会に参加もしました。
最近、数式と触れ合っていると、
— ギン / Gin (@gin_graphic) 2021年8月13日
数学の知識をもっと学びたいなぁと感じる。#p5js #creativecoding #プログラミング pic.twitter.com/6Lkg9ACraA
この頃にアトラクターに挑戦し始めます。2021年制作においては一つ重要なきっかけだったと思います。
山辺さんに「マジナリー・ナンバーズ―コンピュータによるヴィジュアル・プログラミング・ラボラトリー」をおすすめされたこともあり、ターニングポイントとなった時期でした。
発光するアトラクター。
— ギン / Gin (@gin_graphic) 2021年8月18日
発光描画はshaderで表現して、色味はパーリンノイズです。#p5js #creativecoding #generativeart #glsl pic.twitter.com/fYMP217eZv
シェーダーの発光表現+アトラクターという、自分の表現を複数組み合わせることもできる様になりました。
数式と戯れてます。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/DKEyDpBLcU
— ギン / Gin (@gin_graphic) 2021年8月28日
「マジナリー・ナンバーズ―コンピュータによるヴィジュアル・プログラミング・ラボラトリー」を参考に制作しました。
この表現は作っていても面白いし絵も好みなので、教えてもらえたことに感謝です。
2021年9月
setup=_=>{createCanvas(w=720,w,WEBGL),shader(createShader("attribute vec3 a"+c+m+"gl_"+c+"=vec4(a"+c+",1.)*2.-1.;}","precision highp float"+m+"vec2 p=gl_FragCoord.xy/7.;gl_FragColor=vec4(vec3(cos(p.x*p.y)),1.);}")),rect(0,0,w)};m=";void main(){",c="Position";//#つぶやきProcessing pic.twitter.com/joS1Wb5D0h
— ギン / Gin (@gin_graphic) 2021年9月7日
つぶやきProcessingでシェーダー描画をする挑戦もしました。(つぶやきProcessing + つぶやきGLSL)
きっかけはryotakoさんのツイートを見たことでした。
その後watさんも同じことに挑戦していて、交流もできて楽しかったです。
モノクロにもどしてみたり。
— ギン / Gin (@gin_graphic) 2021年9月18日
万華鏡なので円の中に描くのが合いますね。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/oA4IFmvyz1
万華鏡っぽいものも作りました。気に入った表現でもあり、反響も大きくて嬉しかったです。
x=y=t=0
— ギン / Gin (@gin_graphic) 2021年9月20日
draw=_=>{
createCanvas(w=600,w);fill(255);noStroke()
t+=0.0004
background(0)
for(n=0;n<10;n++){for(i=0;i<800;i++){
s=TAU*t;p=s+n/2;q=s+TAU*n/2
a=sin(p-y)+cos(q+x)
b=sin(p+x)+cos(q+y)
x=a;y=b;circle(300+120*x,300+120*y,1)}}
}//#つぶやきProcessing https://t.co/oXtA8E9kg2 pic.twitter.com/sbmdxocvXQ
incre.mentさんとの交流があった作品です。私のリクエストでコードを教えてもらいました。
De Jong アトラクターを応用作品だったみたいで、自分の中で色々と繋がる感覚がありました。
2021年10月
和ジェネラティブアート。
— ギン / Gin (@gin_graphic) 2021年10月14日
一つ形になった気がします。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/FU4XWzr6Ht
4月、5月で作っていた和柄を作品に落とし込めました。
これはおかずさんのnoteの記事を参考にして作りました。
Glowing-Gargを作りました。https://t.co/J0jyAnbc8q
— ギン / Gin (@gin_graphic) 2021年10月24日
GMsArt2021のコンテストに応募した作品で、Gargを利用することでコードのみで作ることができました。
Gargで生成したimageに対して後処理をしています。#p5js #Generativemasks #Garg pic.twitter.com/DsqaROWyDf
高尾さんのGenerativemasksのコードからdeconbatchさんがGargを作ってくれたおかげで、Generativemasksを気軽に使って遊べる様になりました。
Gargを初めて扱ってみた時の作品です。
2021年11月
写真がグニャグニャに崩れていく様子を動画にしてみました。#p5js #creativecoding #generativeart #webgl pic.twitter.com/s28I96PJMZ
— ギン / Gin (@gin_graphic) 2021年11月9日
写真をぐにゃぐにゃにする作品。
これはp5.Geometryを応用したのですが、黒狐さんとsayoさんのコードがものすごく参考になりました。
p5.patternを初めて使ってみました。
— ギン / Gin (@gin_graphic) 2021年11月22日
まだ使いこなせてないけど、使い所は色々ありそうです。https://t.co/UgglC0HW8M#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/6I9GS2VKoJ
さやまさん作成のp5.patternがopenprocessingに組み込まれたので、それを用いた作品も作りました。
グリッチエフェクトで遊んでます。#p5js #creativecoding #generativeart #プログラミング #glichart pic.twitter.com/BnezofWbuM
— ギン / Gin (@gin_graphic) 2021年11月23日
3月に試したっきりだったグリッチがここで再登場です。
これがProcessing Advent Calender 2021のネタになりました。
2021年12月
氷の結晶が描けました。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/Tze3bSfxR2
— ギン / Gin (@gin_graphic) 2021年12月18日
手書きで色を塗ったような表現がすごく素敵で、NUMさんにコードを教えてもらいました。
それを自分なりに作品に利用しました。
昨日やつを3次元に拡張。
— ギン / Gin (@gin_graphic) 2021年12月21日
空間を生み出してる感じで楽しい。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/7GmSHRXw8i
今までと少し指向を変えてみて、lineを使った作品を何個か作ったりもしました。
クリスマスっぽいものを1つくらいは作っておきます。#p5js #creativecoding #generativeart #プログラミング pic.twitter.com/Pfln50luOv
— ギン / Gin (@gin_graphic) 2021年12月24日
かわいらしいもの作るのも楽しいです。
まとめ
改めて振り返ると、周囲の方々に影響を受けたり、助けられたからこそ、一年続けて作れたと思います。
ここで名前を挙げた方以外にも、いいねやコメントをしてくれた方にも感謝してます。いつも励みになってます。
作ったものもバリエーション豊かといえば聞こえは良いですが、方向性はバラバラですね。
やり方は特に変えないと思うので、これからも思いついたものを作ってきたいと思います。
ちなみに、作った作品のコードを公開しなかったりするのは、
変数名・関数名が機能と一致してなかったりして、コードが人に見せらる状態でなかったりするからです。
気になった物は言ってくれれば、コードを整えて公開しますので、お気軽に。