Skip to content
GitLab
Commit 8ba945f0 authored by Hauk Aleksander Olaussen's avatar Hauk Aleksander Olaussen 🛀🏿
Browse files

Merge branch 'animation' into 'master' 

Animation

Closes #1

See merge request !14
parents cc3f6915 f0372cdf
Hide whitespace changes
Inline Side-by-side
public/animation2.html deleted 100644 → 0
View file @ cc3f6915
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="600" style="border:1px solid #000000;">
</canvas>
<script>
function draw(timeStamp){
ctx.globalAlpha = 0.5;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#0000ff";
for (i = 0; i< amountCircles; i++){
ctx.beginPath();
var angle = ((i/amountCircles *Math.PI*2) + timeStamp*spinSpeed)% (Math.PI*2);
var xPos = canvas.width/2 + (pathRadius + (Math.sin(timeStamp*shrinkSpeed)* pathRadiusDelta)) * Math.cos(angle);
var yPos = canvas.height/2 + (pathRadius + (Math.sin(timeStamp*shrinkSpeed)* pathRadiusDelta)) * Math.sin(angle);
ctx.arc(xPos, yPos, circleRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
}
requestAnimationFrame(draw);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var amountCircles = 20;
var circleRadius = 20;
var pathRadius = 150;
var pathRadiusDelta = 80;
var spinSpeed = 0.004;
var shrinkSpeed = 0.0005;
draw();
</script>
</body>
public/animationTest.html deleted 100644 → 0
View file @ cc3f6915
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="500" height="600" style="border:1px solid #000000;">
</canvas>
<script>
function draw(timeStamp) {
ctx.globalAlpha = 0.5;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(i = 0; i< boxes.length; i++){
ctx.fillStyle = boxes[i][1];
if (boxes[i][0]*100%2==0){
var xPos = boxes[i][0]*timeStamp%(canvas.width+boxes[i][2])-boxes[i][2];
}
else{
var xPos = canvas.width-(boxes[i][0]*timeStamp%(canvas.width+boxes[i][2]));
}
ctx.fillRect( xPos, boxes[i][3], boxes[i][2], boxes[i][2]);
}
requestAnimationFrame(draw);
}
function createBoxes(){
for(i = 0; i<amountBoxes; i++){
var speed = Math.floor(Math.random() * 100)/100;
var color = "#"+Math.floor(Math.random()*16777215).toString(16);
var size = Math.floor(Math.random() * 200);
var y = Math.floor(Math.random() * canvas.height);
var box = [speed, color, size, y];
boxes.push(box);
}
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var amountBoxes = 35;
var boxes = [];
createBoxes();
draw();
</script>
</body>
src/App.tsx
View file @ 8ba945f0
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);
}
......
src/components/Exhibition.tsx
View file @ 8ba945f0
import React, { useEffect } from "react";
import { Color } from "../Enums";
import { Color } from "../utils/Enums";
import AudioPlayer from "./AudioPlayer";
/**
......
src/media/audio4.mp3
View file @ 8ba945f0
No preview for this file type
src/Animations.ts → src/utils/Animations.ts
View file @ 8ba945f0
......@@ -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);
};
src/types.d.ts → src/utils/types.d.ts
View file @ 8ba945f0
......@@ -41,3 +41,9 @@ type Box = {
size: number;
y: number;
};
type Circle = {
speed: number;
color: string;
xPos: number;
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment