const AbstractWavesPage = lazy(() => import('../pages/apps/AbstractWavesPage'));

const TopographicMapPage = lazy(() => import('../pages/apps/TopographicMapPage'));

<Route

path="/apps::aw"

element={<Navigate to="/apps/abstract-waves" replace />}

/>

<Route

path="/apps::topo"

element={<Navigate to="/apps/topographic-maps" replace />}

/>

<Route

path="/apps/abstract-waves"

element={

<motion.div

initial="initial"

animate="in"

exit="out"

variants={pageVariants}

transition={pageTransition}

>

<Suspense fallback={<Loading />}>

<AbstractWavesPage />

</Suspense>

</motion.div>

}

/>

<Route

path="/apps/topographic-maps"

element={

<motion.div

initial="initial"

animate="in"

exit="out"

variants={pageVariants}

transition={pageTransition}

>

<Suspense fallback={<Loading />}>

<TopographicMapPage />

</Suspense>

</motion.div>

}

/>

import React, {useState, useEffect, useRef, useCallback} from 'react';

import {Link} from 'react-router-dom';

import {

ArrowLeftIcon,

DownloadSimple,

ArrowsClockwise,

} from '@phosphor-icons/react';

import useSeo from '../../hooks/useSeo';

import {useToast} from '../../hooks/useToast';

import BreadcrumbTitle from '../../components/BreadcrumbTitle';

