【 p5.js 】Painting like an oil painting.

code01( p5.js )

function setup() {
    createCanvas(canva = 300,canva,WEBGL);
    frameRate(1);
    w = 800;
    n = 900;
    noLoop();
}

function draw() {
    background(255);
    noStroke();

// light
    r = random;
    v = createVector;
    myAl　= ambientLight;
    myPl = pointLight;
    myDl = directionalLight;
  
//customize ( Material )
    myVal = random(4,20);//4-25
    myVal2 = random(-5,5);//4-25

// drawing
    for (i = -n; i < n; i++) {
        push();
        rotateX(r(n));
        rotateY(r(n));
        rotateZ(r(n));
      
//customize ( RGB Light Color )
        myPl(225, 250, 222, v(1000));
        myPl(202, 13, 125, v(100));
        myDl(22, 250, 50, 0,myVal2,0);

//motif
        torus(n, canva/10, r(w) > int(myVal)  ? int(myVal) : n);
        pop();
    }
}

code02( p5.js )

function setup() {
    createCanvas(wh = 500,wh,WEBGL);
    frameRate(1);
    w = 800;
    n = 900;
    noLoop();
}

function draw() {
    background(255);
    noStroke();

// light
    r = random;
    v = createVector;
    al　= ambientLight;
    pl = pointLight;
    dl = directionalLight;

// drawing
    for (i = -n; i < n; i++) {
        push();
        rotateX(r(n));
        rotateY(r(n));

        // pl(r(w), r(w), r(w), v(w));
        // pl(r(w), r(w), r(w), v(w));
        // dl(r(w), r(w), r(w), v(w));

        pl(225, 220, r(222), v(1000));
        pl(2220, 13, 25, v(12));
        dl(22, 20, (w/2), v(220));

//motif
        torus(n, wh/10, r(w) > 1 ? 5 : n);
        pop();
    }
}

openProcessing

openprocessing.org

License

memo / comment

油彩画のような不思議な質感の絵ができました。
遠目で見た方がそれっぽい感じはあります。
code01はcustomizeの中を、いろんな値にしてみて見るといいものができるかもしれません。

最初にcode02が完成し、数日後に扱いやすくなるようにcode01のように書き直しました。
code02も質感が面白いので残します。

【 p5.js 】It tried to become a sphere.

code( p5.js )

function setup() {
    createCanvas(500, 500, P2D);
    noLoop();
    noFill();
}
function draw() {
    // background color
    background(random(220, 250), random(220, 250), random(200, 250));

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

    // motif size
    scale(random(0.3, 1.5));

    // motif color,alpha etc...
    for (let i = 0; i < height / 10; i++) {
        let col1 = color(random(120, 220), random(200, 255), random(200, 255));
        stroke(col1);
        arc(width / 20, height / 20, ranB * 2, i + sin(a), i * ranB, HALF_PI);
        strokeWeight(.2);
    }
    a = a + inc;
}

openProcessing

openprocessing.org

License

【 p5.js 】Whimsical Gradations.

code( p5.js )

let num = 15; let angle = 1.0;

function setup() {
    createCanvas(500, 500, P2D);
    colorMode(HSB, 360, 100, 100, 100);
    drawingContext.shadowBlur = windowWidth*0.08; //0.08-1.2
   noLoop();
}

function draw() {
   background(255);
   marble();
}

function marble() {
 angle += 0.1;
    for (let i = 1; i <= num; i++) {
        let x = sin(angle * i) * (min(width, height));
        let y = cos(angle * i) * (min(width, height) / 2.5);
        let size = sin(angle) * i * random(90,10);
        let h = map(i, random(num), num, 1, 10);
        fill(120, 10, 0);
        push();
     

    // shape Color
    let col1 =["#79CBCE", "#D1ECEC"];
    let gd1 = random(col1);
    drawingContext.shadowColor = gd1;

    // shape Position
        blendMode(DIFFERENCE);
        translate(sin(angle * 2) * x + width / 2, tan(angle) * y + height / 2);
        rotate(angle * num);

    // shape Draw
        strokeWeight(10000);
        stroke(h, 10, 100);
        
        ellipse(0, 0, random(20), 2000);

        bezier(30, size + sin(y),
        0,0,
        size * sin(140 * angle),
        size * sin(angle),
        cos(120 * angle), size * cos(100 * angle),
        size,
        sin(220 * angle), 80, sin(130 * angle))

        pop();
    }
    blendMode(BLEND);
}

