こんにちは、たやち(tayati369)です。
p5.jsでコーディングしています。
PCD@Tokyoさんの「デイリーコーディングチャレンジ」!!に素人極まりない私も参加しております。
毎日できるかわからないけれど、リモートワークのこのご時世、通勤分の時間があるでチャレンジしていきます。(デイリーとはw)
9日目のテーマは「研究所」。
研究といえば、マウス。たくさんのマウスが逃げだしたようなイメージを表現しています。
実際にマウスをp5.js で表現するのは、かなり手こずりました。。。しかも、現状ロジカルに形作れているわけではなく。。感覚的な図形の配置から1匹のマウスを作り出しています。
これをもう少しロジカルに作れる案があれば教えて下さい。。Twitterとかにご連絡いただけると嬉しいです!!
では、ごらんあれ〜。
var x = 0; var y = 0; var r = 50; var num = 6.3; var vnum =2; var x2; var y2; var px; var py; let mouses = []; function setup(){ createCanvas(500,500); background(255); frameRate(3); for (var i = 0; i < vnum; i++) { mouses[i] = new Mouse; } // noLoop(); } function draw(){ // push(); translate(random(-width/2,width/2),random(-height/2,height/2)); for (var i = 0; i < vnum; i++) { mouses[i].show(); } // pop(); } class Mouse { show() { var w = width/2; var h = height/2; push(); fill(190); noStroke(); beginShape(); for (var i = 0; i < num; i+= 0.1) { if (i < num/2) { x = w + 2 * r * cos(-i); y = h + 1.5 * r * sin(-i); vertex(x,y); } else { x = w + 2 * r * cos(-i); y = h + r *sin(-i); vertex(x,y); } } endShape(CLOSE); pop(); fill(0); circle(x ,y, r/2); line(x - 2*width/5, y, 120, 230); for (var i = 0; i < 3; i++) { strokeWeight(1); line(x,y,x -30 ,y + i*8); line(x,y,x +30 ,y - i*8); } noFill(); push(); translate(-50,-20); fill(0); beginShape(); for (var i = 0; i < num; i+= 0.1) { x = x + cos(-i)/2; y = y + 1.2*sin(-i); vertex(x,y); } endShape(CLOSE); pop(); push(); translate(-25,-20); fill(0); beginShape(); for (var i = 0; i < 6.3; i+= 0.1) { x = x + cos(-i)/2; y = y + 1.2*sin(-i); vertex(x,y); } endShape(CLOSE); pop(); push(); translate(-90,-40); noStroke(); fill(200); beginShape(); for (var i = 0; i < 6.3; i+= 0.1) { x = x + 2*cos(-i); y = y + 2.3*sin(-i); vertex(x,y); } endShape(CLOSE); pop(); push(); translate(-50,-50); noStroke(); fill(180); beginShape(); for (var i = 0; i < 6.3; i+= 0.1) { x = x + 1.5*cos(-i); y = y + 2*sin(-i); vertex(x,y); } endShape(CLOSE); pop(); } }
ではでは、さようなら〜〜〜。
なにかあればTwitterまで。
コメント