Palette

ritocoのクリエイティブコーディング記録

SNACKS Vol.5にいってきました

文章

(引用 https://snacks05.peatix.com/)


7/16に大阪の zizo 芝生スペース で行われたデジタル・メディアアートの小さな作品展　SNACKS にいってきました！
自分も作り手の１人として刺激を盛りだくさんに受けたので、感想を綴ります。
アウトプット！アウトプット！


ビル街に映えるポップなポスターが可愛い。



初 SNACKS の感想

SNACKS とは インスタ部 というコミュニティが主催の、まだ「作品」と呼ぶには小さな創作のかけらを持ち寄り、作家同士やお客さんとお話しながら作品に触れられる展示・交流会です。

交流会なので会場の雰囲気は にぎやか！
子どもから大人までワイワイしていました。




今回のイベントを通して気付いたのですが
私は、静寂の中で作品に集中するより、アーティストさんと対話し、その人の人生や、作品に対する情熱、こだわり、苦労等を聞き出しながら、作品に触れるのが好きです。

なので、早口で質問攻めしちゃいました…が！
どの方も丁寧に回答してくれて、本当に感謝です。


こういった「 情熱があるゆるさ 」がSNACKS の面白さだと個人的に思います。



展示されていた作品と感想（一部）


私が話しかけることができた方の作品に触れていきます。
もっと展示作品が見たい方は主催の インスタ部 のアカウントでチェックできます！



ミウラセナさんの作品


白いターンテーブルに黒い紙を好きなところに置くと音が鳴る楽器。

黒い紙を置くという赤ちゃんでもできるシンプルな動作に対して、探求の余地を残すバランスが絶妙でした。

また、作品紹介映像はツイートの通りPowerPoint（！）でした。
お話を伺うと オブジェクトを置いたら、モーションを自動で補正してくれる「変形」の機能で作ったとのこと。

x.gd


その場での発見を作者に伝えて、さらに発見することができるのは、オフラインのイベントの良さだなと感じました。




のぼさんの作品

novogrammer.github.io

赤い風船を割るミニゲーム！
リンク先はキーを押したら始まります。
(出展時は３つの足のペダルを踏んで風船を割るゲームでした）

ゲームの最後にスコア記録されるのですが、40点台のハイスコア出してる人が多かったです。地味に悔しかったのでリベンジしたい！ もっとやりたい！と強く引き寄せられました。

ヌルヌル動く風船のグラフィックも綺麗で、WEBサイトでここまでできるんだなあと感動していました。


TRIGGER さんの作品

上記画像の 右の画面でツイートのような人の呟き が表示され、中央の画面で呟きを分析した表情を出すというもの。

異なるモニター同士で連動しているのが不思議な感覚でした。
もっとじっくり見たくなる作品。

ちなみにTRIGGERさんは３名のクリエイティブユニットで、今回が初めての展示だったそうです。

社会人３人で、しかも自主制作のスケジュールを調整して制作するのってめちゃくちゃ大変だと思っています。
実際に、どのように制作スケジュール調整したのかをお伺いしたところ、今年初めぐらいから、カフェで強制的に集まって作業に集中する日を作ったと話していました。すごすぎる。



Processing作品もたくさん！！

さらに偶然の巡り合いでProcessing community Day2023で、作品出展されていた方にもお会いできました。 Processingの話や日々のコーディングのお話もできて楽しかったです。

引用させていただいたツイートはPCD関係のものですが、全く同じ作品がSNACKSでも展示されていました。

大阪でも拝めて感激…!!

さいごに

全体を通して、それぞれのアーティストさんの感性、人生が作品に反映されていて刺激受けまくりでした。

短い滞在だったので、全てのアーティストさんに声をかけることができなかったのが心残りですが、ここで紹介した以上にたくさんの作品がありました。

デジタルアート、電子工作が好きな人は刺さるイベントなので関西方面にお住まいの方はぜひ！

Tiny Sketchesに行きました

文章



5/13に 高尾さん の初個展「TinySketches」に行きました。
とてもよかったので感想をブワッと書きます。見入ってしまって満遍なく写真を撮れなかったですが熱量が伝われば嬉しいです。



色とりどりの作品がお出迎え



壁一面にカラフルな高尾さんの作品。

空間に入ったその瞬間の圧倒される感じは生だからこその体験。
空間に慣れるとPC開いてコードを書きたくなります。
スランプでも何か掴めるかもしれないぐらいの威力でした。
インスピレーションの泉。



展示されている240点の中で上記の作品に強く惹かれました。
使用している色はカラフルなのに、ダークな部分がチラ見えするのが好きです。
お気に入りの作品を見つけてみたり、新たな自分の作風を開拓できるかもしれないと思いながら作品を見ていました。

generativemasks のコーナーも発見！
隣のロゴも好きです。
モニターに映るマスクは一定時間が経つと、色と柄が大きく変わるので、ぼんやり見るのもいいなーと思いながら見ていました。





高尾さんの作品は正方形のスタイルが多いので、長方形で見れるのは珍しいと教えてくださりました。
近くで見ると、絶妙な質感に感動します。
個人的に、作品のレンダリングを見届けられたのもよかったです。
作品が生きている感じがあり、生で見に行く楽しみの１つと感じました！


作品に使用した用紙にもいくつか候補があり、自分がいいと思ったものを吟味したと高尾さんが話されていました。
紙の質感、インクののり具合といった紙だからこその面白さを体感することができました。

四角の銀色のマグネットにもこだわりが。

作品に穴を開けたくないので、壁に画鋲をさし、作品の上にマグネットをのせて作品を留めているとのことです。
この手仕事の裏側を主催元のNEORTのNIINOMI さんやAyumu Nagamatsuさんに教えていただきました。



「スケッチ１５００点のうち２４０点に絞った」と文字にするとサラッとしていますが、絞りに絞った至極の２４０点。
過去の高尾さんの作品 と 今の高尾さんの作品がどうリンクしているのかを目で追うことができ、さらに生の高尾さんから解説いただく最高の時間でした。

Youtubeの配信で、この時に私に話してくださったこともかなりあるので、よければぜひ配信もチェックしてみてください。

youtu.be




総じて感想

最高でした。
ビルの一室でデジタル（モニターの作品）とアナログ（紙の作品）を行き来できる、とても不思議な空間でした。
新幹線の都合で途中で退室しましたが、最後まで居たかった…！

とはいえ、４時間ほどいました（！）が、いろんな人とお話したので時間の流れもあっという間でした。
花火大会の後のような、テーマパークを退場した後のあの気持ちに近いものを感じました。
帰りの新幹線でも余韻に浸るようにチラシを見ていました。

もっと書きたいことがあるけど、かなーり個人的な話になっちゃいそうなので割愛します。

ここまで読んでくださった方、本当にありがとうございました。
そして高尾さん初個展おめでとうございます！◎

tinysketches.neort.io

twitter.com

【 p5.js/Processing 】四角に角度をつけて並べる

Processing / p5js code
f:id:ritocopalette:20211130020402p:plainf:id:ritocopalette:20211130020407p:plain

code( p5.js )

function setup () {
    createCanvas(700, 700);
    noLoop();
}
// Pattern drawing
function draw(){
    background(255);
    noStroke();
    for (let y = 0; y < height; y += width/10) {
        for (let x = 0; x < width; x += width/10) {
            push();
            translate(x, y);
            myPattern();
            pop();
        }
    }
}
// rect size , position , rotate
function myPattern(){
    let a = 0.0;
    let ranA = random(900);
    let ranB = random(100);
    let inc = TWO_PI / ranA;
    stroke(2);
    scale(0.4);
    for (let i = 0; i < width/50; i++) {
        rect(i * 20, ranB, i,  sin(a)*ranA);
        rotate(PI / 3);
        a = a + inc;
    }
}

code( Processing )

void setup () {
    size(700, 700);
    noLoop();
}
void draw(){
    background(255);
    noStroke();
    for (int y = 0; y < height; y += width/10) {
        for (int x = 0; x < width; x += width/10) {
            push();
            translate(x, y);
            myPattern();
            pop();
        }
    }
}
void myPattern(){
    float a = 0.0;
    float ranA = random(900);
    float ranB = random(100);
    float inc = TWO_PI / ranA;
    stroke(2);
    scale(0.4);
    for (int i = 0; i < width/50; i++) {
        rect(i * 20, ranB, i,  sin(a)*ranA);
        rotate(PI / 3);
        a = a + inc;
    }
}

openProcessing

後日追記

License

クリエイティブ・コモンズ・ライセンス

memo

四角を楕円にしても、rotateの部分を変えても、また違った見え方がして面白いと思います◎

【 p5.js/Processing 】Ellipses and Cracked lines.

Processing / p5js code
f:id:ritocopalette:20211201152844p:plainf:id:ritocopalette:20211201152847p:plain

code( p5.js )

function setup() {
    createCanvas(700, 700);
    noLoop();
    noFill();
}

function draw() {
    // background color
    background(random(220, 250), random(220, 250), random(200, 250));
    strokeWeight(.9);

    // motif position
    let dr_steps = random(95, 100);
    for (let y = 0; y < height; y += dr_steps) {
        for (let x = 0; x < width; x += dr_steps) {
            push();
            translate(x, y);
            pattern001();
            pattern002();
            pop();
        }
    }
}
// motif drawing
function pattern001() {
    let a = 0.0;
    let ranA = random(110);
    let ranB = random(width / 10);
    let inc = TWO_PI / ranA;

    //size
    scale(random(0.09, 0.3));

    // shape
    beginShape();
    stroke(random(190, 250), random(200, 250), random(210, 250));
    vertex(220.5 * sin(a), 2.5 * cos(a));
    rotate(PI / random(2));
    endShape(CLOSE);

    blendMode(BURN);
    for (let i = 0; i < width / 2; i++) {
        rect(i * 0.2, tan(a), tan(a) * ranB, 3);
        rotate(PI / ranA);
        a = a + inc;
    }
    blendMode(BLEND);
}
// motif drawing
function pattern002() {
    let ranA = random(40);

    //size
    scale(random(3.5));

    // shape
    for (let i = 0; i < height / 10; i++) {
        let col1 = color(random(10, 220), random(100, 255), random(100, 255));
        stroke(col1);
        strokeWeight(.4);
        arc(ranA, ranA, 2 * i, 2 * i, random(TWO_PI), random(TWO_PI));
        noFill();
    }
}

code( Processing )

void setup() {
  size(700, 700);
  //noLoop();
  noFill();
  frameRate(1);
}

void draw() {
  // background color
  background(random(220, 250), random(220, 250), random(200, 250));
  strokeWeight(.9);

  // motif position
  float  dr_steps = random(95, 100);
  for (int y = 0; y < height; y += dr_steps) {
    for (int x = 0; x < width; x += dr_steps) {
      push();
      translate(x, y);
     pattern001();
      pattern002();
      pop();
    }
  }
}
// motif drawing
void pattern001() {
  float a = 0.0;
  float ranA = random(110);
  float ranB = random(width / 10);
  float inc = TWO_PI / ranA;
  
  //size
  scale(random(0.09, 0.3));
  
  // shape
  beginShape();
  stroke(random(190, 250), random(200, 250), random(210, 250));
  vertex(220.5 * sin(a), 2.5 * cos(a));
  rotate(PI / random(2));
  endShape(CLOSE);
  
  blendMode(BURN);
  for (float i = 0; i < width / 2; i++) {
    rect(i * 0.2, tan(a), tan(a) * ranB, 3);
    rotate(PI / ranA);
    a = a + inc;
  }
  blendMode(BLEND);
}
// motif drawing
void pattern002() {
  float ranA = random(40);

   //size
  scale(random(3.5));
  
  // shape
  for (int i = 0; i < height/10; i++) {
    int col1 = color(random(10, 220), random(100, 255), random(100, 255));
    stroke(col1);
    strokeWeight(.4);
    arc(ranA, ranA, 2*i, 2*i, random(TWO_PI), random(TWO_PI));
    noFill();
  }
}

openProcessing

後日追記

License

クリエイティブ・コモンズ・ライセンス

memo / comment

一番最初に投稿したCracked linesも使ってみました。 個人的にできる範囲でいくつかアレンジをしたもののピンとこなかったので、こちらで昇華。 Processing / p5.js 両方ともあるので、ぜひ。

【 Processing / p5.js 】Blurred ellipse.

Processing / p5js code
f:id:ritocopalette:20211201161258p:plainf:id:ritocopalette:20211201161307p:plain

code( Processing )

void setup() {
    size(700, 700);
    noLoop();
    noFill();
}
// motif position
void draw() {
    background(255);
    for (float y = 0; y < height; y += 120) {
        for (float x = 0; x < width; x += 120) {
            push();
            translate(x, y);
            myCircle();
            pop();
        }
    }
}
// motif drawing
void myCircle() {
    for (float i = 0; i < 2; i++) {
        int pal = color(random(200,25),random(250),random(250));
        float val1 = width / 2;
        blendMode(HARD_LIGHT);
        stroke(pal);
        strokeWeight(15);

        beginShape();
        for (float a = 0; a <= TWO_PI; a += 0.05) {
            float xoff = map(cos(a), -1, 1, cos(a), 2);
            float yoff = map(sin(a), -1, 1, cos(a), 2);
            float vr = map(noise(xoff, yoff), 0, random(10, 20), val1 / 2, val1);
            vertex(vr / 2 * cos(a), vr / 2 * sin(a));
        }
        endShape(CLOSE);
    }
    blendMode(BLEND);
}

code( p5.js )

function setup() {
    createCanvas(700, 700);
    noLoop();
    noFill();
}
// motif position
function draw() {
    background(250);
    for (let y = 0; y < height; y += 120) {
        for (let x = 0; x < width; x += 120) {
            push();
            translate(x, y);
            myCircle();
            pop();
        }
    }
}
// motif drawing
function myCircle() {
    for (let i = 0; i < 2; i++) {
        let pal = color(random(200,250),random(250),random(250));
        let val1 = width / 2;

        stroke(pal);
        strokeWeight(15);
        blendMode(BURN);
        beginShape();

        for (let a = 0; a <= TWO_PI; a += 0.05) {
            let xoff = map(cos(a), -1, 1, cos(a), 2);
            let yoff = map(sin(a), -1, 1, cos(a), 2);
            let vr = map(noise(xoff, yoff), 0, random(10, 20), val1 / 2, val1);
            vertex(vr / 2 * cos(a), vr / 2 * sin(a));
        }
        endShape(CLOSE);
    }
    blendMode(BLEND);
}

openProcessing

準備中

License

クリエイティブ・コモンズ・ライセンス

memo / comment

画像はp5.jsで実行したものを使っています。Processing verだと、見え方が変わる場合があります。

【 p5.js 】Soft trigonometric pictures.

Processing / p5js code
f:id:ritocopalette:20211130095354p:plainf:id:ritocopalette:20211130095403p:plain

code( p5.js )

function setup() {
    createCanvas(600, 600, P2D);
    noLoop();
}
//draw
function draw() {
    background(255);
    noStroke();
    for (let y = 0; y < height; y += 30) {
        for (let x = 0; x < width; x += 40) {
            push();
            translate(x, y);
            myPattern001();
            myPattern002();
            pop();
        }
    }
}

//motif
function myPattern001() {
    let a = 0.0;
    let ranA = random(70);
    let ranB = random(80);
    let inc = TWO_PI / ranA;
    for (let i = 0; i < 20; i++) {

        //rect size
        rect(i * 20, ranB, i, sin(a) * 200.0);

        //color
        drawingContext.shadowColor = color((20, 20), random(10, 250), random(255));
        drawingContext.shadowBlur = 120;
        a = a + inc;
    }
}
function myPattern002() {
    //rect size
    for (let i = 0; i < 50; i++) {
        rect(i / 2, i / 2, 120, 0.5);
        rotate(220);
    }
}

openProcessing

後日追記

License

クリエイティブ・コモンズ・ライセンス

【p5.js】p5.jsと組み合わせて面白かった表現4選

この記事は Processing Advent Calendar 2021 19日目 の記事です。


Processing Advent Calendar 2021

寒すぎてMacBookで手をあたためています、ritocoです。
前日は TaitoOtani さんの「P5JSで作るオーディオビジュアルスケッチ、そして2021年の振り返り。」でした。

かっこいい音楽と白黒のスケッチのコラボがドストライクだったので、本記事の執筆時の BGM にしました。
気になった方はリンクからぜひ覗いてみてください◎


さて、今回は p5.jsと組み合わせて面白かった表現4選 をご紹介します。
本記事では組み合わせるツール（表現）、どんな風に使うのか、組み合わせた例をまとめています。
皆様のクリエイティブコーディングの引き出しになれば幸いです。





1.Fancy Border Radius Generator

9elements.github.io

組み合わせた結果

CSSのcanvas属性に入力するとフヨフヨの丸型に変わります。

openprocessing.org




使い方

gyazo.com

動画内の解説

① Fancy Border Radius Generator にアクセス後、copyを押す
② くりぬきたいスケッチをOpenProcessing上で用意する
③ 右側のメニューより、HTML/CSSをクリック
④ OpenProcessing内のCSSのタブをクリック
⑤ CSSエディタに下記のようにcanvas要素、border-radius、①でコピーした数値を記述

/* CSS */
canvas{
border-radius:30% 70% 70% 30% / 30% 30% 70% 70% ;
}

⑥ 更新ボタンを押すと⑤で設定した形にくり抜かれる。





2. Clippy — CSS clip-path maker

bennettfeely.com

組み合わせた結果

canvasをさまざまな形に変形することができます。

openprocessing.org





使い方

gyazo.com



gyazo.com

動画内の解説

① Clippyにアクセス後、好きな図形を選んで値をコピー
② くりぬきたいスケッチをOpenProcessing上で用意する
③ p5.js内でcanvasを入れる変数を宣言

// p5.js
let canvas;

④ p5.jsのsetup内で変数の中にcreateCanvasを入れる

// p5.js
function setup() {
  canvas = createCanvas(500,500);
.

⑤ p5.jsのdraw内に、④で指定した変数にstyleを当て、 ①でコピーした数値を記述

// p5.js
function draw() {
  canvas.style("clip-path", " polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)");
.
.

⑥更新ボタンを押すと⑤で設定した形にくり抜かれる。



takawoさんの下記のツイートを参考に、上記の表現を取り入れました。





3.Smooth Shadow

bennettfeely.com

組み合わせた結果

細かく影が調整できるツールです。
box-shadow openprocessing.org





使い方

gyazo.com

動画内の解説

① 影をつけたいスケッチをOpenProcessing上で用意する
② Smooth Shadowにアクセス後、影の位置等を調節し、値をコピー
③ OpenProcessing右側のメニューより、HTML/CSSをクリック
④ OpenProcessing内のCSSのタブをクリック
⑤ CSSエディタに下記のようにcanvas要素と②でコピーした数値を記述

/*CSS*/
canvas{
    overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
box-shadow:
  2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);
}




4 Chromatic Vision Simulator

asada.website

ツールの概要

色の見え方に特徴がある方に向けて、色の区別に配慮しているかどうか検証することができます。
いろんな方に作品を楽しんでもらえたら嬉しいなと感じて、今回アートに応用する形で取り上げました。 色覚多様性ついてもっと知りたい方は こちら。

f:id:ritocopalette:20211219133355p:plain


使い方

gyazo.com ① Chromatic Vision Simulator にアクセス
② フォルダのアイコンをクリックし、検証したい画像を開く
③ 検証したい見え方をクリックしたり、画面を分割することができます




Chromatic Vision Simulatorで実験

① 検証してみた結果、今回の場合は左斜め下の色の強弱が弱く、見分けづらいと判断しました。

f:id:ritocopalette:20211219133407p:plain





② 解消するために カラーユニバーサルデザイン推奨配色セット から、色を選びました。
ただ、リンク先のガイドブックを見たらRGB表記だったためカラーコードに変換します。
使いたい色のスクリーンショットを撮影し、Adobe Colorを使用して、カラーコードに変換しました。

gyazo.com




③ 作品に色を当てて、Chromatic Vision Simulatorで検証しました。 f:id:ritocopalette:20211219141151p:plain


④ 最終的に下記のようになりました。
最初の画像比べて、どの部分でも色の強弱がはっきりし、 区別がつきやすくなりました。
f:id:ritocopalette:20211219144629p:plain



実験を終えて

ツールと組み合わせることで細部まで表現できたり、少し制約があることでいつもと違う景色が見れたりと、さまざまな角度からp5.jsでの作品制作をすることができて、実験はとても新鮮でした。
特に最後のカラーバリアフリーについては、先日行われた Tokyo Demo Fest からインスピレーションを受けました。「配慮の技術」があることに非常に感動し、自分の中でも今後取り入れて行きたいテーマだと感じました。
皆さんの制作ネタのお役に立てれば幸いです!
ハッピーコーディング!