const AbstractWavesPage = () => {

useSeo({

title: 'Abstract Waves | Fezcodex',

description: 'Generate mesmerizing black and white abstract wave patterns.',

keywords: ['waves', 'generative art', 'abstract', 'black and white', 'canvas'],

});

const {addToast} = useToast();

const canvasRef = useRef(null);

// --- Parameters ---

const [lineCount, setLineCount] = useState(50);

const [amplitude, setAmplitude] = useState(50);

const [frequency, setFrequency] = useState(0.02);

const [perspective, setPerspective] = useState(10); // Spacing

const [noise, setNoise] = useState(10); // Random offset

const [phase, setPhase] = useState(0);

const [lineWidth, setLineWidth] = useState(2);

const [fill, setFill] = useState(true); // Fill below line to hide lines behind

const [inverted, setInverted] = useState(false);

const drawWaves = useCallback(

(ctx, w, h) => {

const bgColor = inverted ? '#000000' : '#ffffff';

const lineColor = inverted ? '#ffffff' : '#000000';

ctx.fillStyle = bgColor;

ctx.fillRect(0, 0, w, h);

ctx.lineWidth = lineWidth;

ctx.strokeStyle = lineColor;

ctx.fillStyle = bgColor; // For hiding lines behind

// Center vertically roughly

const totalHeight = lineCount * perspective;

const startY = (h - totalHeight) / 2;

for (let i = 0; i < lineCount; i++) {

const yBase = startY + i * perspective;

ctx.beginPath();

for (let x = 0; x <= w; x += 5) { // Step size 5 for performance

// Create a complex wave by combining sine waves and noise

const distFromCenter = Math.abs(x - w / 2);

const dampener = Math.max(0, 1 - distFromCenter / (w / 2)); // 1 at center, 0 at edges

// Main wave

let y = yBase + Math.sin(x * frequency + phase + (i * 0.1)) * amplitude * dampener;

// Add some "noise" or irregularity

y += Math.cos(x * frequency * 2.5 + (i * 0.5)) * (noise * dampener);

if (x === 0) {

ctx.moveTo(x, y);

} else {

ctx.lineTo(x, y);

}

}

if (fill) {

// Close the path for filling to hide lines behind

ctx.lineTo(w, w); // Down to bottom right (roughly) - actually just needs to be low enough

ctx.lineTo(0, w); // Back to bottom left

ctx.closePath();

ctx.fill();

// Re-stroke the top line

ctx.stroke();

} else {

ctx.stroke();

}

}

},

[lineCount, amplitude, frequency, perspective, noise, phase, lineWidth, fill, inverted]

);

// Effect to redraw

useEffect(() => {

const canvas = canvasRef.current;

if (!canvas) return;

const ctx = canvas.getContext('2d');

const width = canvas.width;

const height = canvas.height;

let rafId = requestAnimationFrame(() => drawWaves(ctx, width, height));

return () => cancelAnimationFrame(rafId);

}, [drawWaves]);

// Init Canvas Size

useEffect(() => {

const canvas = canvasRef.current;

if (canvas) {

canvas.width = 1200;

canvas.height = 800;

}

}, []);

const handleDownload = () => {

const canvas = canvasRef.current;

const link = document.createElement('a');

link.download = `abstract_waves_${Date.now()}.png`;

link.href = canvas.toDataURL();

link.click();

addToast({

title: 'Saved',

message: 'Wave pattern saved to device.',

duration: 3000,

});

};

const randomizeParams = () => {

setLineCount(30 + Math.floor(Math.random() * 50));

setAmplitude(20 + Math.random() * 80);

setFrequency(0.005 + Math.random() * 0.04);

setPerspective(5 + Math.random() * 20);

setNoise(Math.random() * 40);

setPhase(Math.random() * Math.PI * 2);

setInverted(Math.random() > 0.5);

};

return (

<div className="min-h-screen bg-gray-50 flex flex-col">

<div className="container mx-auto px-4 py-8 flex-grow flex flex-col max-w-6xl">

<Link

to="/apps"

className="group text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"

>

<ArrowLeftIcon className="text-xl transition-transform group-hover:-translate-x-1"/>{' '}

Back to Apps

</Link>

<BreadcrumbTitle title="Abstract Waves" slug="aw"/>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 flex-grow">

{/* Controls */}

<div className="space-y-6 bg-white p-6 rounded-xl shadow-md border border-gray-200 h-fit">

<div className="flex gap-2 mb-4">

<button

onClick={randomizeParams}

className="flex-1 py-2 px-4 bg-gray-800 text-white rounded-lg hover:bg-gray-900 flex items-center justify-center gap-2 transition-colors"

>

<ArrowsClockwise size={20}/> Randomize

</button>

<button

onClick={handleDownload}

className="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200"

title="Download"

>

<DownloadSimple size={24}/>

</button>

</div>

{/* Toggles */}

<div className="flex gap-4">

<label className="flex items-center gap-2 cursor-pointer">

<input

type="checkbox"

checked={inverted}

onChange={(e) => setInverted(e.target.checked)}

className="w-4 h-4 accent-black"

/>

<span className="text-sm font-medium text-gray-700">Invert Colors</span>

</label>

<label className="flex items-center gap-2 cursor-pointer">

<input

type="checkbox"

checked={fill}

onChange={(e) => setFill(e.target.checked)}

className="w-4 h-4 accent-black"

/>

<span className="text-sm font-medium text-gray-700">Opaque Lines</span>

</label>

</div>

<div className="space-y-4">

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Line Count</span>

<span className="text-gray-500">{lineCount}</span>

</label>

<input

type="range"

min="10"

max="100"

value={lineCount}

onChange={(e) => setLineCount(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Amplitude (Height)</span>

<span className="text-gray-500">{Math.round(amplitude)}</span>

</label>

<input

type="range"

min="0"

max="150"

value={amplitude}

onChange={(e) => setAmplitude(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Frequency (Width)</span>

<span className="text-gray-500">{frequency.toFixed(3)}</span>

</label>

<input

type="range"

min="0.001"

max="0.05"

step="0.001"

value={frequency}

onChange={(e) => setFrequency(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Spacing</span>

<span className="text-gray-500">{perspective}px</span>

</label>

<input

type="range"

min="2"

max="40"

value={perspective}

onChange={(e) => setPerspective(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Noise / Distortion</span>

<span className="text-gray-500">{Math.round(noise)}</span>

</label>

<input

type="range"

min="0"

max="100"

value={noise}

onChange={(e) => setNoise(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Phase Shift</span>

<span className="text-gray-500">{phase.toFixed(1)}</span>

</label>

<input

type="range"

min="0"

max="10"

step="0.1"

value={phase}

onChange={(e) => setPhase(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

<div>

<label className="flex justify-between text-sm font-medium text-gray-700 mb-1">

<span>Line Width</span>

<span className="text-gray-500">{lineWidth}px</span>

</label>

<input

type="range"

min="1"

max="10"

value={lineWidth}

onChange={(e) => setLineWidth(Number(e.target.value))}

className="w-full accent-black"

/>

</div>

</div>

<div className="bg-gray-100 p-3 rounded-lg text-xs text-gray-600">

<strong>Tip:</strong> "Opaque Lines" hides the waves behind the current one, creating a 3D landscape

effect similar to the famous "Unknown Pleasures" album cover.

</div>

</div>

{/* Canvas */}

<div

className="lg:col-span-2 bg-white rounded-xl shadow-lg border border-gray-200 p-4 flex items-center justify-center overflow-hidden">

<canvas

ref={canvasRef}

className="max-w-full h-auto rounded-lg shadow-inner border border-gray-100"

style={{maxHeight: '600px'}}

/>

</div>

</div>

</div>

</div>

);

export default AbstractWavesPage;