#p5js とリングフィット アドベンチャーのリングコン・Joy-Con(WebHID API を利用)の組み合わせ!
28日目の「2色だけで描く」も似た構成でしたが、カラフルな描画を色々足したのと、リングコンの回転を Joy-Con のセンサーの値で取れるようにしました
#p5js とリングフィット アドベンチャーのリングコン・Joy-Con(WebHID API を利用)の組み合わせ!
28日目の「2色だけで描く」も似た構成でしたが、カラフルな描画を色々足したのと、リングコンの回転を Joy-Con のセンサーの値で取れるようにしました
2色の描画は #p5js での青系と赤系の大きさ・高さが変わる円とバーの描画
その変動の元になるのが、リングフィット アドベンチャーのリングコンに対する内向き・外向きの押し込み・引っ張りというもの → WebHID での処理
2色の描画は #p5js での青系と赤系の大きさ・高さが変わる円とバーの描画
その変動の元になるのが、リングフィット アドベンチャーのリングコンに対する内向き・外向きの押し込み・引っ張りというもの → WebHID での処理
X で見かけた dmvrg さんのダイヤル表示の描画が素敵だと思い、 #p5js で似た見た目を作ってみた
追加要素で、一方の手の指先の位置・向きに連動して表示位置・向きが変わり、
あともう一方の手の回転にダイヤル・数値が連動するようにしてみた!
X で見かけた dmvrg さんのダイヤル表示の描画が素敵だと思い、 #p5js で似た見た目を作ってみた
追加要素で、一方の手の指先の位置・向きに連動して表示位置・向きが変わり、
あともう一方の手の回転にダイヤル・数値が連動するようにしてみた!
描画側は #p5js で描いた、様々な色の枠線の数字が出ます
その数字が何で決まるかというと...
「人生ゲーム for Nintendo Switch専用ルーレットコントローラー」で出た数字で、数字は
Joy-Con経由で取得してます(Joy-Con を HIDデバイスとして扱う)
描画側は #p5js で描いた、様々な色の枠線の数字が出ます
その数字が何で決まるかというと...
「人生ゲーム for Nintendo Switch専用ルーレットコントローラー」で出た数字で、数字は
Joy-Con経由で取得してます(Joy-Con を HIDデバイスとして扱う)
昨年秋に試作した「カメラ映像+ブラー+カスタムシェーダーによる水滴エフェクト」に、今回「水たまり」を足してみた!
水たまり、というレベル感ではないものになった気がするけどw
昨年秋に試作した「カメラ映像+ブラー+カスタムシェーダーによる水滴エフェクト」に、今回「水たまり」を足してみた!
水たまり、というレベル感ではないものになった気がするけどw
#p5js の「createFilterShader()」でのカスタムシェーダーで作った、ずれや揺らぎのあるふわっとしたアニメーション
やはり minacoding用の投稿でのシェーダー利用率が高くなるw
#p5js の「createFilterShader()」でのカスタムシェーダーで作った、ずれや揺らぎのあるふわっとしたアニメーション
やはり minacoding用の投稿でのシェーダー利用率が高くなるw
#p5js の「createFilterShader()」でのカスタムシェーダーで作った、溶け合う感じで水面みたいなアニメーション
minacoding用の投稿でのシェーダー利用率が高くなってるw
#p5js の「createFilterShader()」でのカスタムシェーダーで作った、溶け合う感じで水面みたいなアニメーション
minacoding用の投稿でのシェーダー利用率が高くなってるw
Day1 「円だけを使った描画」の時に作って作品に手を加えて、パーティクルを尻尾がついた生き物っぽい見た目になるようにしてみた!
(元のパーティクルの時も、残像をつけてたのが尻尾のように見える気もして、元々少し生き物要素はあったかも?)
Day1 「円だけを使った描画」の時に作って作品に手を加えて、パーティクルを尻尾がついた生き物っぽい見た目になるようにしてみた!
(元のパーティクルの時も、残像をつけてたのが尻尾のように見える気もして、元々少し生き物要素はあったかも?)
#p5js の「createFilterShader()」でのカスタムシェーダーで作った、波打つような見た目を、ランダムな要素で動かしたり光らせたり
それと球面上に表示させたり、キーで色やパラメーターを変えられるようにもしました!
#p5js の「createFilterShader()」でのカスタムシェーダーで作った、波打つような見た目を、ランダムな要素で動かしたり光らせたり
それと球面上に表示させたり、キーで色やパラメーターを変えられるようにもしました!
自分っぽい方向は「アニメーションとインタラクション要素」かな、と思って
「パーティクルでできた、マウスカーソルに反応するケーキ」を作ってみた!
できたものは、静止しているときはぎりぎりケーキっぽい物体?
自分っぽい方向は「アニメーションとインタラクション要素」かな、と思って
「パーティクルでできた、マウスカーソルに反応するケーキ」を作ってみた!
できたものは、静止しているときはぎりぎりケーキっぽい物体?
#p5js #processing #creativecoding
The process of making an Echo
www.youtube.com/watch?v=IH2d...
#p5js #processing #creativecoding
The process of making an Echo
www.youtube.com/watch?v=IH2d...
A sketch made with #p5js that emulates an Amstrad GT65 monitor
code: openprocessing.org/@megamitts/2...
A sketch made with #p5js that emulates an Amstrad GT65 monitor
code: openprocessing.org/@megamitts/2...
Johnny Bravo! I haven't sketched for a long time. This is from 2012!
#p5js #processing #sketch #art #cartoonnetwork
Johnny Bravo! I haven't sketched for a long time. This is from 2012!
#p5js #processing #sketch #art #cartoonnetwork
#p5js #processing #creativecoding
code: openprocessing.org/@megamitts/2...
A few seconds of footage:
#p5js #processing #creativecoding
code: openprocessing.org/@megamitts/2...
A few seconds of footage:
#p5js #processing #creativecoding
code: openprocessing.org/@megamitts/2...
#p5js #processing #creativecoding
code: openprocessing.org/@megamitts/2...
One for #minacoding day 2 - #music
coded in #p5js with music by Theo Gerard
#jazzmusic #animation #dancer
youtube.com/shorts/hRPhP... via
@YouTube
One for #minacoding day 2 - #music
coded in #p5js with music by Theo Gerard
#jazzmusic #animation #dancer
youtube.com/shorts/hRPhP... via
@YouTube
draw=_=>{background(0,t++?.1:!createCanvas(W=720,W)+W)
colorMode(HSB)
noStroke()
filter(BLUR)
P=PI/2
F=(x,y,a,z)=>z--&&fill(Z=z*9,80,W,.5)+circle(x+=cos(a)*Z,y+=sin(a)*Z,z*5)+[P,-P].map(p=>F(x,y,a+p*t/99,z))
for(i=4;i--;)F(360,360,t/99+i*P,9)}
#minacoding
#つぶやきProcessing
youtu.be/JLyD32H0yow
draw=_=>{background(0,t++?.1:!createCanvas(W=720,W)+W)
colorMode(HSB)
noStroke()
filter(BLUR)
P=PI/2
F=(x,y,a,z)=>z--&&fill(Z=z*9,80,W,.5)+circle(x+=cos(a)*Z,y+=sin(a)*Z,z*5)+[P,-P].map(p=>F(x,y,a+p*t/99,z))
for(i=4;i--;)F(360,360,t/99+i*P,9)}
#minacoding
#つぶやきProcessing
youtu.be/JLyD32H0yow
draw=_=>{t++||createCanvas(W=720,W)
noStroke()
colorMode(HSB)
background(H=noise(T=(t/W))*W%360,W,W)
fill((H+180)%360,75,W)
for(y=0;y
#minacoding 20250628,29,30
#つぶやきProcessing
youtu.be/DKgzKaVrzw0
draw=_=>{t++||createCanvas(W=720,W)
noStroke()
colorMode(HSB)
background(H=noise(T=(t/W))*W%360,W,W)
fill((H+180)%360,75,W)
for(y=0;y
#minacoding 20250628,29,30
#つぶやきProcessing
youtu.be/DKgzKaVrzw0
draw=_=>{t++||createCanvas(W=720,W)
background(0)
for(y=0;y
#つぶやきProcessing
youtu.be/yzEDjjcG1O0
draw=_=>{t++||createCanvas(W=720,W)
background(0)
for(y=0;y
#つぶやきProcessing
youtu.be/yzEDjjcG1O0