From 389b4d3ddd4dcc82a1ef5e0a32b9111faf0cbc43 Mon Sep 17 00:00:00 2001 From: aleannab Date: Sat, 9 Dec 2023 15:17:45 -0800 Subject: [PATCH] Update p5 sketch to use react wrapper --- index.html | 4 +- package.json | 1 + src/components/BgSketch.jsx | 143 ++++++++++++++++++++++++++++++++++++ src/components/Hero.jsx | 6 +- src/sketch.js | 135 ---------------------------------- yarn.lock | 72 +++++++++++------- 6 files changed, 192 insertions(+), 169 deletions(-) create mode 100644 src/components/BgSketch.jsx delete mode 100644 src/sketch.js diff --git a/index.html b/index.html index a37ab91..7909423 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,7 @@ Antoinette Bumatay-Chan's Portfolio - - - +
diff --git a/package.json b/package.json index 138b983..b93a1ac 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "deploy": "vite build && gh-pages -d dist" }, "dependencies": { + "@p5-wrapper/react": "^4.3.2", "@react-spring/parallax": "^9.7.3", "@react-spring/web": "^9.7.3", "cssnano": "^6.0.1", diff --git a/src/components/BgSketch.jsx b/src/components/BgSketch.jsx new file mode 100644 index 0000000..6552b51 --- /dev/null +++ b/src/components/BgSketch.jsx @@ -0,0 +1,143 @@ +import * as React from 'react'; +import { ReactP5Wrapper } from '@p5-wrapper/react'; + +function sketch(p5) { + let dots = []; + let numDots = 7; + let timeWarp = 0.0005; + + // size variables + let pLength; + let sDotMin = 20; + let sDotMax = 60; + let sCircleMin = 100; + let sCircleMax = 450; + let sVarMin = 10; + let sVarMax = 50; + + // motion variables + let ampMin = 0.3; + let ampMax = 0.5; + + let colorPalette = ['#0096cc']; + let hueVal; + + let canvas; + + p5.setup = () => { + p5.frameRate(30); + initSketch(); + }; + + p5.windowResized = () => { + initSketch(); + }; + + p5.draw = () => { + p5.randomSeed(90); + p5.clear(); + + // Update positions/size + dots.forEach((d) => { + d.run(p5.millis()); + }); + + // Draw ring connections + for (let i = 0; i < dots.length; i++) { + let circle = dots[i]; + let next = dots[(i + 1) % dots.length]; + drawRing(circle, next); + } + + // Draw dots + p5.noStroke(); + dots.forEach((d) => { + p5.fill(d.colorDot); + p5.circle(d.position.x, d.position.y, d.sizeCircle); + + p5.fill(255); + p5.circle(d.position.x, d.position.y, d.sizeDot); + }); + }; + + function initSketch() { + let length = p5.windowWidth > p5.windowHeight ? p5.windowWidth : p5.windowHeight; + canvas = p5.createCanvas(p5.windowWidth, length); + canvas.position(0, 0); + canvas.style('z-index', -20); + p5.colorMode(p5.HSB, 100); + + // Distribute inital positions radially from screen mid point + + let inc = p5.TWO_PI / numDots; + let delta = 0.3 * inc; + + pLength = 0.3 * length; + sDotMin = 0.01 * length; + sDotMax = 0.03 * length; + sCircleMin = 0.05 * length; + sCircleMax = 0.2 * length; + sVarMin = 0.005 * length; + sVarMax = 0.02 * length; + + dots = []; + hueVal = p5.hue(p5.random(colorPalette)); + for (let i = 0; i < numDots; i++) { + let theta = i * inc + p5.random(-delta, delta); + let x = p5.windowWidth * (0.3 * p5.cos(theta) + 0.5); + let y = p5.windowHeight * (0.3 * p5.sin(theta) + 0.5); + let d = new Dottie(x, y); + dots.push(d); + } + } + + function drawRing(a, b) { + let centerX = (a.position.x + b.position.x) / 2; + let centerY = (a.position.y + b.position.y) / 2; + let diameter = p5.dist(a.position.x, a.position.y, b.position.x, b.position.y); + + let c = p5.color(hueVal, p5.random(0, 100), p5.random(20, 30), 50); + p5.stroke(c); + p5.strokeWeight(2); + p5.noFill(); + + p5.circle(centerX, centerY, diameter); + } + + class Dottie { + constructor(x, y) { + // init positions + this.origin = p5.createVector(x, y); + this.position = p5.createVector(x, y); + + // init sizes + let s = p5.floor(p5.random(sCircleMin, sCircleMax)); + this.sizeCircle = s; + this.sizeCircleOG = s; + this.sizeVar = p5.random(sVarMin, sVarMax); + this.sizeDot = p5.floor(p5.random(sDotMin, sDotMax)); + + // init color; + this.colorDot = p5.color((hueVal + p5.random(-10, 10)) % 100, 100, 90, p5.random(10, 30)); + + // init motion vars + let ampX = (p5.random(0, 1) < 0.5 ? -1 : 1) * p5.random(ampMin, ampMax) * pLength; + let ampY = (p5.random(0, 1) < 0.5 ? -1 : 1) * p5.random(ampMin, ampMax) * pLength; + this.amplitude = p5.createVector(ampX, ampY); + this.offset = p5.createVector(p5.random(0, p5.TWO_PI), p5.random(0, p5.TWO_PI)); + this.frequency = p5.random(0.5, 1.0) * timeWarp; + } + + run(t) { + this.position.x = this.origin.x + p5.sin(t * this.frequency + this.offset.x) * this.amplitude.x; + this.position.y = this.origin.y + p5.cos(t * this.frequency + this.offset.y) * this.amplitude.y; + this.sizeCircle = this.sizeCircleOG + (p5.sin(t * 0.0003 + this.offset.x) + 1) * this.sizeVar; + } + } +} + +const BgSketch = () => { + return ; +}; + +export default BgSketch; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 3597e29..b190a72 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -1,13 +1,11 @@ import React, { useRef } from 'react'; -import left from '../assets/temp/abstract-left.svg'; -import right from '../assets/temp/abstract-right.svg'; import FadeInOnScroll from './FadeInOnScroll'; +import BgSketch from './BgSketch'; const Hero = () => { return (
- {/* - */} +
diff --git a/src/sketch.js b/src/sketch.js deleted file mode 100644 index f1f6be4..0000000 --- a/src/sketch.js +++ /dev/null @@ -1,135 +0,0 @@ -// Created for the #WCCChallenge - Connecting the Dots - -let dots = []; -let numDots = 7; -let timeWarp = 0.0005; - -// size variables -let sDotMin = 20; -let sDotMax = 60; -let sCircleMin = 100; -let sCircleMax = 450; -let sVarMin = 10; -let sVarMax = 50; - -// motion variables -let ampMin = 0.3; -let ampMax = 0.5; - -let pLength; -let colorPalette = ['#0096cc']; -let hueVal; - -let canvas; - -function windowResized() { - resizeCanvas(windowWidth, windowHeight); - initSketch(); -} - -function setup() { - initSketch(); -} - -function initSketch() { - let length = windowWidth > windowHeight ? windowWidth : windowHeight; - canvas = createCanvas(windowWidth, length); - canvas.position(0, 0); - canvas.style('z-index', -20); - frameRate(30); - colorMode(HSB, 100); - - // Distribute inital positions radially from screen mid point - - let inc = TWO_PI / numDots; - let delta = 0.3 * inc; - - pLength = 0.3 * (windowWidth < windowHeight ? windowWidth : windowHeight); - sDotMin = 0.01 * length; - sDotMax = 0.03 * length; - sCircleMin = 0.05 * length; - sCircleMax = 0.2 * length; - sVarMin = 0.005 * length; - sVarMax = 0.02 * length; - - dots = []; - hueVal = hue(random(colorPalette)); - for (let i = 0; i < numDots; i++) { - let theta = i * inc + random(-delta, delta); - let x = windowWidth * (0.3 * cos(theta) + 0.5); - let y = windowHeight * (0.3 * sin(theta) + 0.5); - let d = new Dottie(x, y); - dots.push(d); - } -} - -function drawRing(a, b) { - let centerX = (a.position.x + b.position.x) / 2; - let centerY = (a.position.y + b.position.y) / 2; - let diameter = dist(a.position.x, a.position.y, b.position.x, b.position.y); - - let c = color(hueVal, random(0, 100), random(20, 30), 50); //random(40, 70)); - stroke(c); - strokeWeight(2); - noFill(); - - circle(centerX, centerY, diameter); -} - -function draw() { - randomSeed(90); - clear(); - - // Update positions/size - dots.forEach((d) => { - d.run(millis()); - }); - - // Draw ring connections - for (let i = 0; i < dots.length; i++) { - let circle = dots[i]; - let next = dots[(i + 1) % dots.length]; - drawRing(circle, next); - } - - // Draw dots - noStroke(); - dots.forEach((d) => { - fill(d.colorDot); - circle(d.position.x, d.position.y, d.sizeCircle); - - fill(255); - circle(d.position.x, d.position.y, d.sizeDot); - }); -} - -class Dottie { - constructor(x, y) { - // init positions - this.origin = createVector(x, y); - this.position = createVector(x, y); - - // init sizes - let s = floor(random(sCircleMin, sCircleMax)); - this.sizeCircle = s; - this.sizeCircleOG = s; - this.sizeVar = random(sVarMin, sVarMax); - this.sizeDot = floor(random(sDotMin, sDotMax)); - - // init color; - this.colorDot = color((hueVal + random(-10, 10)) % 100, 100, 90, random(10, 30)); - - // init motion vars - let ampX = (random(0, 1) < 0.5 ? -1 : 1) * random(ampMin, ampMax) * pLength; - let ampY = (random(0, 1) < 0.5 ? -1 : 1) * random(ampMin, ampMax) * pLength; - this.amplitude = createVector(ampX, ampY); - this.offset = createVector(random(0, TWO_PI), random(0, TWO_PI)); - this.frequency = random(0.5, 1.0) * timeWarp; - } - - run(t) { - this.position.x = this.origin.x + sin(t * this.frequency + this.offset.x) * this.amplitude.x; - this.position.y = this.origin.y + cos(t * this.frequency + this.offset.y) * this.amplitude.y; - this.sizeCircle = this.sizeCircleOG + (sin(t * 0.0003 + this.offset.x) + 1) * this.sizeVar; - } -} diff --git a/yarn.lock b/yarn.lock index 78f3962..6a2b060 100644 --- a/yarn.lock +++ b/yarn.lock @@ -226,6 +226,14 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@p5-wrapper/react@^4.3.2": + version "4.3.2" + resolved "https://registry.yarnpkg.com/@p5-wrapper/react/-/react-4.3.2.tgz#68eaee884b408096a35a3f83666fef6aae7ee533" + integrity sha512-m7MoL63grVVyu39czEi3V3tz29VM4zzd4K9MjNWZ5t7jb4itgHpw6FCiSG2JzU1SqElKgo9ny8NliavPWYYdrw== + dependencies: + microdiff "^1.3.2" + p5 "^1.9.0" + "@react-spring/animated@~9.7.3": version "9.7.3" resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f" @@ -414,9 +422,9 @@ "@types/react" "*" "@types/react@*", "@types/react@^18.2.15": - version "18.2.41" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.41.tgz#9eea044246bdb10510df89ef7f8422a8b6ad8fb9" - integrity sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw== + version "18.2.43" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.43.tgz#c58e5abe241e6f71f60ce30e2a9aceb9d3a2a374" + integrity sha512-nvOV01ZdBdd/KW6FahSbcNplt2jCJfyWdTos61RYHV+FVv5L/g9AOX1bmbVcWcLFL8+KHQfh1zVIQrud6ihyQA== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -646,13 +654,13 @@ braces@^3.0.2, braces@~3.0.2: fill-range "^7.0.1" browserslist@^4.0.0, browserslist@^4.21.10, browserslist@^4.21.4: - version "4.22.1" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619" - integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ== + version "4.22.2" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.2.tgz#704c4943072bd81ea18997f3bd2180e89c77874b" + integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A== dependencies: - caniuse-lite "^1.0.30001541" - electron-to-chromium "^1.4.535" - node-releases "^2.0.13" + caniuse-lite "^1.0.30001565" + electron-to-chromium "^1.4.601" + node-releases "^2.0.14" update-browserslist-db "^1.0.13" buffer-crc32@~0.2.3: @@ -694,10 +702,10 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541: - version "1.0.30001565" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz#a528b253c8a2d95d2b415e11d8b9942acc100c4f" - integrity sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w== +caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001565: + version "1.0.30001566" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001566.tgz#61a8e17caf3752e3e426d4239c549ebbb37fef0d" + integrity sha512-ggIhCsTxmITBAMmK8yZjEhCO5/47jKXPu6Dha/wuCS4JePVL+3uiDEBuhu2aIoT+bqTOR8L76Ip1ARL9xYsEJA== chalk@^2.4.1: version "2.4.2" @@ -939,9 +947,9 @@ csso@5.0.5: css-tree "~2.2.0" csstype@^3.0.2: - version "3.1.2" - resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" - integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + version "3.1.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" + integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== daisyui@^3.6.4: version "3.9.4" @@ -1045,10 +1053,10 @@ domutils@^3.0.1: domelementtype "^2.3.0" domhandler "^5.0.3" -electron-to-chromium@^1.4.535: - version "1.4.601" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz#cac69868548aee89961ffe63ff5a7716f0685b75" - integrity sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA== +electron-to-chromium@^1.4.601: + version "1.4.609" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz#5790a70aaa96de232501b56e14b64d17aff93988" + integrity sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw== email-addresses@^5.0.0: version "5.0.0" @@ -2076,6 +2084,11 @@ merge2@^1.3.0: resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg== +microdiff@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/microdiff/-/microdiff-1.3.2.tgz#b4fec53aca97371d5409a354913a65be2daec11d" + integrity sha512-pKy60S2febliZIbwdfEQKTtL5bLNxOyiRRmD400gueYl9XcHyNGxzHSlJWn9IMHwYXT0yohPYL08+bGozVk8cQ== + micromatch@^4.0.4, micromatch@^4.0.5: version "4.0.5" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" @@ -2154,7 +2167,7 @@ nice-try@^1.0.4: resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ== -node-releases@^2.0.13: +node-releases@^2.0.14: version "2.0.14" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b" integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw== @@ -2318,6 +2331,11 @@ p-try@^2.0.0: resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== +p5@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/p5/-/p5-1.9.0.tgz#04c406ae683449106d514108648035b21aa850fb" + integrity sha512-+5/hz0ZokCDf7BMMAeemE7FIo7gFZK7ImL62acHLXZwerGjqj+171bnaAWj4aCFCx6fwysAr2U7/AKuPyPhehA== + parent-module@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" @@ -3188,9 +3206,9 @@ svgo@^3.0.2: picocolors "^1.0.0" tailwindcss@^3.1, tailwindcss@^3.3.3: - version "3.3.5" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.5.tgz#22a59e2fbe0ecb6660809d9cc5f3976b077be3b8" - integrity sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA== + version "3.3.6" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.6.tgz#4dd7986bf4902ad385d90d45fd4b2fa5fab26d5f" + integrity sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw== dependencies: "@alloc/quick-lru" "^5.2.0" arg "^5.0.2" @@ -3360,9 +3378,9 @@ vite-plugin-copy@^0.1.6: fast-glob "^3.2.7" vite@^4.4.5: - version "4.5.0" - resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.0.tgz#ec406295b4167ac3bc23e26f9c8ff559287cff26" - integrity sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw== + version "4.5.1" + resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.1.tgz#3370986e1ed5dbabbf35a6c2e1fb1e18555b968a" + integrity sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA== dependencies: esbuild "^0.18.10" postcss "^8.4.27"