add works

mits003 · Nov 1, 2023 · 98fd526 · 98fd526
1 parent aaa8b31
commit 98fd526
Show file tree

Hide file tree

Showing 14 changed files with 273 additions and 0 deletions.
diff --git a/works/20231025/README.md b/works/20231025/README.md
@@ -0,0 +1,4 @@
+# memo
+Reference: 
+
+<img src="img/image01.png">
diff --git a/works/20231025/css/style.css b/works/20231025/css/style.css
@@ -0,0 +1,7 @@
+html, body {
+    margin: 0;
+    padding: 0;
+  }
+  canvas {
+    display: block;
+  }
diff --git a/works/20231025/img/image_1809.png b/works/20231025/img/image_1809.png
diff --git a/works/20231025/img/image_608.png b/works/20231025/img/image_608.png
diff --git a/works/20231025/img/image_74.png b/works/20231025/img/image_74.png
diff --git a/works/20231025/index.html b/works/20231025/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+    <script src="js/sketch.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/works/20231025/js/sketch.js b/works/20231025/js/sketch.js
@@ -0,0 +1,117 @@
+// カラーパレット
+let cp1 = ["#264653", "#2a9d8f", "#e9c46a", "#f4a261", "#e76f51"];
+let cp2 = ["#8ecae6", "#219ebc", "#023047", "#ffb703", "#fb8500"];
+let cp3 = ["#390099", "#9e0059", "#ff0054", "#ff5400", "#ffbd00"];
+let cp4 = ["#a31621", "#bfdbf7", "#053c5e", "#1f7a8c", "#db222a"];
+let colorPalletes = [cp1, cp2, cp3, cp4];
+let colors;
+
+let seed = 2000;
+let rSeed;
+
+let cr;
+let sW;
+let x, y;
+
+// let cells_in = 12;
+// let cells_out = cells_in + 1;
+// let figuresNum = cells_in ** 2 + cells_out ** 2;
+let figures = [];
+
+function setup() {
+  WIDTH = 600;
+  HEIGHT = WIDTH;
+  let canvas = createCanvas(WIDTH, HEIGHT);
+  background("#f7f7f7");
+  colors = random(colorPalletes);
+  angleMode(DEGREES);
+  rSeed = int(random(seed));
+  randomSeed(rSeed);
+  // noiseSeed(rSeed);
+
+  sW = 5;
+
+  // let cells_in = floor(random(3, 10)) + 1;
+  let cells_in = 12;
+  let cells_out = cells_in + 1;
+  let figuresNum = (cells_in + 1) ** 2 + (cells_out + 1) ** 2;
+
+  let offset = width;
+
+  let w = (width - offset * 2) / cells_out;
+  let h = (height - offset * 2) / cells_out;
+
+  cr = -w / 2;
+
+  for (let i = 0; i < figuresNum; i++) {
+    figures.push(new Figure());
+  }
+
+  let num = 0;
+  for (let j = -1; j < cells_out; j++) {
+    for (let i = -1; i < cells_out; i++) {
+      let x = offset + i * w;
+      let y = offset + j * h;
+      let cx = x + w;
+      let cy = y + h;
+      push();
+      translate(cx, cy);
+      figures[num].render();
+      num += 1;
+      pop();
+    }
+  }
+  for (let j = -1; j < cells_in; j++) {
+    for (let i = -1; i < cells_in; i++) {
+      let x = offset + i * w;
+      let y = offset + j * h;
+      let cx = x + w;
+      let cy = y + h;
+      push();
+      translate(cx + w / 2, cy + h / 2);
+      figures[num].render();
+      num += 1;
+      pop();
+    }
+  }
+}
+
+class Figure {
+  render() {
+    noFill();
+    let a = random();
+    let c = random(colors);
+    stroke(c);
+    for (let i = 0; i < cr; i += cr / sW / 10) {
+      for (let a = 0; a < 360; a++) {
+        if (
+          noise(a * 0.25) + random(sW / 3, (sW / 3) * 2) / 2 <
+          sW / 6 + 0.85
+        ) {
+          strokeWeight(0);
+        } else {
+          strokeWeight(noise(a * 0.25) + random(sW / 3, (sW / 3) * 2) / 2);
+        }
+        line(
+          cos(a) * (cr - i),
+          sin(a) * (cr - i),
+          cos(a + 1) * (cr - i),
+          sin(a + 1) * (cr - i)
+        );
+      }
+    }
+  }
+}
+
+function mouseClicked() {
+  // saveCanvas(canvas, 'myCanvas', 'png');
+  window.location.reload();
+}
+
+function keyPressed() {
+  if (key == "s") {
+    var scripts = document.getElementsByTagName("sketch").src;
+    console.log(scripts);
+    saveCanvas(canvas, "image_" + rSeed, "png");
+  }
+}
diff --git a/works/20231101/README.md b/works/20231101/README.md
@@ -0,0 +1,4 @@
+# memo
+Reference: 
+
+<img src="img/image01.png">
diff --git a/works/20231101/css/style.css b/works/20231101/css/style.css
@@ -0,0 +1,7 @@
+html, body {
+    margin: 0;
+    padding: 0;
+  }
+  canvas {
+    display: block;
+  }
diff --git a/works/20231101/img/image_1934.png b/works/20231101/img/image_1934.png
diff --git a/works/20231101/img/image_31.png b/works/20231101/img/image_31.png
diff --git a/works/20231101/img/image_388.png b/works/20231101/img/image_388.png
diff --git a/works/20231101/index.html b/works/20231101/index.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+    <script src="js/sketch.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/works/20231101/js/sketch.js b/works/20231101/js/sketch.js
@@ -0,0 +1,118 @@
+// ref https://openprocessing.org/sketch/1251771 by takawo
+// ref https://openprocessing.org/sketch/1828929 by takawo
+// カラーパレット
+let cp1 = ["#264653", "#2a9d8f", "#e9c46a", "#f4a261", "#e76f51"];
+let cp2 = ["#8ecae6", "#219ebc", "#023047", "#ffb703", "#fb8500"];
+let cp3 = ["#390099", "#9e0059", "#ff0054", "#ff5400", "#ffbd00"];
+let cp4 = ["#a31621", "#bfdbf7", "#053c5e", "#1f7a8c", "#db222a"];
+let colorPalette = [cp1, cp2, cp3, cp4];
+let colors;
+
+let seed = 2000;
+let rSeed;
+
+let sqr;
+
+function setup() {
+  // キャンバスサイズの設定
+  let canvas = createCanvas(600, 600);
+
+  rectMode(CENTER);
+  // 背景色を指定
+  background("#f7f7f7");
+
+  rSeed = int(random(seed));
+  console.log(rSeed);
+  randomSeed(rSeed);
+  noiseSeed(rSeed);
+  colors = random(colorPalette);
+  strokeWeight(0.1);
+
+  // sqr = new Sqr(width, width, 0, 0, colors);
+
+  noLoop();
+}
+
+function draw() {
+  push();
+  translate(width / 2, height / 2);
+  for (let i = 0; i < 5; i++) {
+    sqr = new Sqr(width, width, 0, 0, colors[i]);
+    sqr.createChildren();
+    sqr.show();
+  }
+  pop();
+}
+
+class Sqr {
+  constructor(w, wParent, xParent, yParent, color) {
+    this.w = w;
+    this.wParent = wParent;
+    this.xParent = xParent;
+    this.yParent = yParent;
+
+    this.x = random(-wParent / 2 + w / 2, wParent / 2 - w / 2);
+    this.y = random(-wParent / 2 + w / 2, wParent / 2 - w / 2);
+
+    this.color = color;
+    this.children = [];
+  }
+
+  createChildren() {
+    if (this.w > 20) {
+      for (let i = 0; i < 800; i++) {
+        // let color = random(colors);
+        let sqr = new Sqr(
+          this.w * random(0.1, 0.5),
+          this.w,
+          this.x,
+          this.y,
+          this.color,
+          this.layer + 1
+        );
+
+        if (i == 0) {
+          this.children.push(sqr);
+        } else {
+          for (let j = 0; j < this.children.length; j++) {
+            if (
+              abs(sqr.x - this.children[j].x) <
+                sqr.w / 2 + this.children[j].w / 2 &&
+              abs(sqr.y - this.children[j].y) <
+                sqr.w / 2 + this.children[j].w / 2
+            ) {
+              break;
+            } else if (j === this.children.length - 1) {
+              this.children.push(sqr);
+            }
+          }
+        }
+      }
+    }
+  }
+  show() {
+    stroke(this.color);
+
+    noFill();
+    rect(this.x, this.y, this.w, this.w, this.w / 20);
+    for (let i = 0; i < this.children.length; i++) {
+      push();
+      translate(this.xParent, this.yParent);
+      this.children[i].createChildren();
+      this.children[i].show();
+      pop();
+    }
+  }
+}
+
+function mouseClicked() {
+  window.location.reload();
+}
+
+function keyPressed() {
+  if (key == "s") {
+    var scripts = document.getElementsByTagName("sketch").src;
+    console.log(scripts);
+    saveCanvas(canvas, "image_" + rSeed, "png");
+  }
+}