add an artwork

Mitsuha Miyake · Mitsuha Miyake · commit 96f862241398 · 2024-07-30T22:20:54.000+09:00
diff --git a/works/20240609/README.md b/works/20240609/README.md
@@ -0,0 +1,4 @@
+# memo
+Reference: 
+
+<img src="img/image01.png">
diff --git a/works/20240609/css/style.css b/works/20240609/css/style.css
@@ -0,0 +1,7 @@
+html, body {
+    margin: 0;
+    padding: 0;
+  }
+  canvas {
+    display: block;
+  }
diff --git a/works/20240609/index.html b/works/20240609/index.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.js"></script>
+    <script src="https://unpkg.com/p5.js-svg@1.5.1"></script>
+    <script src="js/sketch.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/works/20240609/js/sketch.js b/works/20240609/js/sketch.js
@@ -0,0 +1,69 @@
+// カラーパレット
+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 seed = 3000;
+let rSeed;
+
+function setup() {
+  // キャンバスサイズの設定
+  let canvas = createCanvas(windowWidth, windowHeight);
+  let colors = random(colorPalette);
+  let bg = random(colors);
+  background(bg);
+
+  rSeed = int(random(seed));
+  console.log(rSeed);
+  randomSeed(rSeed);
+  noiseSeed(rSeed);
+  angleMode(DEGREES);
+
+  noStroke();
+  for (let i = 0; i < 10; i++) {
+    fill(random(colors));
+    ellipse(width / 2, height / 2, random(200, min(windowHeight, windowWidth)));
+  }
+
+  strokeWeight(1);
+  stroke(bg);
+
+  // 格子模様
+  let n = 100;
+  let w = width / n;
+  let a = 120;
+  for (let j = -n; j <= n; j++) {
+    let sx = w * j;
+    let sy = 0;
+    let ex = width + w * j;
+    let ey = height * sin(60);
+    line(sx, sy, ex, ey);
+  }
+  for (let j = -n; j <= n; j++) {
+    let sx = width + w * j;
+    let sy = 0;
+    let ex = w * j;
+    let ey = height * sin(60);
+    line(sx, sy, ex, ey);
+  }
+}
+
+function mouseClicked() {
+  window.location.reload();
+}
+
+function keyPressed() {
+  if (key == "s") {
+    var scripts = document.getElementsByTagName("sketch").src;
+    console.log(scripts);
+    // saveCanvas(canvas, 'image_'+rSeed, 'svg');
+    save("image_" + rSeed + ".svg");
+  }
+  if (key == "p") {
+    var scripts = document.getElementsByTagName("sketch").src;
+    console.log(scripts);
+    save("image_" + rSeed + ".png");
+  }
+}
diff --git a/works/20240730/README.md b/works/20240730/README.md
@@ -0,0 +1,4 @@
+# memo
+Reference: 
+
+<img src="img/image01.png">
diff --git a/works/20240730/css/style.css b/works/20240730/css/style.css
@@ -0,0 +1,7 @@
+html, body {
+    margin: 0;
+    padding: 0;
+  }
+  canvas {
+    display: block;
+  }
diff --git a/works/20240730/img/image_1275.png b/works/20240730/img/image_1275.png
diff --git a/works/20240730/img/image_1361.png b/works/20240730/img/image_1361.png
diff --git a/works/20240730/img/image_660.png b/works/20240730/img/image_660.png
diff --git a/works/20240730/index.html b/works/20240730/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/20240730/js/sketch.js b/works/20240730/js/sketch.js
@@ -0,0 +1,80 @@
+// カラーパレット
+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 seed = 2000;
+let rSeed;
+
+let start = 100;
+
+function setup() {
+  // キャンバスサイズの設定
+  let canvas = createCanvas(600, 600);
+
+  angleMode(DEGREES);
+
+  noiseDetail(2, 1);
+
+  rSeed = int(random(seed));
+  console.log(rSeed);
+  randomSeed(rSeed);
+  noiseSeed(rSeed);
+  let colors = random(colorPalette);
+}
+
+function draw() {
+  background(30);
+  noStroke();
+
+  translate(width / 2, height / 2);
+
+  let space = 0.1;
+  for (let i = 0; i < 360; i += space) {
+    let xoff = map(cos(i), -1, 1, 0, 3);
+    let yoff = map(sin(i), -1, 1, 0, 3);
+
+    let n = noise(xoff + start, yoff + start);
+    let h = map(n, 0, 1, -300, 300);
+
+    // blue and purple base
+    // let r = map(sin(i), -1, 1, 100, 200);
+    // let g = map(h, -150, 150, 0, 150);
+    // let b = map(n, 0, 1, 150, 255);
+
+    // pink and yello base
+    // let b = map(sin(i), -1, 1, 100, 200);
+    // let g = map(h, -150, 150, 0, 150);
+    // let r = map(n, 0, 1, 150, 255);
+
+    // yellow and red base
+    // let g = map(sin(i), -1, 1, 100, 200);
+    // let b = map(h, -150, 150, 0, 150);
+    // let r = map(n, 0, 1, 150, 255);
+
+    // yellow and red base
+    let g = map(sin(i), -1, 1, 100, 200);
+    let r = map(h, -150, 150, 0, 150);
+    let b = map(n, 0, 1, 150, 255);
+
+    rotate(space);
+    fill(r, g, b);
+    rect(0, 0, h, 1);
+  }
+
+  // start += 0.01
+}
+
+function mouseClicked() {
+  window.location.reload();
+}
+
+function keyPressed() {
+  if (key == "s") {
+    var scripts = document.getElementsByTagName("sketch").src;
+    console.log(scripts);
+    saveCanvas(canvas, "image_" + rSeed, "png");
+  }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +# memo
 +Reference:
++
 +<img src="img/image01.png">