diff --git a/src/di/particle-factory.ts b/src/di/particle-factory.ts index 71310f7..91d1c4d 100644 --- a/src/di/particle-factory.ts +++ b/src/di/particle-factory.ts @@ -5,6 +5,7 @@ import {ParticleImageService} from "../services/particle-image.service"; import {ParticleService} from "../services/particle.service"; export const ParticleFactory = (route: ActivatedRoute) => { + console.log('call particle factory') let type = ''; route.params.subscribe(params => { type = params['type']; diff --git a/src/gallery/gallery-detail/gallery-detail.component.html b/src/gallery/gallery-detail/gallery-detail.component.html index 0a98b75..f750223 100644 --- a/src/gallery/gallery-detail/gallery-detail.component.html +++ b/src/gallery/gallery-detail/gallery-detail.component.html @@ -1,9 +1,12 @@
- +
+ Try Some Controls + +
-
+
diff --git a/src/gallery/gallery-detail/gallery-detail.component.scss b/src/gallery/gallery-detail/gallery-detail.component.scss index b1b9cf8..0ad3288 100644 --- a/src/gallery/gallery-detail/gallery-detail.component.scss +++ b/src/gallery/gallery-detail/gallery-detail.component.scss @@ -11,14 +11,19 @@ } .canvas-handler { - flex: 0 0 120px; + flex: 1 0 120px; margin: 0 1rem; + + .title { + font-size: 1.2rem; + padding-bottom: 4px; + border-bottom: 1px solid #fff6; + } } } .footer { - height: 2rem; - //background: #fff5; + margin: 1rem 0; } } diff --git a/src/gallery/gallery-detail/gallery-detail.component.ts b/src/gallery/gallery-detail/gallery-detail.component.ts index fc022c5..02953c7 100644 --- a/src/gallery/gallery-detail/gallery-detail.component.ts +++ b/src/gallery/gallery-detail/gallery-detail.component.ts @@ -1,21 +1,31 @@ -import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from "@angular/router"; +import {Artifact, ArtifactToken, MOCK_ARTIFACTS} from "../../di/mock"; import {ParticleFactory} from "../../di/particle-factory"; +import {ParticleGravityService} from "../../services/particle-gravity.service"; +import {ParticleHarmonicService} from "../../services/particle-harmonic.service"; +import {ParticleImageService} from "../../services/particle-image.service"; import {ParticleService} from "../../services/particle.service"; +import {GravityHandlerComponent} from "../gallery-handler/gravity-handler/gravity-handler.component"; +import {HarmonicHandlerComponent} from "../gallery-handler/harmonic-handler/harmonic-handler.component"; +import {ImageHandlerComponent} from "../gallery-handler/image-handler/image-handler.component"; @Component({ selector: 'app-gallery-detail', templateUrl: './gallery-detail.component.html', styleUrl: './gallery-detail.component.scss', providers: [ - { provide: ParticleService, useFactory: ParticleFactory, deps: [ActivatedRoute] } + { provide: ParticleService, useFactory: ParticleFactory, deps: [ActivatedRoute] }, ] }) export class GalleryDetailComponent implements OnInit, AfterViewInit { @ViewChild('canvas') canvasRef!: ElementRef; - constructor(private particleService: ParticleService, - private router: Router) {} + constructor(protected particleService: ParticleService, + private router: Router, + private route: ActivatedRoute + ) { + } ngOnInit() { } @@ -28,4 +38,22 @@ export class GalleryDetailComponent implements OnInit, AfterViewInit { toGalleryHome() { this.router.navigate(['gallery/home']) } + + // @ts-ignore + getHandlerComponent() { + let type = ''; + this.route.params.subscribe(params => { + type = params['type'] + }); + switch (type) { + case 'harmonic': + return HarmonicHandlerComponent; + case 'gravity': + return GravityHandlerComponent; + case 'dancing': + return ImageHandlerComponent; + default: + return null; + } + } } diff --git a/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.html b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.html new file mode 100644 index 0000000..ab19a6b --- /dev/null +++ b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.html @@ -0,0 +1 @@ +

gravity-handler works!

diff --git a/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.scss b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.spec.ts b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.spec.ts new file mode 100644 index 0000000..b9080da --- /dev/null +++ b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GravityHandlerComponent } from './gravity-handler.component'; + +describe('GravityHandlerComponent', () => { + let component: GravityHandlerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [GravityHandlerComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(GravityHandlerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.ts b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.ts new file mode 100644 index 0000000..d50bb00 --- /dev/null +++ b/src/gallery/gallery-handler/gravity-handler/gravity-handler.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import {ParticleGravityService} from "../../../services/particle-gravity.service"; + +@Component({ + selector: 'app-gravity-handler', + templateUrl: './gravity-handler.component.html', + styleUrl: './gravity-handler.component.scss', + providers: [ParticleGravityService] +}) +export class GravityHandlerComponent { + constructor(private particleGravityService: ParticleGravityService) { + } +} diff --git a/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.html b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.html new file mode 100644 index 0000000..99803a1 --- /dev/null +++ b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.html @@ -0,0 +1,16 @@ +
+ + {{ isComposite ? 'Composited' : 'Divided'}} +
+
+ + + + Circle + + + Rectangle + + + +
diff --git a/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.scss b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.spec.ts b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.spec.ts new file mode 100644 index 0000000..b1d6d60 --- /dev/null +++ b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HarmonicHandlerComponent } from './harmonic-handler.component'; + +describe('HarmonicHandlerComponent', () => { + let component: HarmonicHandlerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HarmonicHandlerComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HarmonicHandlerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.ts b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.ts new file mode 100644 index 0000000..69101cd --- /dev/null +++ b/src/gallery/gallery-handler/harmonic-handler/harmonic-handler.component.ts @@ -0,0 +1,29 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {HarmonicParticleStyle, ParticleHarmonicService} from "../../../services/particle-harmonic.service"; + +@Component({ + selector: 'app-harmonic-handler', + templateUrl: './harmonic-handler.component.html', + styleUrl: './harmonic-handler.component.scss', +}) +export class HarmonicHandlerComponent implements OnInit{ + // use the output service from factory + @Input() particleService: ParticleHarmonicService; + + isComposite = false; + particleStyle: HarmonicParticleStyle = "circle"; + + constructor() { + } + + ngOnInit() { + } + + toggleComposite() { + this.particleService.toggleComposite(); + } + + setParticleParticle(style: HarmonicParticleStyle) { + this.particleService.setParticleStyle(style); + } +} diff --git a/src/gallery/gallery-handler/image-handler/image-handler.component.html b/src/gallery/gallery-handler/image-handler/image-handler.component.html new file mode 100644 index 0000000..2caaea7 --- /dev/null +++ b/src/gallery/gallery-handler/image-handler/image-handler.component.html @@ -0,0 +1 @@ +

image-handler works!

diff --git a/src/gallery/gallery-handler/image-handler/image-handler.component.scss b/src/gallery/gallery-handler/image-handler/image-handler.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/gallery/gallery-handler/image-handler/image-handler.component.spec.ts b/src/gallery/gallery-handler/image-handler/image-handler.component.spec.ts new file mode 100644 index 0000000..f219afb --- /dev/null +++ b/src/gallery/gallery-handler/image-handler/image-handler.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ImageHandlerComponent } from './image-handler.component'; + +describe('ImageHandlerComponent', () => { + let component: ImageHandlerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ImageHandlerComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ImageHandlerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/gallery/gallery-handler/image-handler/image-handler.component.ts b/src/gallery/gallery-handler/image-handler/image-handler.component.ts new file mode 100644 index 0000000..1679927 --- /dev/null +++ b/src/gallery/gallery-handler/image-handler/image-handler.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-image-handler', + templateUrl: './image-handler.component.html', + styleUrl: './image-handler.component.scss' +}) +export class ImageHandlerComponent { + +} diff --git a/src/gallery/gallery.module.ts b/src/gallery/gallery.module.ts index b28ddf7..a0bc900 100644 --- a/src/gallery/gallery.module.ts +++ b/src/gallery/gallery.module.ts @@ -1,20 +1,35 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import {FormsModule} from "@angular/forms"; import {MatButtonModule} from "@angular/material/button"; import {MatCardModule} from "@angular/material/card"; +import {MatRadioModule} from "@angular/material/radio"; +import {MatSlideToggleModule} from "@angular/material/slide-toggle"; import {GalleryDetailComponent} from "./gallery-detail/gallery-detail.component"; import {GalleryHomeComponent} from "./gallery-home/gallery-home.component"; import { GalleryRoutingModule } from './gallery-routing.module'; +import { HarmonicHandlerComponent } from './gallery-handler/harmonic-handler/harmonic-handler.component'; +import { GravityHandlerComponent } from './gallery-handler/gravity-handler/gravity-handler.component'; +import { ImageHandlerComponent } from './gallery-handler/image-handler/image-handler.component'; @NgModule({ - declarations: [GalleryHomeComponent, GalleryDetailComponent], + declarations: [ + GalleryHomeComponent, + GalleryDetailComponent, + HarmonicHandlerComponent, + GravityHandlerComponent, + ImageHandlerComponent + ], imports: [ CommonModule, GalleryRoutingModule, MatCardModule, - MatButtonModule + MatButtonModule, + MatSlideToggleModule, + FormsModule, + MatRadioModule ] }) export class GalleryModule { } diff --git a/src/services/particle-harmonic.service.ts b/src/services/particle-harmonic.service.ts index 62f9e35..a403625 100644 --- a/src/services/particle-harmonic.service.ts +++ b/src/services/particle-harmonic.service.ts @@ -2,6 +2,8 @@ import { Injectable } from '@angular/core'; import P5 from "p5"; import {_P5Particle, ParticleService} from "./particle.service"; +export type HarmonicParticleStyle = 'circle' | 'rect'; + class HarmonicParticle implements _P5Particle { p5: P5; pos: P5.Vector; @@ -10,9 +12,10 @@ class HarmonicParticle implements _P5Particle { d: number; angle: number; angleV = 0; + particleStyle: HarmonicParticleStyle = 'circle'; //multi waves - isCombined = false; + isComposite = false; pos2: P5.Vector; get crest(): number { @@ -46,12 +49,21 @@ class HarmonicParticle implements _P5Particle { } render() { - if (this.isCombined) { + if (this.isComposite) { const sumY = this.p5.map(this.pos.y + this.pos2.y, this.trough + this.trough2, this.crest + this.crest2, this.p5.height * 0.2, this.p5.height * 0.8); - this.p5.circle(this.pos.x, sumY, this.d); + if (this.particleStyle === 'circle') { + this.p5.circle(this.pos.x, sumY, this.d); + } else { + this.p5.rect(this.pos.x - this.d / 2, sumY - this.d / 2, this.d, this.d); + } } else { - this.p5.circle(this.pos.x, this.pos.y, this.d); - this.p5.circle(this.pos2.x, this.pos2.y, this.d); + if (this.particleStyle === 'circle') { + this.p5.circle(this.pos.x, this.pos.y, this.d); + this.p5.circle(this.pos2.x, this.pos2.y, this.d); + } else { + this.p5.rect(this.pos.x - this.d / 2, this.pos.y - this.d / 2, this.d, this.d); + this.p5.rect(this.pos2.x - this.d / 2, this.pos2.y - this.d / 2, this.d, this.d); + } } } } @@ -74,14 +86,11 @@ export class ParticleHarmonicService extends ParticleService { const sketch = (p5: P5) => { p5.setup = () => { - const renderer = p5.createCanvas(w, h, canvasEl); + p5.createCanvas(w, h, canvasEl); p5.background(0, 0, 0); this.genAngles(); this.genParticles(p5); this.setupParticles(p5); - renderer.mouseClicked(() => { - this.particles.forEach(p => p.isCombined = !p.isCombined) - }) } p5.draw = () => this.draw(p5); } @@ -119,4 +128,12 @@ export class ParticleHarmonicService extends ParticleService { // render this.particles.forEach(particle => particle.render()); } + + toggleComposite() { + this.particles.forEach(p => p.isComposite = !p.isComposite) + } + + setParticleStyle(style: HarmonicParticleStyle) { + this.particles.forEach(p => p.particleStyle = style || 'circle') + } } diff --git a/src/services/particle.service.ts b/src/services/particle.service.ts index 15136f6..08bbe69 100644 --- a/src/services/particle.service.ts +++ b/src/services/particle.service.ts @@ -15,7 +15,7 @@ export abstract class _P5Particle { } @Injectable({ - providedIn: 'root' + providedIn: 'root', }) export class ParticleService { context: CanvasRenderingContext2D | null; diff --git a/src/styles.scss b/src/styles.scss index 2e00c3f..e3b793d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,3 +7,12 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } padding: 0; box-sizing: border-box; } + +.handler-control-row { + margin: 1rem 0; + + label { + display: block; + padding-bottom: 2px; + } +}