showcase modifications

hanumanum · Mar 14, 2023 · a737f67 · a737f67
1 parent c25cb23
commit a737f67
Show file tree

Hide file tree

Showing 38 changed files with 344 additions and 108 deletions.
diff --git a/00-example-empty/index.html b/00-example-empty/index.html
@@ -14,6 +14,7 @@
     <script src="../aLib/shapes.js"></script>
     <script src="../aLib/structures.js"></script>
     <script src="sketch.js"></script>
+    <script src="../aLib/pagination.js"></script>
   </head>
   <body>
   </body>

diff --git a/aLib/osscilators.js b/aLib/osscilators.js
@@ -1,9 +1,9 @@
 function oscillate_linear(x1, y1, x2, y2, speed) {
-    //MATH referance: https://skysmart.ru/articles/mathematic/grafik-linejnoj-funkcii
-    let a = (y1 - y2) / (x1 - x2)
-    let b = y1 - a * x1
-    let iter = sin(frameCount / speed)
-    let newX = map(iter, -1, 1, x1, x2)
-    let newY = a * newX + b
-    ellipse(newX, newY, random(1,5))
-  }
+  //MATH referance: https://skysmart.ru/articles/mathematic/grafik-linejnoj-funkcii
+  let a = (y1 - y2) / (x1 - x2)
+  let b = y1 - a * x1
+  let iter = sin(frameCount / speed)
+  let newX = map(iter, -1, 1, x1, x2)
+  let newY = a * newX + b
+  ellipse(newX, newY, random(1, 5))
+}
diff --git a/aLib/pagination.js b/aLib/pagination.js
@@ -0,0 +1,119 @@
+const direction = document.location.host === "hanumanum.github.io" ? "/p5experiments/" : "";
+
+const pages = [
+    {
+        url: "art-cardioid",
+    },
+    {
+        url: "art-noize-rotating-fans",
+    }
+    ,
+    {
+        url: "art-constalation",
+    }
+    ,
+    {
+        url: "art-flower-of-life",
+    },
+    {
+        url: "art-arcs",
+    },
+    {
+        url: "art-arrows",
+    },
+    {
+        url: "art-artificial-alphabets"
+    },
+    {
+        url: "art-graph"
+    },
+    {
+        url: "art-infection"
+    },
+    {
+        url: "art-letter-flower"
+    }
+    ,
+    {
+        url: "art-letter-flowers"
+    }
+    ,
+    {
+        url: "art-oscilating-squares"
+    }
+    ,
+    {
+        url: "art-particles"
+    }
+    ,
+    {
+        url: "art-light-propagation"
+    }
+    ,
+    {
+        url: "art-psy-rect-blanding-modes"
+    }
+    ,
+    {
+        url: "art-text-circle-packing-edges"
+    }
+    ,
+    {
+        url: "art-text-entropy"
+    }
+    ,
+    {
+        url: "art-text-flow-fields"
+    }
+    /*
+    {
+        url: "art-floating-points"
+    }*/
+
+]
+
+
+const findCurrentIndex = () => {
+
+    const slug = document.location.pathname.split("/").filter((e) => e !== "").pop();
+    for (let i = 0; i < pages.length; i++) {
+        if (pages[i].url === slug) {
+            return i;
+        }
+    }
+    return -1;
+}
+
+
+window.onload = () => {
+    const currentIndex = findCurrentIndex();
+    if (currentIndex === -1) return
+    if (currentIndex > 0) {
+        const prev = document.createElement("div");
+        prev.id = "go-prev";
+        prev.innerHTML = "prev";
+        prev.onclick = () => {
+            document.location.assign(direction + "/" + pages[currentIndex - 1].url);
+        }
+
+        document.body.appendChild(prev);
+    }
+
+
+    if (currentIndex < pages.length - 1) {
+
+        const next = document.createElement("div");
+
+        next.id = "go-next";
+        next.innerHTML = "next";
+        next.onclick = () => {
+            console.log(pages[currentIndex + 1]);
+            document.location.assign(direction + "/" + pages[currentIndex + 1].url);
+        }
+
+        document.body.appendChild(next);
+    }
+
+}
+
+
diff --git a/art-arcs/index.html b/art-arcs/index.html
@@ -3,12 +3,15 @@
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="../sketches-style.css">
+    <link rel="stylesheet" href="style.css">
     <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
     <script src="../aLib/colors.js"></script>
     <script src="../aLib/math.js"></script>
     <script src="sketch.js"></script>
