From 32dd6c1b89d9d921c305e5bef7bff9b37d7951bd Mon Sep 17 00:00:00 2001 From: cal-soona Date: Fri, 5 Aug 2022 22:48:44 -0500 Subject: [PATCH 1/7] add p5 dependency at types --- package-lock.json | 24 ++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 26 insertions(+) diff --git a/package-lock.json b/package-lock.json index 93f9745..3496856 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,12 +10,14 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { + "p5": "^1.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^3.1.4" }, "devDependencies": { "@types/node": "^16.11.46", + "@types/p5": "^1.4.2", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^2.0.0", @@ -2111,6 +2113,12 @@ "integrity": "sha512-x+sfpb2dMrhCQPL4NAGs64Z9hh0t72aP0dg+PuZidmPr/0Gj5ELQTjD/t46dq3DF/8ZvSHOaIyDIbAsdPshyVQ==", "dev": true }, + "node_modules/@types/p5": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.4.2.tgz", + "integrity": "sha512-tzJ2PdmeXlX8tidbA1/pQEhs0MHVWam0K4ux5ri0GrZXhBU3QrpTpSVzNaBDuo6KheryHdH8wR82x1nPvxo42g==", + "dev": true + }, "node_modules/@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -5119,6 +5127,11 @@ "node": ">=4" } }, + "node_modules/p5": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/p5/-/p5-1.4.2.tgz", + "integrity": "sha512-J5zqZ/l1NIbJSuNr/FH9nDYgBRg7/NubStNPnx1fQCMSAgxI6peKDHs9i5iaG9EuwbJzjuG6/5bX/D0lqqrP9A==" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -7694,6 +7707,12 @@ "integrity": "sha512-x+sfpb2dMrhCQPL4NAGs64Z9hh0t72aP0dg+PuZidmPr/0Gj5ELQTjD/t46dq3DF/8ZvSHOaIyDIbAsdPshyVQ==", "dev": true }, + "@types/p5": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.4.2.tgz", + "integrity": "sha512-tzJ2PdmeXlX8tidbA1/pQEhs0MHVWam0K4ux5ri0GrZXhBU3QrpTpSVzNaBDuo6KheryHdH8wR82x1nPvxo42g==", + "dev": true + }, "@types/parse-json": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", @@ -9803,6 +9822,11 @@ "integrity": "sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==", "dev": true }, + "p5": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/p5/-/p5-1.4.2.tgz", + "integrity": "sha512-J5zqZ/l1NIbJSuNr/FH9nDYgBRg7/NubStNPnx1fQCMSAgxI6peKDHs9i5iaG9EuwbJzjuG6/5bX/D0lqqrP9A==" + }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", diff --git a/package.json b/package.json index c905b86..d9a45bb 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "postinstall": "simple-git-hooks" }, "dependencies": { + "p5": "^1.4.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-error-boundary": "^3.1.4" @@ -23,6 +24,7 @@ "@types/node": "^16.11.46", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@types/p5": "^1.4.2", "@vitejs/plugin-react": "^2.0.0", "eslint": "^8.20.0", "eslint-config-react-app": "^7.0.1", From c98ccf8060c63465686a4795ab39b834102a611c Mon Sep 17 00:00:00 2001 From: cal-soona Date: Fri, 5 Aug 2022 22:50:46 -0500 Subject: [PATCH 2/7] re-implement basic blue filter with p5 --- .../visualizers/P5FrequencyBlue.tsx | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/visualizer/visualizers/P5FrequencyBlue.tsx diff --git a/src/visualizer/visualizers/P5FrequencyBlue.tsx b/src/visualizer/visualizers/P5FrequencyBlue.tsx new file mode 100644 index 0000000..ca594c3 --- /dev/null +++ b/src/visualizer/visualizers/P5FrequencyBlue.tsx @@ -0,0 +1,61 @@ +import { useEffect, useRef, useState } from "react"; +import { useTheme } from "../../common/useTheme"; +import { useAudioBuffer } from "../../common/useAudioBuffer"; +import p5 from "p5"; + +export default function BasicFrequencyRed() { + const containerRef = useRef(null); + const bufferRef = useAudioBuffer(); + const { background1 } = useTheme(); + const [sketch, setSketch] = useState(undefined); + + const Sketch = (p: p5) => { + p.setup = () => { + p.createCanvas(p.windowWidth, p.windowHeight); + }; + + p.windowResized = () => { + p.resizeCanvas(p.windowWidth, p.windowHeight); + }; + + p.draw = () => { + p.background(background1); + + if (containerRef.current && bufferRef.current) { + const bufferLength = bufferRef.current.length; + + p.background(background1); + + const barWidth = p.width / bufferLength; + let barHeight; + let canvasBarHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = bufferRef.current[i]; + canvasBarHeight = p.height * (barHeight / 255); + p.fill(p.color(50, 50, barHeight + 100)); + p.rect(x, p.height - canvasBarHeight, barWidth, canvasBarHeight); + + x += barWidth + 1; + } + } + }; + }; + + useEffect(() => { + if (!sketch) { + let inst = new p5(Sketch, containerRef.current as HTMLElement); + + setSketch(inst); + } + + return () => { + if (sketch) { + sketch.remove(); + } + }; + }, [background1, bufferRef, sketch, Sketch]); + + return
; +} From 4b588a2437e404bd945067258795b811792eec4c Mon Sep 17 00:00:00 2001 From: cal-soona Date: Fri, 5 Aug 2022 22:54:28 -0500 Subject: [PATCH 3/7] blindly follow eslint warning advice --- .../visualizers/P5FrequencyBlue.tsx | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/visualizer/visualizers/P5FrequencyBlue.tsx b/src/visualizer/visualizers/P5FrequencyBlue.tsx index ca594c3..06c5252 100644 --- a/src/visualizer/visualizers/P5FrequencyBlue.tsx +++ b/src/visualizer/visualizers/P5FrequencyBlue.tsx @@ -9,41 +9,41 @@ export default function BasicFrequencyRed() { const { background1 } = useTheme(); const [sketch, setSketch] = useState(undefined); - const Sketch = (p: p5) => { - p.setup = () => { - p.createCanvas(p.windowWidth, p.windowHeight); - }; + useEffect(() => { + const Sketch = (p: p5) => { + p.setup = () => { + p.createCanvas(p.windowWidth, p.windowHeight); + }; - p.windowResized = () => { - p.resizeCanvas(p.windowWidth, p.windowHeight); - }; + p.windowResized = () => { + p.resizeCanvas(p.windowWidth, p.windowHeight); + }; - p.draw = () => { - p.background(background1); + p.draw = () => { + p.background(background1); - if (containerRef.current && bufferRef.current) { - const bufferLength = bufferRef.current.length; + if (containerRef.current && bufferRef.current) { + const bufferLength = bufferRef.current.length; - p.background(background1); + p.background(background1); - const barWidth = p.width / bufferLength; - let barHeight; - let canvasBarHeight; - let x = 0; + const barWidth = p.width / bufferLength; + let barHeight; + let canvasBarHeight; + let x = 0; - for (let i = 0; i < bufferLength; i++) { - barHeight = bufferRef.current[i]; - canvasBarHeight = p.height * (barHeight / 255); - p.fill(p.color(50, 50, barHeight + 100)); - p.rect(x, p.height - canvasBarHeight, barWidth, canvasBarHeight); + for (let i = 0; i < bufferLength; i++) { + barHeight = bufferRef.current[i]; + canvasBarHeight = p.height * (barHeight / 255); + p.fill(p.color(50, 50, barHeight + 100)); + p.rect(x, p.height - canvasBarHeight, barWidth, canvasBarHeight); - x += barWidth + 1; + x += barWidth + 1; + } } - } + }; }; - }; - useEffect(() => { if (!sketch) { let inst = new p5(Sketch, containerRef.current as HTMLElement); @@ -55,7 +55,7 @@ export default function BasicFrequencyRed() { sketch.remove(); } }; - }, [background1, bufferRef, sketch, Sketch]); + }, [background1, bufferRef, sketch]); return
; } From b9ed148c41e6311a7792d264033f755e59e586bc Mon Sep 17 00:00:00 2001 From: cal-soona Date: Sat, 6 Aug 2022 10:40:38 -0500 Subject: [PATCH 4/7] fix copy pasta --- src/visualizer/visualizers/P5FrequencyBlue.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/visualizer/visualizers/P5FrequencyBlue.tsx b/src/visualizer/visualizers/P5FrequencyBlue.tsx index 06c5252..efb0d2a 100644 --- a/src/visualizer/visualizers/P5FrequencyBlue.tsx +++ b/src/visualizer/visualizers/P5FrequencyBlue.tsx @@ -3,7 +3,7 @@ import { useTheme } from "../../common/useTheme"; import { useAudioBuffer } from "../../common/useAudioBuffer"; import p5 from "p5"; -export default function BasicFrequencyRed() { +export default function P5FrequencyBlue() { const containerRef = useRef(null); const bufferRef = useAudioBuffer(); const { background1 } = useTheme(); From 040c8623545a60342018651474a2597b5146380e Mon Sep 17 00:00:00 2001 From: cal-soona Date: Sat, 6 Aug 2022 12:38:38 -0500 Subject: [PATCH 5/7] add quick port of simplified optical with basic frequency mapping --- src/visualizer/visualizers/Optical.tsx | 62 +++++++ .../visualizers/P5FrequencyBlue.tsx | 8 +- src/visualizer/visualizers/optical/Actor.ts | 139 ++++++++++++++++ .../visualizers/optical/ActorSystem.ts | 151 ++++++++++++++++++ 4 files changed, 356 insertions(+), 4 deletions(-) create mode 100644 src/visualizer/visualizers/Optical.tsx create mode 100644 src/visualizer/visualizers/optical/Actor.ts create mode 100644 src/visualizer/visualizers/optical/ActorSystem.ts diff --git a/src/visualizer/visualizers/Optical.tsx b/src/visualizer/visualizers/Optical.tsx new file mode 100644 index 0000000..9a4020d --- /dev/null +++ b/src/visualizer/visualizers/Optical.tsx @@ -0,0 +1,62 @@ +import { useEffect, useRef, useState } from "react"; +import { useTheme } from "../../common/useTheme"; +import { useAudioBuffer } from "../../common/useAudioBuffer"; +import P5 from "p5"; +import ActorSystem from "./optical/ActorSystem"; +import { buffer } from "stream/consumers"; + +const FRAME_RATE = 60; +const ACTOR_COUNT = 500; +const ACTOR_SPEED = 3; + +export default function Optical() { + const containerRef = useRef(null); + const bufferRef = useAudioBuffer(); + const { background1 } = useTheme(); + const [sketch, setSketch] = useState(undefined); + + useEffect(() => { + const Sketch = (p5: P5) => { + let actorSystem: ActorSystem; + p5.setup = () => { + p5.frameRate(FRAME_RATE); + p5.createCanvas(p5.windowWidth, p5.windowHeight); + actorSystem = new ActorSystem(p5, ACTOR_COUNT, ACTOR_SPEED); + }; + + p5.windowResized = () => { + p5.resizeCanvas(p5.windowWidth, p5.windowHeight); + }; + + p5.draw = () => { + if (bufferRef.current) { + const connectDistance = p5.map(bufferRef.current[2], 0, 175, 10, 70); + const actorSpeed = p5.map(bufferRef.current[5], 0, 175, 0, 10); + const wiggleSpeed = p5.map(bufferRef.current[12], 0, 140, 0, 0.6); + const wiggleAmount = p5.map(bufferRef.current[8], 0, 100, 1.5, 0); + actorSystem.setControls( + connectDistance, + actorSpeed, + wiggleSpeed, + wiggleAmount + ); + } + actorSystem.update(); + actorSystem.display(p5 as P5.Graphics); + }; + }; + if (!sketch) { + let inst = new P5(Sketch, containerRef.current as HTMLElement); + + setSketch(inst); + } + + return () => { + if (sketch) { + sketch.remove(); + } + }; + }, [background1, bufferRef, sketch]); + + return
; +} diff --git a/src/visualizer/visualizers/P5FrequencyBlue.tsx b/src/visualizer/visualizers/P5FrequencyBlue.tsx index efb0d2a..01e150d 100644 --- a/src/visualizer/visualizers/P5FrequencyBlue.tsx +++ b/src/visualizer/visualizers/P5FrequencyBlue.tsx @@ -1,16 +1,16 @@ import { useEffect, useRef, useState } from "react"; import { useTheme } from "../../common/useTheme"; import { useAudioBuffer } from "../../common/useAudioBuffer"; -import p5 from "p5"; +import P5 from "p5"; export default function P5FrequencyBlue() { const containerRef = useRef(null); const bufferRef = useAudioBuffer(); const { background1 } = useTheme(); - const [sketch, setSketch] = useState(undefined); + const [sketch, setSketch] = useState(undefined); useEffect(() => { - const Sketch = (p: p5) => { + const Sketch = (p: P5) => { p.setup = () => { p.createCanvas(p.windowWidth, p.windowHeight); }; @@ -45,7 +45,7 @@ export default function P5FrequencyBlue() { }; if (!sketch) { - let inst = new p5(Sketch, containerRef.current as HTMLElement); + let inst = new P5(Sketch, containerRef.current as HTMLElement); setSketch(inst); } diff --git a/src/visualizer/visualizers/optical/Actor.ts b/src/visualizer/visualizers/optical/Actor.ts new file mode 100644 index 0000000..06e20c1 --- /dev/null +++ b/src/visualizer/visualizers/optical/Actor.ts @@ -0,0 +1,139 @@ +import P5 from "p5"; + +const PI = Math.PI; + +export default class Actor { + location: P5.Vector; + previousLocation: P5.Vector; + angle: number; + newAngle: number; + type: number; + time: number = 0; + currentWaitTime: number = 30; + wiggleOffset: number = 0; + p5: P5; + + actorSpeed: number = 3; + wiggleRate: number = 0.2; + wiggleAmount: number = 0.4; + wiggleOffsetRange: number = 100; + waitTime: number = 80; + angleSpeed: number = 0.2; + + constructor(p5: P5, startingLocation: P5.Vector, startingAngle: number) { + this.p5 = p5; + this.location = new P5.Vector(startingLocation.x, startingLocation.y); + this.previousLocation = new P5.Vector( + startingLocation.x, + startingLocation.y + ); + this.angle = startingAngle; + this.newAngle = startingAngle; + this.wiggleOffset = this.p5.random(this.wiggleOffsetRange); //CONST WIGGLE_OFFSET_RANGE + this.type = this.p5.floor(this.p5.random(3)); //used to be cast to integer + } + + setControls(actorSpeed: number, wiggleRate: number, wiggleAmount: number) { + this.actorSpeed = actorSpeed; + this.wiggleRate = wiggleRate; + this.wiggleAmount = wiggleAmount; + } + + update(targetActor: Actor) { + this.time++; + if (this.time >= this.currentWaitTime) { + this.time = 0; + this.currentWaitTime = this.p5.random(this.waitTime, this.waitTime * 5); //CONST WAIT_TIME, WAIT_TIME*5 + this.calculateNewAngle(targetActor); + } + this.smoothRotateToNewHeading(); + this.updateLocation(); + } + + calculateNewAngle(targetActor: Actor) { + if (this.type === targetActor.type) { + //if they're friends //fly towards eachother + this.newAngle = P5.Vector.sub(this.location, targetActor.location) + .mult(-1) + .heading(); + } else { + //fly one direction if they're not partnered + if (this.type == 1) { + this.newAngle = (2 * PI) / 3 + PI / 2 - 2 * PI; + } else if (this.type == 2) { + this.newAngle = (4 * PI) / 3 + PI / 2 - 2 * PI; + } else if (this.type == 0) { + this.newAngle = (6 * PI) / 3 + PI / 2 - 2 * PI; + } + + //normalize the angle to the negative pi to pi range + if (this.newAngle > PI) { + this.newAngle -= 2 * PI; + } + if (this.newAngle < -1 * PI) { + this.newAngle += 2 * PI; + } + } + } + + smoothRotateToNewHeading() { + if (Math.abs(this.angle - this.newAngle) > PI) { + if (this.angle < this.newAngle) { + this.angle -= this.p5.random(this.angleSpeed); + } else { + this.angle += this.p5.random(this.angleSpeed); + } + } else { + if (this.angle < this.newAngle) { + this.angle += this.p5.random(this.angleSpeed); + } else { + this.angle -= this.p5.random(this.angleSpeed); + } + } + + if (this.angle > PI) { + this.angle = -1 * PI; + } else if (this.angle < -1 * PI) { + this.angle = PI; + } + } + + updateLocation() { + this.previousLocation.x = this.location.x; + this.previousLocation.y = this.location.y; + + //add some wiggle with sin + this.location.add( + P5.Vector.fromAngle( + this.angle + + this.p5.sin( + (this.p5.frameCount + this.wiggleOffset) * this.wiggleRate + ) * + this.wiggleRate + ).mult(this.actorSpeed) + ); + this.wrapScreenMovement(); + } + + wrapScreenMovement() { + if (this.location.x > this.p5.width) { + this.previousLocation.x = 0; + this.location.x = P5.Vector.fromAngle(this.angle).mult(this.actorSpeed).x; + } + if (this.location.x < 0) { + this.previousLocation.x = this.p5.width; + this.location.x = + this.p5.width - P5.Vector.fromAngle(this.angle).mult(this.actorSpeed).x; + } + if (this.location.y > this.p5.height) { + this.previousLocation.y = 0; + this.location.y = P5.Vector.fromAngle(this.angle).mult(this.actorSpeed).y; + } + if (this.location.y < 0) { + this.previousLocation.y = this.p5.height; + this.location.y = + this.p5.height - + P5.Vector.fromAngle(this.angle).mult(this.actorSpeed).y; + } + } +} diff --git a/src/visualizer/visualizers/optical/ActorSystem.ts b/src/visualizer/visualizers/optical/ActorSystem.ts new file mode 100644 index 0000000..cff79d7 --- /dev/null +++ b/src/visualizer/visualizers/optical/ActorSystem.ts @@ -0,0 +1,151 @@ +import P5 from "p5"; +import Actor from "./Actor"; + +//move this to a helper class prob +function shuffleArray(array: Array) { + for (var i = array.length - 1; i > 0; i--) { + var j = Math.floor(Math.random() * (i + 1)); + var temp = array[i]; + array[i] = array[j]; + array[j] = temp; + } +} + +export default class ActorSystem { + actors: Array = []; + time: number = 0; + p5: P5; + + //controls + shuffleTime: number = 800; + fadeAmount: number = 15; + connectDistance: number = 40; + actorSpeed: number = 3; + wiggleRate: number = 0.2; // 0 - 1 ish recommended range + wiggleAmount: number = 0.4; // 0 - PI ish recommended range + wiggleOffsetRange: number = 100; //10's 100's range ish recommended range + waitTime: number = 80; + angleSpeed: number = 0.2; + + constructor(p5: P5, n: number, speed: number) { + this.p5 = p5; + + for (let i = 0; i < n; i++) { + let a = new Actor( + p5, + new P5.Vector( + this.p5.random(this.p5.width), + this.p5.random(this.p5.height) + ), + this.p5.random(2 * Math.PI) - Math.PI + ); + this.actors.push(a); + } + } + + addActors(n: number) { + for (let i = 0; i < n; i++) { + let a = new Actor( + this.p5, + new P5.Vector( + this.p5.random(this.p5.width), + this.p5.random(this.p5.height) + ), + this.p5.random(2 * Math.PI) - Math.PI + ); + this.actors.push(a); + } + } + + removeActors(n: number) { + try { + for (let i = 0; i < n; i++) { + this.actors.pop(); + } + } catch (ex) { + //no worries we ran out of actors! + } + } + + setControls( + connectDistance: number, + actorSpeed: number, + wiggleRate: number, + wiggleAmount: number + ) { + this.connectDistance = connectDistance; + this.actorSpeed = actorSpeed; + this.wiggleRate = wiggleRate; + this.wiggleAmount = wiggleAmount; + + for (let a of this.actors) { + a.setControls(this.actorSpeed, this.wiggleRate, this.wiggleAmount); + } + } + + update() { + this.time++; + if (this.time >= this.shuffleTime) { + this.time = 0; + shuffleArray(this.actors); + } + for (let i = 0; i < this.actors.length; i++) { + this.actors[i].update(this.actors[(i + 1) % this.actors.length]); + } + } + + display(canvas: P5.Graphics) { + canvas.fill(0, 0, 0, this.fadeAmount); + canvas.rect(0, 0, this.p5.width, this.p5.height); + this.drawActors(canvas); + this.drawLightning(canvas); + } + + drawActors(canvas: P5.Graphics) { + canvas.strokeWeight(2); + for (let a of this.actors) { + if (a.type == 0) { + canvas.stroke(255, 0, 0); + } else if (a.type == 1) { + canvas.stroke(0, 0, 255); + } else { + canvas.stroke(0, 255, 0); + } + canvas.line( + a.location.x, + a.location.y, + a.previousLocation.x, + a.previousLocation.y + ); + } + } + + drawLightning(canvas: P5.Graphics) { + canvas.strokeWeight(1); + for (let i = 0; i < this.actors.length; i++) { + for (let j = i; j < this.actors.length; j++) { + let a1 = this.actors[i]; + let a2 = this.actors[j]; + if (P5.Vector.dist(a1.location, a2.location) < this.connectDistance) { + if (a1.type == a2.type) { + if (a1.type == 0) { + canvas.stroke(255, 255, 0); + } else if (a1.type == 1) { + canvas.stroke(0, 255, 255); + } else { + canvas.stroke(255, 0, 255); + } + } else { + canvas.stroke(255, 255, 255, 128); + } + canvas.line( + a1.location.x, + a1.location.y, + a2.location.x, + a2.location.y + ); + } + } + } + } +} From f1de9d38daf51b30b9dc8ee3714cf3c862e68ab1 Mon Sep 17 00:00:00 2001 From: Brian Mitchell Date: Sat, 6 Aug 2022 15:46:05 -0500 Subject: [PATCH 6/7] Simplify integration with React --- src/visualizer/visualizers/Optical.tsx | 19 ++++++------------- .../visualizers/P5FrequencyBlue.tsx | 17 ++++++----------- 2 files changed, 12 insertions(+), 24 deletions(-) diff --git a/src/visualizer/visualizers/Optical.tsx b/src/visualizer/visualizers/Optical.tsx index 9a4020d..7189fdf 100644 --- a/src/visualizer/visualizers/Optical.tsx +++ b/src/visualizer/visualizers/Optical.tsx @@ -1,9 +1,7 @@ -import { useEffect, useRef, useState } from "react"; -import { useTheme } from "../../common/useTheme"; +import { useEffect, useRef } from "react"; import { useAudioBuffer } from "../../common/useAudioBuffer"; import P5 from "p5"; import ActorSystem from "./optical/ActorSystem"; -import { buffer } from "stream/consumers"; const FRAME_RATE = 60; const ACTOR_COUNT = 500; @@ -12,10 +10,10 @@ const ACTOR_SPEED = 3; export default function Optical() { const containerRef = useRef(null); const bufferRef = useAudioBuffer(); - const { background1 } = useTheme(); - const [sketch, setSketch] = useState(undefined); useEffect(() => { + if (!containerRef.current) return; + const Sketch = (p5: P5) => { let actorSystem: ActorSystem; p5.setup = () => { @@ -45,18 +43,13 @@ export default function Optical() { actorSystem.display(p5 as P5.Graphics); }; }; - if (!sketch) { - let inst = new P5(Sketch, containerRef.current as HTMLElement); - setSketch(inst); - } + const sketch = new P5(Sketch, containerRef.current); return () => { - if (sketch) { - sketch.remove(); - } + sketch.remove(); }; - }, [background1, bufferRef, sketch]); + }, [bufferRef]); return
; } diff --git a/src/visualizer/visualizers/P5FrequencyBlue.tsx b/src/visualizer/visualizers/P5FrequencyBlue.tsx index 01e150d..75153f6 100644 --- a/src/visualizer/visualizers/P5FrequencyBlue.tsx +++ b/src/visualizer/visualizers/P5FrequencyBlue.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef } from "react"; import { useTheme } from "../../common/useTheme"; import { useAudioBuffer } from "../../common/useAudioBuffer"; import P5 from "p5"; @@ -7,9 +7,10 @@ export default function P5FrequencyBlue() { const containerRef = useRef(null); const bufferRef = useAudioBuffer(); const { background1 } = useTheme(); - const [sketch, setSketch] = useState(undefined); useEffect(() => { + if (!containerRef.current) return; + const Sketch = (p: P5) => { p.setup = () => { p.createCanvas(p.windowWidth, p.windowHeight); @@ -44,18 +45,12 @@ export default function P5FrequencyBlue() { }; }; - if (!sketch) { - let inst = new P5(Sketch, containerRef.current as HTMLElement); - - setSketch(inst); - } + const sketch = new P5(Sketch, containerRef.current); return () => { - if (sketch) { - sketch.remove(); - } + sketch.remove(); }; - }, [background1, bufferRef, sketch]); + }, [background1, bufferRef]); return
; } From 129808598bab02aaab8da3335cb9f2d6bc17edc9 Mon Sep 17 00:00:00 2001 From: Brian Mitchell Date: Sat, 6 Aug 2022 15:46:59 -0500 Subject: [PATCH 7/7] Scale canvas to render on HiDPI displays --- src/visualizer/visualizers/Optical.tsx | 10 ++++++++-- src/visualizer/visualizers/P5FrequencyBlue.tsx | 10 ++++++++-- visualizer/visualizer.css | 4 ++-- 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/visualizer/visualizers/Optical.tsx b/src/visualizer/visualizers/Optical.tsx index 7189fdf..a155b80 100644 --- a/src/visualizer/visualizers/Optical.tsx +++ b/src/visualizer/visualizers/Optical.tsx @@ -18,12 +18,18 @@ export default function Optical() { let actorSystem: ActorSystem; p5.setup = () => { p5.frameRate(FRAME_RATE); - p5.createCanvas(p5.windowWidth, p5.windowHeight); + p5.createCanvas( + p5.windowWidth * window.devicePixelRatio, + p5.windowHeight * window.devicePixelRatio + ); actorSystem = new ActorSystem(p5, ACTOR_COUNT, ACTOR_SPEED); }; p5.windowResized = () => { - p5.resizeCanvas(p5.windowWidth, p5.windowHeight); + p5.resizeCanvas( + p5.windowWidth * window.devicePixelRatio, + p5.windowHeight * window.devicePixelRatio + ); }; p5.draw = () => { diff --git a/src/visualizer/visualizers/P5FrequencyBlue.tsx b/src/visualizer/visualizers/P5FrequencyBlue.tsx index 75153f6..aa8a4e1 100644 --- a/src/visualizer/visualizers/P5FrequencyBlue.tsx +++ b/src/visualizer/visualizers/P5FrequencyBlue.tsx @@ -13,11 +13,17 @@ export default function P5FrequencyBlue() { const Sketch = (p: P5) => { p.setup = () => { - p.createCanvas(p.windowWidth, p.windowHeight); + p.createCanvas( + p.windowWidth * window.devicePixelRatio, + p.windowHeight * window.devicePixelRatio + ); }; p.windowResized = () => { - p.resizeCanvas(p.windowWidth, p.windowHeight); + p.resizeCanvas( + p.windowWidth * window.devicePixelRatio, + p.windowHeight * window.devicePixelRatio + ); }; p.draw = () => { diff --git a/visualizer/visualizer.css b/visualizer/visualizer.css index 0649c13..c502932 100644 --- a/visualizer/visualizer.css +++ b/visualizer/visualizer.css @@ -12,6 +12,6 @@ body { } canvas { - height: 100%; - width: 100%; + height: 100% !important; + width: 100% !important; }