【週刊p5js】work06

var graphic = [];
var colorPalette = [["#9dab86","#e6a157","#eb8242","#c9753d"],
                    ["#f0cf85","#e7f0c3","#a4d4ae","#32afa9"],
                    ["#015668","#263f44","#ffd369","#fff1cf"],
                    ["#f67280","#c06c84","#6c5b7b","#35477d"],
                    ["#fbe3b9","#fab696","#0c9463","#2d334a"]
                  ];
var amount = 24;

var colorArray;

function setup() {
  createCanvas(800, 800, WEBGL);
  pixelDensity(2);
  angleMode(DEGREES); 
  textFont("Fredoka One");
  noLoop();
}

function draw() {
  clear();
  var l = colorPalette.length;
  var selectPalette = colorPalette[ (int)(random(0,l+1)) ];

  colorArray = shuffle(selectPalette);

  background(colorArray[0]);

  let rad = 360/amount;

  noStroke();
  for (let i = 0; i < amount; i++) {
    graphic[i] = createGraphics(width, height);
    graphic[i].textFont("Fredoka One");
    graphic[i].textAlign(CENTER);
    graphic[i].textSize(random(50,200));
    graphic[i].stroke(colorArray[1]);
    graphic[i].strokeWeight(5);
    graphic[i].smooth();
    let cd = color(colorArray[2]);
    cd.setAlpha(map(i, 0, amount, 155, 255));
    graphic[i].fill(cd);
    graphic[i].text(colorArray[2], width/2, height*4/5);

    push();
    translate(0, 0, i*10);
    rotateZ(-i*rad);
    texture(graphic[i]);
    plane(width-i*5, height-i*5);
    pop();
  }
}

f:id:taiga006:20200307154403j:plain

今週の作品メモ

今週のモチベ「なんだがWEBGL×テキストで作りたいな。」
ただp5.jsでwebglいじる方法、全然知らんな。ｰ>いい感じのドキュメントが見当たらず。（自分で書け？）
円柱を作ってその周りをテキストが螺旋状に巻き付いているようなイメージのものを作りたかったのだけれど、createGraphicsしたものからalphaでtext以外の部分を透過させる（通じるか？）的なのがどうもできず断念。（誰か助けて…）
それから今週の作品、とにかく重いです。
chromeがredraw()3回とかフリーズします。NEORTもframeRate(1)とかでもすぐに処理止まります。やはりコードが悪いのか…。
な～にがWebGL: CONTEXT_LOST_WEBGL: loseContext: context lostじゃ。
— Ayato (@dn0t_) 2020年3月7日
唯一の収穫は「あ、こういう作品でテキスト使いたいとき、カラーコードが一番それっぽく納まるし、著作権とか考えなくてよくて気分が楽だなあ」という点です。

今週の雑談

p5.js ver.1.0リリースノートの翻訳のお手伝いをしました。
世界中のすばらしいコントリビュータの方々が7年以上かけて、ともにオープンソースの p5 ライブラリとコミュニティを作り上げてきました。今日、遂に p5.js のバージョン 1.0 を公開します！
翻訳：@dn0t_ @deconbatch @reona396 @takawo 🙏https://t.co/cKAZB2p5IR
— p5.js (@p5xjs) 2020年3月3日
翻訳しながら「やっぱワールドワイド！規模感すごいなぁ」と感じる一方で、「いやいや、日本国内の活発さも負けたものではないなぁ」とも感じました。
特に、#つぶやきProcessing 界隈の盛り上がりは今後どんどん盛り上がっていくことが目に見えている。（今週、ついにあの麦さんも#つぶやきProcessingされてて驚いた。）
W=800,N=90,P=Array(9).fill([W/2,W/2,0,2]),setup=()=>{createCanvas(W,W),background(0)},draw=()=>{for([x,y,a,d]of(R=random,i=0,P))circle(x,y,.2),a%N||(d=R([-1,1])*R([1,2]),a+=(R()<.3)*R([-N,N])),r=radians(a),P[i++]=[x+2*cos(r),y+2*sin(r),a+d,d];stroke("pink")};//#つぶやきProcessing pic.twitter.com/0SKWGAhPmI
— Baku 麦 (@_baku89) 2020年2月29日
あとP5LIVEとか初めて知った。p5.jsのやたらかっこいいオンラインエディタ？ちょっと使ってみたい。（P5LIVE - Ted Davis のスクリーンショット）

今週は会社に新しいビルドマシンが設置されてまたJenkinsと格闘する日々でした。過去自分がなんとなくで書いたJenkinsの記事がこんなにも早く役立つとは！という感じです。ありがとう、自分。
足のしびれがひどくて病院に行ったら「ヘルニアか坐骨神経痛か」となって明日MRIを受けに行ってきます。

Continue(s)

Twitter:@dn0t_ GitHub:@ogrew

【週刊p5js】work06

今週の作品メモ

今週の雑談