【p5js/プログラミング】黒。

Art

こんにちは、たやち（tayati369）です。

p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」！！に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。（デイリーとはｗ）

８日目のテーマは「黒」。

はじめ、GANTZの黒い球体を思い浮かべて、３Dの真っ黒な球体を作ったのですが、面白みがほしいなと思い、それをふにゃと変形させて動かせたらなと思いました。
そこで、noise関数を利用して、やってみようと色々挑戦してみましたが、なかなかうまく行かず。
↓うまく行かなかったときの画像

そこで、YouTubeで「Coding Train」の動画を調べていると、ちょうど私がやりたかったことが動画にあったのです！！！歓喜！！ダニエルさん本当にありがとう。勉強になりました。
２Dですが、ひゅにゃっとした黒い球体がふわふわ浮かんでいる。まさにイメージしていたものでした。
→動画はこちら
では、ごらんあれ〜。

const w = 200;
const noiseMax =1.4;
var xoff;
var yoff;
var zoff = 0;
var x1 = 0;
var y1 = 0;
var r;

function setup(){
  createCanvas(500,500);
  // noLoop();
}

function draw(){
  background(255);
  noStroke();
  fill(0);
  beginShape();
  for (var i = 0; i <= 360; i += 0.01) {
    xoff = map(cos(i),-1,1,0,noiseMax)
    yoff = map(sin(i),-1,1,0,noiseMax)
    r = map(noise(xoff,yoff,zoff),0,1,100,150)
    x1 = width/2  + r  * cos(i);
    y1 = height/2 + r  * sin(i);
    vertex(x1,y1);
  }
  endShape(CLOSE);
  zoff += 0.03;
}

ではでは、さようなら〜〜〜。

なにかあればTwitterまで。

コメント