refactor(Pattern.js): optimize ellipse drawing in Pattern class by re…

…moving duplicate calls feat(Pattern.js): increase canvas size in Pattern class to improve pattern resolution and appearance feat(Pattern.js): add isOdd method to Pattern class to determine odd numbers for ellipse positioning feat(Pattern.js): adjust ellipse positioning in Pattern class to create a more visually appealing pattern feat(index.html): update script src path in index.html for better file referencing feat(sketch.js): increase max angle value to 180 in sketch.js for smoother animation rotation
annoyingmouse · Nov 25, 2024 · 9a33b26 · 9a33b26
1 parent 015f9c8
commit 9a33b26
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/000-MISCELLANEOUS/AMI/Pattern.js b/000-MISCELLANEOUS/AMI/Pattern.js
@@ -16,7 +16,6 @@ export class Pattern {
     for (let x = 0; x < 10; x++) {
       for (let y = 0; y < 10; y++) {
         this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
-        this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
       }
     }
     this.patternCnv.noFill();

diff --git a/000-MISCELLANEOUS/AMI_ALTERED_PATTERN/Pattern.js b/000-MISCELLANEOUS/AMI_ALTERED_PATTERN/Pattern.js
@@ -2,27 +2,31 @@ export class Pattern {
   constructor(p5, width, height, colour) {
     this.p5 = p5;
     this.colour = colour;
-    this.patternCnv = p5.createGraphics(100, 100);
+    this.patternCnv = p5.createGraphics(500, 100);
     this.bufferCnv = p5.createGraphics(width, height);
     this.pattern = null;
   }
+  isOdd = (num) => num % 2;
   getPattern = () => {
     this.p5.pixelDensity(1);
     this.patternCnv.pixelDensity(1);
     this.bufferCnv.pixelDensity(1);
     // Draw a pattern
     this.patternCnv.fill(this.colour);
     this.patternCnv.noStroke();
-    for (let x = 0; x < 10; x++) {
+    for (let x = 0; x < 50; x++) {
       for (let y = 0; y < 10; y++) {
-        this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
-        this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
+        this.patternCnv.ellipse(
+          x * 10 + (this.isOdd(y) ? 7.5 : 2.5),
+          y * 10 + 5,
+          5,
+        );
       }
     }
     this.patternCnv.noFill();
     this.patternCnv.stroke(0, 0, 0);
     this.patternCnv.strokeWeight(1);
-    // patternCnv.rect(0,0,100,100)
+    // this.patternCnv.rect(0,0,500,100)
     this.pattern = this.setupPattern();
     this.setFill();
     this.bufferCnv.noStroke();

diff --git a/000-MISCELLANEOUS/AM_ALTERED_PATTERN/Pattern.js b/000-MISCELLANEOUS/AM_ALTERED_PATTERN/Pattern.js
@@ -2,27 +2,31 @@ export class Pattern {
   constructor(p5, width, height, colour) {
     this.p5 = p5;
     this.colour = colour;
-    this.patternCnv = p5.createGraphics(100, 100);
+    this.patternCnv = p5.createGraphics(500, 100);
     this.bufferCnv = p5.createGraphics(width, height);
     this.pattern = null;
   }
+  isOdd = (num) => num % 2;
   getPattern = () => {
     this.p5.pixelDensity(1);
     this.patternCnv.pixelDensity(1);
     this.bufferCnv.pixelDensity(1);
     // Draw a pattern
     this.patternCnv.fill(this.colour);
     this.patternCnv.noStroke();
-    for (let x = 0; x < 10; x++) {
+    for (let x = 0; x < 50; x++) {
       for (let y = 0; y < 10; y++) {
-        this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
-        this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
+        this.patternCnv.ellipse(
+          x * 10 + (this.isOdd(y) ? 7.5 : 2.5),
+          y * 10 + 5,
+          5,
+        );
       }
     }
     this.patternCnv.noFill();
     this.patternCnv.stroke(0, 0, 0);
     this.patternCnv.strokeWeight(1);
-    // patternCnv.rect(0,0,100,100)
+    // this.patternCnv.rect(0,0,100,100)
     this.pattern = this.setupPattern();
     this.setFill();
     this.bufferCnv.noStroke();

diff --git a/000-MISCELLANEOUS/AM_ALTERED_PATTERN/index.html b/000-MISCELLANEOUS/AM_ALTERED_PATTERN/index.html
@@ -11,6 +11,6 @@
     </style>
   </head>
   <body>
-    <script type="module" src="./sketch.js"></script>
+    <script type="module" src="sketch.js"></script>
   </body>
 </html>
diff --git a/000-MISCELLANEOUS/AM_ALTERED_PATTERN/sketch.js b/000-MISCELLANEOUS/AM_ALTERED_PATTERN/sketch.js
@@ -54,7 +54,7 @@ new p5((p5) => {
     const input = document.createElement("input");
     input.setAttribute("type", "range");
     input.setAttribute("min", 0);
-    input.setAttribute("max", 90);
+    input.setAttribute("max", 180);
     input.setAttribute("value", layers[1].angle);
     input.setAttribute("name", `angle`);
     input.addEventListener("input", reset);
@@ -92,7 +92,7 @@ new p5((p5) => {
     p5.background(255);
     if (animate) {
       layers[1].angle += 0.1;
-      if (layers[1].angle > 90) layers[1].angle = 0;
+      if (layers[1].angle > 180) layers[1].angle = 0;
     }
     layers.forEach((layer) => {
       rotate_and_draw(layer.layer, layer.angle, 0, 0);

diff --git a/000-MISCELLANEOUS/AM_SIMPLE/Pattern.js b/000-MISCELLANEOUS/AM_SIMPLE/Pattern.js
@@ -16,7 +16,6 @@ export class Pattern {
     for (let x = 0; x < 10; x++) {
       for (let y = 0; y < 10; y++) {
         this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
-        this.patternCnv.ellipse(x * 10 + 5, y * 10 + 5, 5);
       }
     }
     this.patternCnv.noFill();