From 6fe49c5cd6ef20dc477f11dac098e4c18c2584ee Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 03:01:02 +0200 Subject: Dodao korisnička podešavanja za pozadinu. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reactive-background.component.ts | 52 +++++++++++++++------- .../_pages/playground/playground.component.html | 19 +++++++- .../app/_pages/playground/playground.component.ts | 18 +++++++- frontend/src/app/app.component.html | 7 +-- frontend/src/app/app.component.ts | 15 ++++--- frontend/src/app/material.module.ts | 6 ++- frontend/src/styles/helper.css | 12 +++++ 7 files changed, 100 insertions(+), 29 deletions(-) (limited to 'frontend') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 73cdb326..4cafbc6d 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -1,4 +1,5 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-reactive-background', @@ -22,6 +23,9 @@ export class ReactiveBackgroundComponent implements AfterViewInit { @Input() pointColor: string = '#ffffff'; @Input() cursorLineColor: string = '#ff0000'; + @Input() animate: boolean = true; + @Input() fill: number = 1.0; + private fleeSpeed = 0.005; private points: Point[] = []; @@ -35,7 +39,7 @@ export class ReactiveBackgroundComponent implements AfterViewInit { private time: number = 0; - constructor() { } + constructor(private cookie: CookieService) { } private mouseX = 0; private mouseY = 0; @@ -77,6 +81,13 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.resize(); setInterval(() => { + if (this.cookie.check('animateBackground')) { + this.animate = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.fill = parseFloat(this.cookie.get('backgroundFill')); + } + this.drawBackground(); }, 1000 / 60); } @@ -85,7 +96,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { scrollBackground(e: Event) { const scrolledAmount = window.scrollY - this.lastScrollY; - this.points.forEach((point) => { + this.points.forEach((point, index) => { + if (index > this.numPoints * this.fill) return; point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed; this.keepPointWithinBounds(point); }) @@ -100,19 +112,21 @@ export class ReactiveBackgroundComponent implements AfterViewInit { //this.ctx.fillRect(0, 0, this.width, this.height); this.points.forEach((point, index) => { - this.updatePoint(point); + if (index > this.numPoints * this.fill) return; + this.drawLines(point, index); this.drawPoint(point); + + if (this.animate) + this.updatePoint(point); }); //this.drawPoint(new Point(this.mouseX, this.mouseY, 12, 0)); - - this.time += 1; } drawLines(p: Point, index: number) { let i = index + 1; - while (i < this.points.length) { + while (i < this.points.length * this.fill) { const otherPoint = this.points[i]; const dist = this.distance(p.x, p.y, otherPoint.x, otherPoint.y); @@ -151,24 +165,22 @@ export class ReactiveBackgroundComponent implements AfterViewInit { } updatePoint(p: Point) { - const vx = Math.sin(p.direction); - const vy = Math.cos(p.direction); - - p.x = p.x + vx * this.speed; - p.y = p.y + vy * this.speed; - const mx = this.mouseX; const my = this.mouseY; const distToCursor = this.distance(p.x, p.y, mx, my); + if (distToCursor < this.cursorDistance) { - p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed; - p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed; + const t = (distToCursor / this.cursorDistance); + p.x -= ((mx - p.x) / distToCursor) * this.speed * (1 + t * 2); + p.y -= ((my - p.y) / distToCursor) * this.speed * (1 + t * 2); + + p.direction = this.lerp(p.direction, Math.atan2(my - p.y, mx - p.x) * 180 / Math.PI, t); const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; grd.addColorStop(0, this.cursorLineColor + alpha); - grd.addColorStop(1, this.cursorLineColor + '00'); + grd.addColorStop(0.5, this.cursorLineColor + '00'); this.ctx.strokeStyle = grd; this.ctx.beginPath(); this.ctx.moveTo(p.x * this.width, p.y * this.height); @@ -176,9 +188,19 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.ctx.stroke(); } + const vx = Math.sin(p.direction); + const vy = Math.cos(p.direction); + + p.x = p.x + vx * this.speed; + p.y = p.y + vy * this.speed; + this.keepPointWithinBounds(p); } + lerp(start: number, end: number, amt: number) { + return (1 - amt) * start + amt * end + } + keepPointWithinBounds(p: Point) { p.x = p.x % 1.0; p.y = p.y % 1.0; diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html index 5622cd83..d3751d5c 100644 --- a/frontend/src/app/_pages/playground/playground.component.html +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -1 +1,18 @@ -
\ No newline at end of file +
+
+

+ Broj tačaka: +

+ + + +
+
+

+ Animacija:

+ + +
+
+
+
\ No newline at end of file diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts index 007a455e..f8ea8bb4 100644 --- a/frontend/src/app/_pages/playground/playground.component.ts +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-playground', @@ -7,9 +8,24 @@ import { Component, OnInit } from '@angular/core'; }) export class PlaygroundComponent implements OnInit { - constructor() { } + animateBackground = true; + backgroundFill = 1.0; + + constructor(private cookie: CookieService) { } + + updateBGPrefs() { + this.cookie.set('animateBackground', "" + this.animateBackground); + this.cookie.set('backgroundFill', "" + this.backgroundFill); + console.log(this.animateBackground, this.backgroundFill); + } ngOnInit(): void { + if (this.cookie.check('animateBackground')) { + this.animateBackground = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.backgroundFill = parseFloat(this.cookie.get('backgroundFill')); + } } } diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ba7743b5..984389c4 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,11 +1,12 @@ - + - + - + +pozadina