diff --git a/00-example-empty/index.html b/00-example-empty/index.html index e293be9..84bd945 100644 --- a/00-example-empty/index.html +++ b/00-example-empty/index.html @@ -14,6 +14,7 @@ + diff --git a/aLib/osscilators.js b/aLib/osscilators.js index 589b05b..4d51dae 100644 --- 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)) - } \ No newline at end of file + //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)) +} \ No newline at end of file diff --git a/aLib/pagination.js b/aLib/pagination.js new file mode 100644 index 0000000..2fdaf74 --- /dev/null +++ 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 index bcbe386..49ddfe7 100644 --- a/art-arcs/index.html +++ b/art-arcs/index.html @@ -3,12 +3,15 @@ + + +

Spinner

diff --git a/art-arcs/style.css b/art-arcs/style.css new file mode 100644 index 0000000..427c7dd --- /dev/null +++ b/art-arcs/style.css @@ -0,0 +1,3 @@ +canvas{ + cursor: pointer; +} \ No newline at end of file diff --git a/art-arrows/index.html b/art-arrows/index.html index b83c82d..d958119 100644 --- a/art-arrows/index.html +++ b/art-arrows/index.html @@ -4,12 +4,13 @@ - + +

Attack !!!

diff --git a/art-artificial-alphabets/functions.js b/art-artificial-alphabets/functions.js index bdc3099..7cb8a2b 100644 --- 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 index d002c93..dfdc885 100644 --- a/art-artificial-alphabets/index.html +++ b/art-artificial-alphabets/index.html @@ -4,14 +4,13 @@ + - +

Artificial Alphabets and Chat Texting

- + - \ No newline at end of file diff --git a/art-artificial-alphabets/sketch.js b/art-artificial-alphabets/sketch.js index fd76f82..0f9eaf0 100644 --- 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 new file mode 100644 index 0000000..4bd5fdc --- /dev/null +++ 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 index 95a44b1..8956541 100644 --- a/art-cardioid/index.html +++ b/art-cardioid/index.html @@ -9,7 +9,9 @@ + +

Cardioid

diff --git a/art-constalation/index.html b/art-constalation/index.html index f9f1601..3fb181b 100644 --- a/art-constalation/index.html +++ b/art-constalation/index.html @@ -4,6 +4,7 @@ + @@ -11,7 +12,9 @@ + +

Random Constalation

diff --git a/art-constalation/sketch.js b/art-constalation/sketch.js index 38d8fe2..ff7171f 100644 --- 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() } \ No newline at end of file diff --git a/art-constalation/style.css b/art-constalation/style.css new file mode 100644 index 0000000..427c7dd --- /dev/null +++ b/art-constalation/style.css @@ -0,0 +1,3 @@ +canvas{ + cursor: pointer; +} \ No newline at end of file diff --git a/art-floating-points/index.html b/art-floating-points/index.html index a1e0399..d6b840e 100644 --- a/art-floating-points/index.html +++ b/art-floating-points/index.html @@ -10,7 +10,9 @@ + +

adsfasd

diff --git a/art-flower-of-life/index.html b/art-flower-of-life/index.html index a0cbad4..39cc965 100644 --- a/art-flower-of-life/index.html +++ b/art-flower-of-life/index.html @@ -1,10 +1,16 @@ + - - Flower of Life - - - - - - + + + Flower of Life + + + + + + + +

Flower Of Life

+ + \ No newline at end of file diff --git a/art-flower-of-life/script.js b/art-flower-of-life/scetch.js similarity index 96% rename from art-flower-of-life/script.js rename to art-flower-of-life/scetch.js index 543b72c..370acc7 100644 --- a/art-flower-of-life/script.js +++ b/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 - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +

Dancing Graph

+ + + \ No newline at end of file diff --git a/art-infection/index.html b/art-infection/index.html index 922e582..1e1175b 100644 --- a/art-infection/index.html +++ b/art-infection/index.html @@ -11,7 +11,9 @@ + +

Art Infection

diff --git a/art-letter-flower/index.html b/art-letter-flower/index.html index 5da1a25..167418a 100644 --- a/art-letter-flower/index.html +++ b/art-letter-flower/index.html @@ -9,6 +9,8 @@ +

Mandala generator

+

from Armenian Latter

Rotation π/ 2

@@ -19,6 +21,7 @@ + \ No newline at end of file diff --git a/art-letter-flower/style.css b/art-letter-flower/style.css index 031a838..ca651af 100644 --- a/art-letter-flower/style.css +++ b/art-letter-flower/style.css @@ -1,12 +1,16 @@ .controls { width: 360px; position: absolute; - left: 1220px; - top: 15px; + left: 1250px; + top: 50px; font-size: 20px; + background-color: whitesmoke; + padding: 25px; + border: 2px solid black; } .controls input { width: 100%; height: 20px; -} \ No newline at end of file +} + diff --git a/art-letter-flowers/index.html b/art-letter-flowers/index.html index b818fd9..f05f738 100644 --- a/art-letter-flowers/index.html +++ b/art-letter-flowers/index.html @@ -7,7 +7,9 @@ + +

Mandalas from Armenian Letters

diff --git a/art-light-propagation/index.html b/art-light-propagation/index.html index 3a42b77..e096cd6 100644 --- a/art-light-propagation/index.html +++ b/art-light-propagation/index.html @@ -7,7 +7,9 @@ + +

Light Propagation

diff --git a/art-noize-rotating-fans/index.html b/art-noize-rotating-fans/index.html index a1e0399..a27a58b 100644 --- a/art-noize-rotating-fans/index.html +++ b/art-noize-rotating-fans/index.html @@ -10,7 +10,9 @@ + +

Rotating Fans

diff --git a/art-noize-rotating-fans/sketch.js b/art-noize-rotating-fans/sketch.js index 5d15b0a..6bd29d7 100644 --- a/art-noize-rotating-fans/sketch.js +++ b/art-noize-rotating-fans/sketch.js @@ -1,5 +1,5 @@ -const W = 1200 -const H = 800 +const W = window.innerWidth - 200 +const H = window.innerHeight - 190 const step = 60 function setup() { diff --git a/art-oscilating-squares/index.html b/art-oscilating-squares/index.html index 70c8b63..c88a4c0 100644 --- a/art-oscilating-squares/index.html +++ b/art-oscilating-squares/index.html @@ -6,7 +6,9 @@ + +

Living Squares

diff --git a/art-particles/index.html b/art-particles/index.html index 052971e..0aa7909 100644 --- a/art-particles/index.html +++ b/art-particles/index.html @@ -1,11 +1,14 @@ + Particles - - + + + +

Particles

\ No newline at end of file diff --git a/art-psy-rect-blanding-modes/index.html b/art-psy-rect-blanding-modes/index.html index 570a3de..335c803 100644 --- a/art-psy-rect-blanding-modes/index.html +++ b/art-psy-rect-blanding-modes/index.html @@ -4,8 +4,13 @@ + + + +

Blanding Modes

+ diff --git a/art-psy-rect-blanding-modes/style.css b/art-psy-rect-blanding-modes/style.css new file mode 100644 index 0000000..427c7dd --- /dev/null +++ b/art-psy-rect-blanding-modes/style.css @@ -0,0 +1,3 @@ +canvas{ + cursor: pointer; +} \ No newline at end of file diff --git a/art-text-circle-packing-edges/index.html b/art-text-circle-packing-edges/index.html index a148989..e6a2ecb 100644 --- a/art-text-circle-packing-edges/index.html +++ b/art-text-circle-packing-edges/index.html @@ -14,9 +14,11 @@ + +

Breath

\ No newline at end of file diff --git a/art-text-circle-packing-edges/sketch.js b/art-text-circle-packing-edges/sketch.js index b82a2af..d5e7a46 100644 --- a/art-text-circle-packing-edges/sketch.js +++ b/art-text-circle-packing-edges/sketch.js @@ -1,5 +1,5 @@ -let w = window.innerWidth -let h = window.innerHeight +let w = window.innerWidth - 270 +let h = window.innerHeight - 120 let greedSize = 25 let font diff --git a/art-text-entropy/index.html b/art-text-entropy/index.html index 6ec841b..23f6d3e 100644 --- a/art-text-entropy/index.html +++ b/art-text-entropy/index.html @@ -4,12 +4,16 @@ + - + + +

Entropy

+

Click and move cursor over canvas

diff --git a/art-text-entropy/sketch.js b/art-text-entropy/sketch.js index 4568beb..4fe79cb 100644 --- a/art-text-entropy/sketch.js +++ b/art-text-entropy/sketch.js @@ -3,7 +3,7 @@ const fSize = 150 const msg = 'Է ն տ ր ո պ ի ա ...' let pts = [] // store path data const stopPoints = [0, 140, 270, 426, 550, 680, 825, 963, 1300] -const animationFunctions = [drawCircles_spring, drawCircles_tickle, drawCircles_with_mouse,drawCircles_oscilator] +const animationFunctions = [drawCircles_spring, drawCircles_tickle, drawCircles_with_mouse, drawCircles_oscilator] let animationIndex = 0 function preload() { @@ -31,7 +31,7 @@ function draw() { const p = pts[i] for (let j = 0; j < stopPoints.length; j++) { if (p.x > stopPoints[j] && p.x < stopPoints[j + 1]) { - const animationFunction = animationFunctions[animationIndex] + const animationFunction = animationFunctions[animationIndex] animationFunction(j, p) } } @@ -39,19 +39,19 @@ function draw() { } -function mouseClicked(){ - if(animationIndex= stopPoints[j] && p.x < stopPoints[j + 1]) { - p.newX = random(p.x-(j + 1)*factor, p.x+j*factor) + p.newX = random(p.x - (j + 1) * factor, p.x + j * factor) p.newY = random(p.y - j * factor, p.y + j * factor) } } diff --git a/art-text-entropy/style.css b/art-text-entropy/style.css new file mode 100644 index 0000000..427c7dd --- /dev/null +++ b/art-text-entropy/style.css @@ -0,0 +1,3 @@ +canvas{ + cursor: pointer; +} \ No newline at end of file diff --git a/art-text-flow-fields/index.html b/art-text-flow-fields/index.html index a148989..e7f8af9 100644 --- a/art-text-flow-fields/index.html +++ b/art-text-flow-fields/index.html @@ -14,9 +14,11 @@ + +

Gone ?

\ No newline at end of file diff --git a/art-text-flow-fields/sketch.js b/art-text-flow-fields/sketch.js index 7a7c85f..8d592f7 100644 --- a/art-text-flow-fields/sketch.js +++ b/art-text-flow-fields/sketch.js @@ -1,12 +1,13 @@ -let w = window.innerWidth -let h = window.innerHeight +let w = window.innerWidth - 200 +let h = window.innerHeight - 200 let greedSize = 10 +const msgs = ['Gone ?', 'Done ?', 'Why ?', 'Where ?'] let font const fSize = 400 -const msg = 'Կորա՞ր' +let msg = msgs.shift() let points = [] -let circles = [] +let circles = msgs[0] function preload() { font = loadFont('../aFonts/Arian_Grqi_U.ttf') @@ -14,15 +15,20 @@ function preload() { function setup() { createCanvas(w, h) + + setUpWord() + //noLoop() +} + + +function setUpWord() { + points = [] background("black") - fill("white") - //frameRate(5) + fill("blue") textSize(fSize) textFont(font) - text(msg, 100, fSize) - - //noLoop() + text(msg, 200, fSize) loadPixels() for (let y = 0; y < height; y += greedSize) { for (let x = 0; x < width; x += greedSize) { @@ -31,7 +37,7 @@ function setup() { let g = pixels[ind + 1] let b = pixels[ind + 2] let a = pixels[ind + 3] - let brightness = (r + g + b) / 3 + let brightness = (r + g + b) / 10 if (brightness > 5) { fill(r, g, b, a) points.push(createVector(x, y)) @@ -41,18 +47,21 @@ function setup() { } clear() - background("black") - //fill("white") - //background("") } function draw() { - //background(0) - if (frameCount % 100 == 0) { - background(0) + if (frameCount % 400 == 0 && msgs.length > 0) { + msg = msgs.shift() + setUpWord() } - drawFlowField(points, 0.001, 0, false) + + if (frameCount % 200 == 0) { + background(0) + } + + + drawFlowField(points, 0.001, 10, false) } diff --git a/selected for showcase b/selected for showcase index fc7f5ac..5148f58 100644 --- a/selected for showcase +++ b/selected for showcase @@ -1,28 +1,12 @@ -http://127.0.0.1:5500/art-arcs/ -http://127.0.0.1:5500/art-arrows/ -http://127.0.0.1:5500/art-artificial-alphabets/ -http://127.0.0.1:5500/art-cardioid/ -http://127.0.0.1:5500/art-constalation/ TODO: optimize -http://127.0.0.1:5500/art-floating-points/ TODO: make more artistic -http://127.0.0.1:5500/art-graph/ -http://127.0.0.1:5500/art-infection/ -http://127.0.0.1:5500/art-letter-flower/ -http://127.0.0.1:5500/art-letter-flowers/ - -http://127.0.0.1:5500/art-light-propagation/ TODO: recreate as TUNDER -http://127.0.0.1:5500/art-noize-rotating-fans/ -http://127.0.0.1:5500/art-oscilating-squares/ -http://127.0.0.1:5500/art-particles/ TODO: resize -http://127.0.0.1:5500/art-psy-rect-blanding-modes/ -http://127.0.0.1:5500/art-snowflakes/ TODO: complete -http://127.0.0.1:5500/art-text-circle-packing-edges/ -http://127.0.0.1:5500/art-text-entropy/ TODO: create tooltips http://127.0.0.1:5500/art-text-flow-fields/ TODO: make more artistic, optimize http://127.0.0.1:5500/art-text-modifications/ TODO: make tooltips -http://127.0.0.1:5500/exp-flow-fields/ TODO: make something more artistic - ???? -http://127.0.0.1:5500/art-circle-packing/ \ No newline at end of file +http://127.0.0.1:5500/art-circle-packing/ + + +TODO: change fonts +TODO: change background and buttons styles +TODO: create first page \ No newline at end of file diff --git a/sketches-style.css b/sketches-style.css index 3419fed..dbd26c4 100644 --- a/sketches-style.css +++ b/sketches-style.css @@ -1,8 +1,40 @@ body { padding: 0; margin: 0; + background-color: whitesmoke; } main { text-align: center; +} + +#go-prev, +#go-next { + position: absolute; + top: 45%; + z-index: 1000; + width: 50px; + background-color: whitesmoke; + cursor: pointer; + font-size: 20px; + text-align: center; + padding: 2px; + border: solid 1px rgb(210, 210, 210); + border-radius: 2px; +} + +#go-prev { + left: 25px; +} + +#go-next { + right: 25px; +} + +h1, h2{ + text-align: center; +} + +.instructions{ + text-align: center; } \ No newline at end of file