ユー

情報系大学に通う大学生です。趣味でジェネラティブアートをやっています。

ユー

情報系大学に通う大学生です。趣味でジェネラティブアートをやっています。

p5.jsでドロネー三角形分割(ざっくり解説)

正方形分割や、正六角形分割に飽きた皆さんこんにちは。 今日は、aadebdeb(@aa_debdeb)さんが書かれていたドロネー三角形分割の記事に掲載されているコードとこの記事(以下①と書く)を基にざっくりとした解説をしてみようと思います。厳密な解説ではないかもですが、そこは大目にみてください...　間違っている部分がありましたら御指摘いただけると幸いです。 ドロネー三角形分割のアルゴリズム①によると、 STEP1.外部三角形を作り、その頂点の 1 つを開始点とする（こ

ユー

    • Daily Coding(p5.js) No.21

      Codelet st;function setup() { createCanvas(500, 500); noLoop(); }function draw() { background(0); stroke(254,204,204,100); //stroke(204,255,255,100); strokeWeight(3); line(width/2, 0, width/2, height); //stroke(204,255,2

      ユー

      • Daily Coding(p5.js) No.20

        ステンドガラス感がありますね Codelet off = 50;let w = 460/2;let h = 460/2;let wid = 460/9;function setup() { createCanvas(460, 460); noLoop();}function draw() { background(230); for(let i = 0; i < 25; i++) { Line(wid*int(random(1,7)),wid

        ユー

        • Daily Coding(p5.js) No.19

          Codefunction setup() { createCanvas(500, 500); noLoop();}function draw() { background(40); Arc(0, 0, width);}function mousePressed() { redraw();}function Arc(x, y, s) { let c = int(random(2,5)); let ss = s / c; for(let

          ユー

        p5.jsでドロネー三角形分割(ざっくり解説)

        ユー

          Daily Coding(p5.js) No.18

          こんにちは。今日も昨日のアレンジをやってみました。 ・再帰的に分割 ・バラバラに並べる ・まとめて回転 Codelet width = 600;let height = 600;let off = 100;let col = [];function setup() { createCanvas(600,600); noLoop(); col.push(color(85,0,0)); col.push(color(84,84,0)); col.pus

          ユー

          Daily Coding(p5.js) No.18

          ユー

          Daily Coding No.17

          こんばんは。今日も昨日に続いてvera Molnarの(Dés)Ordresを参考に描いてみました。 Codelet width = 500;let height = 500;let widthcount = 13;let heightcount = 13;let off = 100;let sqwidth = (width - off) / widthcount;let sqheight = (height - off) / heightcount;let c = [];

          ユー

          Daily Coding No.17

          ユー

          Daily Coding(p5.js) No.16

          おはようございます。 今日から大学が始まったので、少し時間が取りにくくなり進捗は進みづらくなるとは思うのですが、できる限り毎日続けていきたいと思います💪 Codelet width = 500;let height = 500;let widthcount = 17;let heightcount = 17;let sqwidth = (width - 100) / widthcount;let sqheight = (height - 100) / heightcoun

          ユー

          Daily Coding(p5.js) No.16

          ユー

          Daily Coding(p5.js) No.15

          こんばんは。今日はなんかめでたそうなスケッチを描いてみました。 Codevar circles = [];var minRadius = 5;var maxRadius = 30;var freeze = false;function setup() { createCanvas(500, 500); noFill();}function draw() { background(255); fill(68,153,57); rect(50,50,width-100,heig

          ユー

          Daily Coding(p5.js) No.15

          ユー

          Daily Coding(p5.js) No.14

          こんばんは。今日でnoteにDaily Codingを投稿し始めてから、2週間が経過しました。この調子でガンガン投稿していきたいと思います〜💪 Codefunction setup() { createCanvas(500, 500); noLoop();}function draw() { background(255); stroke(128,128,128,240); strokeCap(SQUARE); rasen(width/2, h

          ユー

          Daily Coding(p5.js) No.14

          ユー

          Daily Coding(p5.js) No.13

          おはようございます。 Codelet x = [];let y = [];function setup() { createCanvas(700, 560); noLoop(); for(let i = 1; i < 4; i++) { x.push(i * 180); } for(let i = 0; i < 4; i++) { y.push(i * 150); }}function draw() { backgroun

          ユー

          Daily Coding(p5.js) No.13

          ユー

          Daily Coding(p5.js) No.12

          こんにちは。今日もモアレっぽいのをやっていきます。 Codelet drawMode = 1; // 1 or 2let rowOffset = 40;let lineOffset = 20; function setup() { createCanvas(700, 560); noLoop();}function draw(){ background(255); //縦線 if(drawMode == 1) { //1枚目のレイヤー

          ユー

          Daily Coding(p5.js) No.12

          ユー

          Daily Coding(p5.js) No.11

          こんばんは。今日はモアレを用いた絵を描いてみました。 Codevar count = 20000;var x = []; //点のx座標var y = []; //点のy座標var rad = []; //点の大きさvar alp = []; //点の濃さvar angle = 0; //上に重ねるレイヤーの回転角度 //var scaling = 0; //上に重ねるレイヤーの大きさfunction setup() { createCanvas(700, 54

          ユー

          Daily Coding(p5.js) No.11

          ユー

          Daily Coding(p5.js) No.10

          こんばんは。今日も引き続き規則的に並べるシリーズでやっていきます。 以前に多角形を回転させて描くっていうのはやったことがあるのですが、なんか図形を回転させて描いている感があって(その通りなんですが)、これを消したいと思って今回の絵を描いてみました。(今回は長方形を回転) Codevar count = 0;var tileCountX = 6;var tileCountY = 6;function setup() { createCanvas(700, 540); rec

          ユー

          Daily Coding(p5.js) No.10

          ユー

          Daily Coding(p5.js) その9

          おはようございます。今日もグリッドを使って色々描いてみました。 Codevar tileCount = 30;var moduleColor;var moduleAlpha = 180;var maxDistance = 400;function setup() { createCanvas(500, 500); strokeWeight(3); rectMode(CENTER); moduleColor = color(200, 0, 0, moduleAlpha);}f

          ユー

          Daily Coding(p5.js) その9

          ユー

          Daily Coding(p5.js) その8

          こんばんは。今日はGenerative Designを参考に作ったみました。 今回作ったものはこちら Codevar tileCount = 30;var actRandomSeed = 0;var actStrokeCap;var colorLeft;var colorRight;var colorFlat;var alphaLeft = 255;var alphaRight = 255;var alphaFlat = 255;function setup() { cr

          ユー

          Daily Coding(p5.js) その8

          ユー

          Daily Coding(p5.js)その7

          おはようございます。気づいたら今日でDaily Codingを始めてから1週間が経っていました。あっという間ですね。 今は冬休みなので時間を気にせず楽しく続けられています。学校が始まったら、空いている時間の一番最初にprocessingをやるのがいいかなと思っています。空いている時間の一番最後にやると結局やらなそうな気がするんですよね... 今日作ったものがこちら Codelet hueValues = [];let saturationValues = [];let

          ユー

          Daily Coding(p5.js)その7

          ユー