openProcessing

openprocessing.org

License

memo / comment

なぜこうなるのかわからない。だがそれがいい。
let num と drawingContext.shadowBlur の値を触ると、いろんな見え方をして面白いです。
shape Colorは適当に入れてます。
印刷すると綺麗かもしれないです。

About

ブログについて

このブログはritoco の p5.js / Processing の没スケッチや、イベントの長文のレポートなどをゆるーーく記録するものです。

基本的に、全てのページはリンクフリーです。
また、リンクした旨を連絡をしていただく必要もありません。

ご意見などありましたら、コメント や TwitterのDM にてお知らせください。

About Blog

This blog is a loose record of ritoco's p5.js / Processing immersion sketches, long reports of events, techniques, and announcements.

Basically, all pages are link-free. You don't need to contact us to let us know that you have linked to our site.

ソースコードの使用について

基本的には下記、クリエイティブ・コモンズに沿っていれば問題ないです。

Use of Source Codes

Basically, as long as it is in accordance with the following, Creative Commons, there is no problem.



If you have any other questions, please feel free to contact us by DM on Twitter.

使用報告の有無 / 連絡先

報告なしで問題ないです。
もし報告する場合は TwitterのDM にてお待ちしております。

ご一報いただけたら私のモチベーションになりますし、 よければSNSやブログ等で宣伝・掲載をいたします。
お気軽にご連絡ください♪

Reported use or not / Contact

You do not need to report the use of the code. If you do report it, please do so via Twitter DM .

おすすめ記事

ritocopalette.hatenablog.com

【 Processing / p5.js 】Cracked lines

code( p5.js )

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

function draw() {
    // background color
    background(random(200, 250), random(200, 250), random(200, 250));
    // 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 drawing01
function pattern001() {
    let a = 0.0;
    let step = 1.2;
    let ranA = random(20);
    let inc = TWO_PI / ranA;

    beginShape();
    for (a = 0; a <= TWO_PI; a += step) {
        let vr = map(noise(2232), 0, 1, width / 2, width);
        stroke(random(220, 250), random(210, 250), random(240, 250));
        blendMode(BURN);
        vertex(vr / 220.5 * sin(a), 2.5 * cos(a));
        rotate(PI / random(2));
    }
    endShape(CLOSE);
    a = a + inc;
    blendMode(BLEND);
}
// motif drawing02
function pattern002() {
    let b = 0.0;
    let ranA = random(110);
    let ranB = random(width / 10);
    let inc = TWO_PI / ranA;

    scale(random(0.25, 0.3));
    blendMode(BURN);
    for (let i = 0; i < width / 2; i++) {
        rect(i * 0.2, tan(b), tan(b) * ranB, 3);
        rotate(PI / 120);
        b = b + inc;
    }
    blendMode(BLEND);
}

code( Processing )

void setup() {
    size(700, 700);
    noLoop();
    noFill();
}
void draw() {
    // background color
    background(random(200, 250), random(200, 250), random(200, 250));
    
    // 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();
        }
    }
}
// motif01
void pattern001() {
    float val1 = 0.0;
    float step = 1.2;
    float ranA = random(20);
    float inc = TWO_PI / ranA;
    
// motif01 drawing
    beginShape();
    for ( val1 = 0; val1 <= TWO_PI; val1 += step) {
        float vr = map(noise(2232), 0, 1, width / 2, width);
        stroke(random(220, 250), random(210, 250), random(240, 250));
        blendMode(MULTIPLY);
        vertex(vr / 220.5 * sin(val1), 2.5 * cos(val1));
        rotate(PI / random(2));
    }
    endShape(CLOSE);
    val1 = val1 + inc;
    blendMode(BLEND);
}
// motif02
void pattern002() {
    float b = 0.0;
    float ranA = random(110);
    float ranB = random(width / 10);
    float inc = TWO_PI / ranA;
    
   // motif02 drawing
    scale(random(0.05, 0.1));
    blendMode(MULTIPLY);
    for (int i = 0; i < width / 2; i++) {
        rect(i * 0.2, tan(b), tan(b) * ranB, 3);
        rotate(PI / 120);
        b = b + inc;
    }
    blendMode(BLEND);
}

openProcessing

openprocessing.org

License

memo / comment

