diff --git a/public/animation2.html b/public/animation2.html deleted file mode 100644 index ea7ef1b80e961bb90a2e081273f1a613bffd77d5..0000000000000000000000000000000000000000 --- a/public/animation2.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - diff --git a/public/animationTest.html b/public/animationTest.html deleted file mode 100644 index 79eb51b115eabc1efa5f40a8f166ccbcaf935a66..0000000000000000000000000000000000000000 --- a/public/animationTest.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - - - - diff --git a/src/App.tsx b/src/App.tsx index a71dc1cd1289c9d7a9bf2e105829ce8ba67ab649..3434ccef59bb847d0a9478e8b7227b0a2dd2fd33 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from "react"; import Exhibition from "./components/Exhibition"; -import { fetchPoetryFromPoetryDB } from "./PoetryAPI"; +import { fetchPoetryFromPoetryDB } from "./utils/PoetryAPI"; import Header from "./components/Header"; -import LocalStorageManager from "./LocalStorageManager"; -import { animate } from "./Animations"; -import { Color, Theme, Font } from "./Enums"; +import LocalStorageManager from "./utils/LocalStorageManager"; +import { animate } from "./utils/Animations"; +import { Color, Theme, Font } from "./utils/Enums"; import "./App.css"; -import SessionStorageManager from "./SessionStorageManager"; +import SessionStorageManager from "./utils/SessionStorageManager"; const ssm: SessionStorageManager = new SessionStorageManager(); /** @@ -91,7 +91,6 @@ const App: React.FC = () => { return; } setSessionStack(stack); - console.log(stack) }; /** @@ -115,20 +114,17 @@ const App: React.FC = () => { }; /** - * Temporary function as not all the animations are done + * Calls the animate function with the specified parameters. It also changes the color state and calls updateHistory. * @param specification - the color specification + * @param force - whether to force the function to run */ // eslint-disable-next-line react-hooks/exhaustive-deps const drawAnimation = ( specification: Color = Color.RANDOM, force: boolean = false ) => { - let index: number = currentIndex; - if (index > 1) { - index = 1; - } if (userEdit || force) { - animate(index, specification); + animate(currentIndex, specification); setColor(specification); updateHistory(theme, specification, font); } diff --git a/src/components/Exhibition.tsx b/src/components/Exhibition.tsx index f595bd0033f729494fbf7f604969d92e9814fe15..54397ce43779130e156b1805a6614d28f62e6779 100644 --- a/src/components/Exhibition.tsx +++ b/src/components/Exhibition.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { Color } from "../Enums"; +import { Color } from "../utils/Enums"; import AudioPlayer from "./AudioPlayer"; /** diff --git a/src/media/audio4.mp3 b/src/media/audio4.mp3 index 091edaba275876b80188116d931e4c9652b15785..b5991e055b4da2fb4444a6554168e6cf56ae8bc3 100644 Binary files a/src/media/audio4.mp3 and b/src/media/audio4.mp3 differ diff --git a/src/Animations.ts b/src/utils/Animations.ts similarity index 58% rename from src/Animations.ts rename to src/utils/Animations.ts index d6e07f5886521f43d66df9ae3569bb72d8bff5b2..1f36d5f0ba8b6387f88f903a4f354fb0eca9980a 100644 --- a/src/Animations.ts +++ b/src/utils/Animations.ts @@ -177,6 +177,149 @@ const draw2: AnimationFunction = ( requestAnimationFrame(draw2); }; +// ANIMATION NR 3 + +let circles: Circle[] = []; +const circleAmount: number = 180; +const circleRadius: number = 15; + +/** + * Creates a given amount of circles with the given weighted color + * @param amount - amount of circles + * @param specification - weighted color + */ +const createCircles = ( + amount: number, + specification: Color = Color.RANDOM +): void => { + circles = []; + for (let i = 0; i < amount; i++) { + const color: string = generateRandomColor(specification); + const speed: number = (50 + Math.floor(Math.random() * 75)) / 100; + const xPos: number = Math.floor(Math.random() * 400); + const newCircle: Circle = { speed, color, xPos }; + circles.push(newCircle); + } +}; + +/** + * The function for animation nr 3. + * @param specification - the color specification + * @param clear - a boolean signaling the change/clear of color + */ +const draw3: AnimationFunction = ( + specification: Color = Color.RANDOM, + clear: boolean = false +): void => { + if (clear) { + createCircles(circleAmount, specification); + } + + const canvas: HTMLCanvasElement = document.getElementById( + "canvas" + ) as HTMLCanvasElement; + const ctx: CanvasRenderingContext2D = canvas.getContext("2d")!; + const timeStamp: number = Date.now(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + for (let i = 0; i < circles.length; i++) { + ctx.beginPath(); + const yPos: number = + 0 - + circleRadius * 2 + + ((circles[i].speed * timeStamp) % (canvas.height + circleRadius * 2)); + const alpha: number = + 1 - (yPos + circleRadius * 2) / (canvas.height + circleRadius * 2); + ctx.globalAlpha = Math.sqrt(alpha) / 1.2; + ctx.fillStyle = circles[i].color; + ctx.arc(circles[i].xPos, yPos, circleRadius, 0, 2 * Math.PI); + ctx.fill(); + } + + requestAnimationFrame(draw3); +}; + +// ANIMATION NR 4 + +let draw4Color: string = ""; +let xCirlePos: number = 200; +let yCirlePos: number = 250; +let xVelocity: number = 0.45; +let yVelocity: number = 0.65; + +/** + * The function for animation nr 4. It keeps track of the variables above to move the circle around. + * It will speed up the circle with every call + * @param specification - the color specification + * @param clear - a boolean signaling the change/clear of color + */ +const draw4: AnimationFunction = ( + specification: Color = Color.RANDOM, + clear: boolean = false +): void => { + if (clear) { + draw4Color = generateRandomColor(specification); + } + const canvas: HTMLCanvasElement = document.getElementById( + "canvas" + ) as HTMLCanvasElement; + const ctx: CanvasRenderingContext2D = canvas.getContext("2d")!; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.globalAlpha = 0.5; + const radius: number = 40; + xCirlePos = xCirlePos + xVelocity; + yCirlePos = yCirlePos + yVelocity; + if (xCirlePos + radius > canvas.width || xCirlePos - radius < 0) { + xVelocity = xVelocity * -1; + } + if (yCirlePos + radius > canvas.height || yCirlePos - radius < 0) { + yVelocity = yVelocity * -1; + } + + ctx.fillStyle = draw4Color; + ctx.beginPath(); + ctx.arc(xCirlePos, yCirlePos, radius, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); + + requestAnimationFrame(draw4); +}; + +// ANIMATION NR 5 +let draw5Color: string = ""; + +/** + * The function for animation 5. It keeps track of the color in the vaiable above + * @param specification - the color specification + * @param clear - a boolean signaling the change/clear of color + */ +const draw5 = (specification: Color = Color.RANDOM, clear: boolean = false) => { + if (clear) { + draw5Color = generateRandomColor(specification); + } + const canvas: HTMLCanvasElement = document.getElementById( + "canvas" + ) as HTMLCanvasElement; + const ctx: CanvasRenderingContext2D = canvas.getContext("2d")!; + const amountOfCircles: number = 50; + const radius: number = 20; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.globalAlpha = 0.5; + const timeStamp: number = Date.now(); + const cHeight: number = canvas.height + radius * 2; + for (let i = 0; i < amountOfCircles; i++) { + const yPos: number = + ((timeStamp * 0.05 + (i / amountOfCircles) * cHeight) % cHeight) - radius; + const xPos: number = Math.sin(yPos * 0.05) * 200 + 200; + ctx.beginPath(); + ctx.fillStyle = draw5Color; + ctx.arc(xPos, yPos, radius, 0, 2 * Math.PI); + ctx.fill(); + ctx.stroke(); + ctx.closePath(); + } + requestAnimationFrame(draw5); +}; + // EXPORTED ANIMATION FUNCTION USED IN EXHIBITION /** @@ -186,6 +329,6 @@ const draw2: AnimationFunction = ( * @param specification - the color specification */ export const animate = (index: number, specification: Color = Color.RANDOM) => { - const drawFunction = [draw1, draw2]; + const drawFunction = [draw1, draw2, draw3, draw4, draw5]; drawFunction[index](specification, true); }; diff --git a/src/Enums.ts b/src/utils/Enums.ts similarity index 100% rename from src/Enums.ts rename to src/utils/Enums.ts diff --git a/src/LocalStorageManager.ts b/src/utils/LocalStorageManager.ts similarity index 100% rename from src/LocalStorageManager.ts rename to src/utils/LocalStorageManager.ts diff --git a/src/PoetryAPI.ts b/src/utils/PoetryAPI.ts similarity index 100% rename from src/PoetryAPI.ts rename to src/utils/PoetryAPI.ts diff --git a/src/SessionStorageManager.ts b/src/utils/SessionStorageManager.ts similarity index 100% rename from src/SessionStorageManager.ts rename to src/utils/SessionStorageManager.ts diff --git a/src/types.d.ts b/src/utils/types.d.ts similarity index 91% rename from src/types.d.ts rename to src/utils/types.d.ts index 278f4564facce54bdaa94aa971e460415410b211..5b5b36e0543db9606a3dab6a89c1ee95444a829f 100644 --- a/src/types.d.ts +++ b/src/utils/types.d.ts @@ -41,3 +41,9 @@ type Box = { size: number; y: number; }; + +type Circle = { + speed: number; + color: string; + xPos: number; +};