+    <script src="../aLib/pagination.js"></script>
   </head>
   <body>
+    <h1>Spinner</h1>
   </body>
 </html>
diff --git a/art-arcs/style.css b/art-arcs/style.css
@@ -0,0 +1,3 @@
+canvas{
+    cursor: pointer;
+}
diff --git a/art-arrows/index.html b/art-arrows/index.html
@@ -4,12 +4,13 @@
     <meta charset="utf-8">
     <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
     <link rel="stylesheet" href="../sketches-style.css">
-    <style> body {padding: 0; margin: 0;} </style>
+    <script src="../aLib/pagination.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
     <script src="../aLib/colors.js"></script>
     <script src="../aLib/math.js"></script>
     <script src="sketch.js"></script>
   </head>
   <body>
+    <h1>Attack !!!</h1>
   </body>
 </html>
diff --git a/art-artificial-alphabets/functions.js b/art-artificial-alphabets/functions.js
@@ -217,20 +217,24 @@ function drawLetterGrid(letterMatrix, x, y, fontSize) {
 
 
 function initFunctionChanger() {
-    let alphabetlists = document.getElementById("alphabet-functions-list")
+    let alphabetlists = document.createElement("ul")
+    alphabetlists.id = "alphabet-functions-list"
     for (let funct of functionsList) {
         let li = document.createElement("li")
-        li.innerHTML = funct.name.split("_")[1]
-        li.id = funct.name
+        li.innerHTML = funct.title
+        li.id = funct.title
         li.addEventListener("click", changeCurrentFunction)
         alphabetlists.append(li);
     }
 
 
+    const main = document.querySelectorAll("main")
+    main[0].append(alphabetlists)
+
     function changeCurrentFunction(e) {
         for (let f of functionsList) {
-            if (f.name == e.target.id) {
-                currentFunction = f
+            if (f.title == e.target.id) {
+                currentFunction = f.fn
             }
         }
     }

diff --git a/art-artificial-alphabets/index.html b/art-artificial-alphabets/index.html
@@ -4,14 +4,13 @@
   <meta charset="utf-8">
   <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
   <link rel="stylesheet" href="../sketches-style.css">
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
-  <ul id="alphabet-functions-list">
-  </ul>  
+  <h1>Artificial Alphabets and Chat Texting</h1>
   <script src="functions.js"></script>
   <script src="sketch.js"></script>
-
+  <script src="../aLib/pagination.js"></script>
 </body>
-
 </html>
diff --git a/art-artificial-alphabets/sketch.js b/art-artificial-alphabets/sketch.js
@@ -10,16 +10,20 @@ let chatX = 30
 let chatY = 0
 let chatCounter = 0
 
-let functionsList = [drawLetter_circles, drawLetter_circlesAndLines, drawLetter_lines]
-let currentFunction = functionsList[0]
-initFunctionChanger()
+let functionsList = [
+  { title: "first alphabet", fn: drawLetter_circlesAndLines },
+  { title: "second alphabet", fn: drawLetter_circles },
+  { title: "third alphabet", fn: drawLetter_lines }]
+let currentFunction = functionsList[0].fn
+
 
 function setup() {
-  createCanvas(win, 600)
+  createCanvas(1250, 600)
   strokeWeight(1)
   background("black")
   frameRate(30)
   alphabet = makeAlphabet(lettersCount)
+  initFunctionChanger()
 }
 
 function mouseClicked() {

diff --git a/art-artificial-alphabets/style.css b/art-artificial-alphabets/style.css
@@ -0,0 +1,13 @@
+ul li {
+    list-style-type: none;
+    cursor: pointer;
+    display: inline;
+    border: solid 1px rgb(210, 210, 210);
+    margin: 0 5px;
+    padding: 5px;
+}
+
+canvas {
+    cursor: pointer;
+}
+
diff --git a/art-cardioid/index.html b/art-cardioid/index.html
@@ -9,7 +9,9 @@
     <script src="../aLib/colors.js"></script>
     <script src="../aLib/shapes.js"></script>
     <script src="sketch.js"></script>
+    <script src="../aLib/pagination.js"></script>
   </head>
   <body>
+    <h1>Cardioid</h1>
   </body>
 </html>
diff --git a/art-constalation/index.html b/art-constalation/index.html
@@ -4,14 +4,17 @@
     <meta charset="utf-8">
     <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
     <link rel="stylesheet" href="../sketches-style.css">
+    <link rel="stylesheet" href="style.css">
     <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
     <script src="../aLib/math.js"></script>
     <script src="../aLib/colors.js"></script>
     <script src="../aLib/texts.js"></script>
     <script src="../aLib/shapes.js"></script>
     <script src="../aLib/structures.js"></script>
     <script src="sketch.js"></script>
+    <script src="../aLib/pagination.js"></script>
   </head>
   <body>
+    <h1>Random Constalation</h1>
   </body>
 </html>
diff --git a/art-constalation/sketch.js b/art-constalation/sketch.js
@@ -1,5 +1,5 @@
-let w = window.innerWidth
-let h = window.innerHeight
+const w = window.innerWidth - 200
+const h = window.innerHeight - 190
 let xs = []
 let ys = []
 let xsM = []
@@ -12,6 +12,10 @@ let padding = 50
 function setup() {
   createCanvas(w, h)
   background("black")
+  makeStars()
+}
+
+function makeStars() {
   xs = getRandomsArray(count, padding, w - padding)
   ys = getRandomsArray(count, padding, h - padding)
 
@@ -38,6 +42,8 @@ function draw() {
       }
     }
   }
+}
 
-  //noLoop()
+function mouseClicked() {
+  makeStars()
 }
diff --git a/art-constalation/style.css b/art-constalation/style.css
@@ -0,0 +1,3 @@
+canvas{
+    cursor: pointer;
+}
diff --git a/art-floating-points/index.html b/art-floating-points/index.html
@@ -10,7 +10,9 @@
     <script src="../aLib/texts.js"></script>
     <script src="../aLib/shapes.js"></script>
     <script src="sketch.js"></script>
+    <script src="../aLib/pagination.js"></script>
   </head>
   <body>
+    <h1>adsfasd</h1>
   </body>
 </html>
diff --git a/art-flower-of-life/index.html b/art-flower-of-life/index.html
@@ -1,10 +1,16 @@
+<!DOCTYPE html>
 <html>
-  <head>
-    <title>Flower of Life</title>
-    <link rel="stylesheet" href="../sketches-style.css">
-  </head>
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
-    <script src="script.js"></script>
-  </body>
+
+<head>
+  <title>Flower of Life</title>
+  <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
+  <link rel="stylesheet" href="../sketches-style.css">
+  <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
+  <script src="scetch.js"></script>
+  <script src="../aLib/pagination.js"></script>
+</head>
+<body>
+  <h1>Flower Of Life</h1>
+</body>
+
 </html>
diff --git a/art-flower-of-life/script.js → art-flower-of-life/scetch.js b/art-flower-of-life/script.js → art-flower-of-life/scetch.js
@@ -4,7 +4,7 @@ const X = CANVAS_WIDTH/2
 const Y = CANVAS_HEIGHT/2
 const R = 100
 const ITERATIONS = 12
-const FRAME_RATE = 5
+const FRAME_RATE = 7
 const STROKE_COLOR = "yellow"
 const STROKE_WEIGHT = 2
 
@@ -27,8 +27,6 @@ function setup() {
 function draw() {
   background("black");
 
-  //console.log(points)
-
   for(let i = 0; i<points.length; i++){
     circle(points[i].x, points[i].y, R);
   }