From 2a33961334d7b992c482edb2db7a3f36fc35ed37 Mon Sep 17 00:00:00 2001 From: Anup Aglawe Date: Sat, 21 Jan 2023 22:26:46 +0530 Subject: [PATCH] feat: add wave modes --- src/assets/boat-like.svg | 3 ++ src/assets/chair.svg | 5 ++++ src/assets/wave-icon.svg | 5 ++++ src/components/customBar.jsx | 42 +++++++++++++++++++++----- src/components/home.jsx | 1 + src/components/svgCode.jsx | 4 +-- src/core/wave.js | 57 ++++++++++++++++++++++++++++++++---- 7 files changed, 102 insertions(+), 15 deletions(-) create mode 100644 src/assets/boat-like.svg create mode 100644 src/assets/chair.svg create mode 100644 src/assets/wave-icon.svg diff --git a/src/assets/boat-like.svg b/src/assets/boat-like.svg new file mode 100644 index 0000000..b0e60fd --- /dev/null +++ b/src/assets/boat-like.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/chair.svg b/src/assets/chair.svg new file mode 100644 index 0000000..5695cff --- /dev/null +++ b/src/assets/chair.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/assets/wave-icon.svg b/src/assets/wave-icon.svg new file mode 100644 index 0000000..8d02431 --- /dev/null +++ b/src/assets/wave-icon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/components/customBar.jsx b/src/components/customBar.jsx index 7cf259c..4f1eed4 100644 --- a/src/components/customBar.jsx +++ b/src/components/customBar.jsx @@ -4,8 +4,19 @@ import { HEIGHT_ARR } from '../constants' import ColorTool from './colorTool' import { ReactComponent as Flip } from './../assets/001-flip.svg' import frame from './../assets/Frame.png' //Frame.png +import { ReactComponent as Chair } from './../assets/chair.svg' //Frame.png +import { ReactComponent as Boat } from './../assets/boat-like.svg' //Frame.png +import { ReactComponent as Wave } from './../assets/wave-icon.svg' //Frame.png import darkFrame from './../assets/100.png' +const modes = { + classic: , + chairLeft: , + chairRight: , + boat: , + invertedBoat: , +} + function CustomBar({ onWaveConfig, onBGChange, @@ -26,6 +37,7 @@ function CustomBar({ const [flip, setFlip] = useState(true) const [height, setHeight] = useState(2) const [animateWave, setAnimateWave] = useState(false) + const [activeMode, setActiveMode] = useState('classic') useEffect(() => { onWaveConfig({ @@ -33,8 +45,9 @@ function CustomBar({ layerCount, height: HEIGHT_ARR[height], animated: animateWave, + activeMode: activeMode, }) - }, [segmentCount, layerCount, height, animateWave]) + }, [segmentCount, layerCount, height, animateWave, activeMode]) const regenerate = () => { onWaveConfig({ @@ -42,6 +55,7 @@ function CustomBar({ layerCount, height: HEIGHT_ARR[height], animated: animateWave, + activeMode: activeMode, }) } @@ -60,7 +74,7 @@ function CustomBar({ return (
-
+
-
+
+ {Object.entries(modes).map(([name, icon]) => ( + + ))} +
+
-

Export

+

Export

diff --git a/src/core/wave.js b/src/core/wave.js index fe61ee7..f2f1b62 100644 --- a/src/core/wave.js +++ b/src/core/wave.js @@ -2,29 +2,75 @@ const defaultOptions = {} const svgns = 'http://www.w3.org/2000/svg' import { computeControlPoints } from './bezier-spline' +// Yeah... cyclohexane +const conformations = { + classic: {}, + chairLeft: { + delta: 75, + }, + chairRight: { + delta: -75, + offsetY: true, + }, + boat: { + startY: 1, + endY: 1, + }, + invertedBoat: { + startY: 0, + endY: 0, + }, +} + // layercount is default to 2. Increasing the number would stack up n-1 waves. -function generatePoints(width, height, segmentCount, layerCount, variance) { +function generatePoints( + width, + height, + segmentCount, + layerCount, + variance, + activeMode, +) { const cellWidth = width / segmentCount const cellHeight = height / layerCount const moveLimitX = cellWidth * variance * 0.5 const moveLimitY = cellHeight * variance const points = [] - for (let y = cellHeight; y < height; y += cellHeight) { + let layrIdx = 1 + const mode = conformations[activeMode] + + let y = moveLimitY + (mode.offsetY ? (layerCount - 1) * 75 : 0) + + while (layrIdx < layerCount) { let pointsPerLayer = [] - pointsPerLayer.push({ x: 0, y: Math.floor(y) }) + let level = 0 + pointsPerLayer.push({ + x: 0, + y: mode.startY !== undefined ? mode.startY * height : Math.floor(y), + }) + for (let x = cellWidth; x < width; x += cellWidth) { //@anup: this decides whether a segment is crest or trough - const varietalY = y - moveLimitY / 2 + Math.random() * moveLimitY + const varietalY = y - moveLimitY / 2 + Math.random() * moveLimitY + level const varietalX = x - moveLimitX / 2 + Math.random() * moveLimitX pointsPerLayer.push({ x: Math.floor(varietalX), y: Math.floor(varietalY), }) + if (mode.delta) { + level += mode.delta + } } - pointsPerLayer.push({ x: width, y: Math.floor(y) }) + pointsPerLayer.push({ + x: width, + y: mode.endY !== undefined ? mode.endY * height : Math.floor(y + level), + }) + points.push(pointsPerLayer) + y += cellHeight + layrIdx += 1 } return points } @@ -122,6 +168,7 @@ export class Wavery { this.properties.segmentCount, this.properties.layerCount, this.properties.variance, + this.properties.activeMode, ) //TODO: refactor repetitive code this.aniPoints = [