p5.jsのblendMode(BURN)を、ProcessingではblendMode(MULTIPLY)に変更して、見え方の再現を近づけています。
（もっといい方法があればご教示いただけると幸いです！）

ブログについてのお知らせ

ritocoです。

ブログ更新を止めるわけではなくブログを大幅にリニューアルしたのと、 今後はゆるめに更新したいと思ったので、方向性を設定してみることにしました…という報告です！

下記に詳細を記載します。

1. ブログのリニューアルしました!

ブログタイトルをPaletteにしました。

個人的に
色とその見え方を追求するのが好きで、
さまざまな色を持った何かを投稿できたらいいな
と思って名付けました。

また、ブログデザインもすてきなテンプレートをもとに変更しました。

2. 今後の更新の内容

12月からブログの方向性としては

• 長文のレポート・お知らせ
• 没になったp5.js / Processing のスケッチの昇華

をゆるくできたらいいなって思っています◎

私が最近の取り組み Morning Drawing でうまく昇華できなかった作品のかけらを、ここに投稿して誰かがアレンジ、表現の練習、アイディアなどにご活用いただけたら非常に嬉しく思います。

基本、p5.jsですが自分の理解できる範囲でProcessingでも再現できそうなものは書き換えて掲載します！
できそうであれば、OpenProcessingにも投稿します。

3. 近況など

最近はゆっくり休みつつ、 自分の作品の方向性を模索したり、新しい何かを探る毎日です。

今は旅人なので、たまにスペースやもくもく会で、さまざまな方と話しながら、ゆっくり自分の人生の方向性も見つけて行きます。

そういえば。
停滞中のこのブログですが、気付かぬうちにブックマークや読者様がいてくれたことが嬉しかったです。 ありがとうございます（照）

引き続きこのブログも、ritocoもよろしくお願いいたします。

Processingのアート配布を企画しました。

ブログの書き方を忘れてしまった ritoco です。
書き方の参考に、学生時代に書いたブログを読んで恥ずかしくなっています。
さて今回は8月末〜9月上旬に密かにやった「Processingアート配布企画」について記述します。

目次

企画背景

引っ越しので荷物整理していたところ、箱の中にProcessing始めたての４年前のアートを発見。
４年も箱に眠っていたので、取っておこうか迷いました。

そこで考えた結果。
自分以外の誰かが手元に残してくれたら、箱の中で眠るよりかはずっと活用してくれるかも！
と判断して、配布する形を取りました。

企画を練り練り

とはいえ４年前の作品。
ヨレあり、傾きあり、インクも付着しているのでどうだろう…？
と少し考えることも。

色々考えたけど物は試し。
「企画のツイートにいいね」と「DMが送れる環境」であること、
さらに「４年前のものであることを了承していただける方を対象」にツイートを流しました。

私が #Processing 始めたてのアートを引き取っていただける方いますか…？

「なんでも許せる方向け」です。
欲しい方、いいねをお願いいたします。#企画 pic.twitter.com/1AxeeJqQFR

— ritoco (@t_ritoco) 2021年8月20日

注意

4年前のものです。

印刷の端が切れていたり、
裏に黒インクがあったり、
よれていたり…
なんでも許せる方向けです。

近々引っ越しするので、配布します。 pic.twitter.com/4hPZa0cIdu

— ritoco (@t_ritoco) 2021年8月20日

ツイート流した結果、1人に1枚配れる勢い！！！！
びっくりしてスマホ投げました（正確には手が滑った）
予想以上に引き取っていただける方がいて、とても嬉しかったです。

自分が思っていた以上のスピードで枠が埋まり、対象となる方１人１人にDMで引き取りのご案内をしました。

梱包と発送

続いて梱包。
状態がいいもの、傾きが小さいもの、傾きが大きいもの…の３つに仕分けました。
状態がいいものはそのまま送付、
傾きが小さいものはアート ＋ ステッカー or 名刺
傾きが大きいものはアート2枚 を送付させていただきました。


封をした状態でランダムでピックアップして書いていたのと
厚紙で表面の水濡れや傷の防止をしていたので、誰にどんな絵柄が届いたのかは、私もくじ引き状態でした。
なので、ご参加いただいた方のツイートやDMを拝見し「あー！あれが届いたのか！！」と一緒に楽しんでいました（笑）

発送は、引っ越しの準備の合間に郵便局へダッシュし、無事に受け付けていただけました。
個人で18通はレアだから結構驚かれるかなーとか思ったんですけど、空いていたからかスムーズでした。

本日、郵便局窓口にて発送いたしました！

無事に届きますように…！🙏✨ https://t.co/i2kliHkTgw pic.twitter.com/MhwCXmp01i

— ritoco (@t_ritoco) 2021年8月30日

報告ツイート

私の字が汚すぎて誤配達だったら…なんてことを想像していたので到着ツイート・DM、本当に嬉しかったです。
ブログではツイートの確認ができたものだけ、掲載します。
（ここに載っていない方でツイートしたら教えてくれると嬉しいです！載せたい！）

額に入れてみたらいい感じ pic.twitter.com/O9mG2zJ3bG

— ななき (@nanaki14) 2021年9月1日

.@t_ritoco さんのめっちゃ素敵な作品が届きました！　かっこいいー！ pic.twitter.com/jv3zQ8ht79

— センバク (@senbaku) 2021年9月1日

@t_ritocoさんに頂きました！めっちゃ好き！！！ pic.twitter.com/fElEAmDtUI

— れれち (@HitsujiRere) 2021年9月11日

@t_ritoco さんのアート届きました〜。嬉しい！大切にします！ pic.twitter.com/BaLBJZ6UFg

— kaiware style🌱メタバースVJ (@kaiware007) 2021年9月1日

ritocoさんからクリエイティブコーディング作品をいただきました！有機質にも見えるけど無機質な質感がとても良い…✨ありがとうございます…！@t_ritoco pic.twitter.com/TyKCrhl2is

— おなかもん (@onakamon) 2021年9月8日

.@t_ritoco さんの作品届きました！
デジタル作品なのに、紙で届くの面白いです(笑)

誰のためでもなく自分が良いと感じる作品を作れるの いいなと、最近は思います https://t.co/HdL7LCjnYr pic.twitter.com/ujVAOVidGS

— 加藤ユウキ@MEDIA WARP Inc. (@y_kato1997) 2021年9月3日

@t_ritoco さんから頂いた！

色のコントラストがすごく素敵 pic.twitter.com/NJkwsLyAuE

— 三橋龍起(Mitsuhashi Tatsuki) (@tatsuki3284) 2021年9月10日

あらためて感謝

たくさんのご参加・アートの到着報告、そしてギフト（スープいっぱい！）と暖かいメッセージまで……！！！！
ほんっっっっっっとうにありがとうございました！
いつか、誰かの身近な場所に自分の作品が、どこかで輝いていたらいいなあ…と学生時代に夢見ていたので、夢がまた１つ叶いました。
いただいたメッセージカードなどは取っておくタイプなので、とにかく元気なくなった時に見返します。
楽しかったのでまたやりたいです…！その時もよろしくお願いいたします。

反省

ついでに今回の企画を通して、もっとこうしてもよかったかも、これは学びだったという部分も記載しておきます。戒めで…。

1. フォローしていない人にDMするとロックかかってしまう
   これ知らなかったです（Twitter初心者）
   今回はフォロワーさんじゃない人も条件を満たせば対象だったので、そこは反省でした。
   だから、企画系は「フォロー・RTをしてください！」と記載があるのだな…と学びました。
   
   
   
2. 宛名シールを作る
   自宅の長い住所を書くのが結構しんどい
   送り先を間違えると誤配送につながる
   ということもあり、宛名シールを作ると良さそうと思いました。
   シールじゃなくても、名刺サイズのテンプレートに自分と送り先の住所を記載し、
   白黒印刷、のり付け…でもありかなあと思いました。２回目はそうします…。
   
   
   
3. L版サイズでミニレター発送は難しい
   最初、発送方法は一番お手軽なミニレターで考えていました。
   ただ郵便局員さんに色々確認をとったところ、サイズなどの規約があり普通郵便にしました。
   もし同じ、手元に届く形の企画系をやりたい！のであれば、ミニレターにおさまる範囲だと比較的送料がお手軽で済むのかなあ…と思いました。
   
   
   反省もありますが、
   クリエイティブコーディングを通してこんなにも、
   いろんな方に支えられて生きているんだなと実感することができた企画でした。
   またこういう機会があったらやりたいです！色々配布してみたい…！
   ここまで読んでいただき、ありがとうございました。
   今後も Twitter や Instagram もよろしくお願いいたします。