Add Agida theme

Author: Warinyourself

src/components/app/AppCheckbox.tsx

@@ -8,22 +8,18 @@ export default class AppCheckbox extends Vue {
   @Prop({ default: false }) value!: boolean
   @Prop({ default: '' }) label!: string
 
-  get isActive() {
-    return this.value
-  }
-
-  get classes() {
+  get classes(): Record<string, boolean> {
     return {
       checkbox: true,
       'checkbox--active': this.value
     }
   }
 
-  get idCheckbox() {
+  get idCheckbox(): string {
     return `input-${(this as any)._uid}`
   }
 
-  changeState() {
+  changeState(): void {
     this.$emit('input', !this.value)
   }
 
@@ -41,9 +37,9 @@ export default class AppCheckbox extends Vue {
           onInput={ this.changeState }
         />
       </div>
-      <p for={ this.idCheckbox } class="input-label">
+      <label for={ this.idCheckbox } class="input-label">
         { this.label }
-      </p>
+      </label>
     </label>
   }
 }

src/components/themes/agida/index.tsx

@@ -0,0 +1,62 @@
+/* bezier-spline.js
+ *
+ * computes cubic bezier coefficients to generate a smooth
+ * line through specified points. couples with SVG graphics
+ * for interactive processing.
+ *
+ * For more info see:
+ * http://www.particleincell.com/2012/bezier-splines/
+ *
+ * Lubos Brieda, Particle In Cell Consulting LLC, 2012
+ * you may freely use this algorithm in your codes however where feasible
+ * please include a link/reference to the source article
+ */
+/* computes control points given knots K, this is the brain of the operation */
+export function computeControlPoints(K: number[]) {
+  const p1 = []
+  const p2 = []
+  const n = K.length - 1
+
+  /* rhs vector */
+  const a = []
+  const b = []
+  const c = []
+  const r = []
+
+  /* left most segment */
+  a[0] = 0
+  b[0] = 2
+  c[0] = 1
+  r[0] = K[0] + 2 * K[1]
+
+  /* internal segments */
+  for (let i = 1; i < n - 1; i++) {
+    a[i] = 1
+    b[i] = 4
+    c[i] = 1
+    r[i] = 4 * K[i] + 2 * K[i + 1]
+  }
+
+  /* right segment */
+  a[n - 1] = 2
+  b[n - 1] = 7
+  c[n - 1] = 0
+  r[n - 1] = 8 * K[n - 1] + K[n]
+
+  /* solves Ax=b with the Thomas algorithm (from Wikipedia) */
+  for (let i = 1; i < n; i++) {
+    const m: number = a[i] / b[i - 1]
+    b[i] = b[i] - m * c[i - 1]
+    r[i] = r[i] - m * r[i - 1]
+  }
+
+  p1[n - 1] = r[n - 1] / b[n - 1]
+  for (let i = n - 2; i >= 0; --i) p1[i] = (r[i] - c[i] * p1[i + 1]) / b[i]
+
+  /* we have p1, now compute p2 */
+  for (let i = 0; i < n - 1; i++) p2[i] = 2 * K[i + 1] - p1[i + 1]
+
+  p2[n - 1] = 0.5 * (K[n] + p1[n - 1])
+
+  return { p1: p1, p2: p2 }
+}

src/components/themes/agida/lib/bezier-spline.ts

@@ -0,0 +1,7 @@
+import { Wavery, WaveConfigInterface } from './wave'
+
+export function waveInit(data: WaveConfigInterface) {
+  const wavery = new Wavery(data)
+
+  return wavery.generateSvg()
+}

src/components/themes/agida/lib/index.ts

@@ -0,0 +1,196 @@
+import { computeControlPoints } from './bezier-spline'
+const svgns = 'http://www.w3.org/2000/svg'
+
+export interface WaveConfigInterface {
+  height: number;
+  width: number;
+  segmentCount: number;
+  layerCount: number;
+  variance: number;
+  strokeWidth?: number;
+  fillColor?: string;
+  strokeColor?: string;
+  transform?: string;
+  animation?: boolean | WaveConfigAnimationInterface;
+}
+
+export interface WaveConfigAnimationInterface {
+  time?: number;
+  steps?: number;
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+const defaultAnimationValues = {
+  steps: 3,
+  time: 40000,
+  timingFunction: 'ease',
+  iteration: 'infinite'
+}
+
+export class Wavery {
+  properties!: WaveConfigInterface
+  points: Point[][] = []
+  animationPoints: Point[][][] = [];
+
+  constructor(properties: WaveConfigInterface) {
+    this.properties = properties
+    this.points = this.generatePoints()
+
+    if (this.needAnimation) {
+      const { steps } = this.animation
+
+      Array.from(Array(steps)).forEach(() => {
+        this.animationPoints.push(this.generatePoints())
+      })
+    }
+  }
+
+  get animation() {
+    const animation = this.properties.animation
+    const isBoolean = typeof animation === 'boolean'
+
+    return isBoolean ? defaultAnimationValues : { ...defaultAnimationValues, ...animation }
+  }
+
+  get cellWidth() {
+    return this.properties.width / this.properties.segmentCount
+  }
+
+  get cellHeight() {
+    return this.properties.height / this.properties.layerCount
+  }
+
+  get needAnimation() {
+    return this.properties.animation
+  }
+
+  get pathList() {
+    const pathList = []
+
+    for (let i = 0; i < this.points.length; i++) {
+      pathList.push(this.generateClosedPath(i))
+    }
+
+    return pathList
+  }
+
+  generatePoints(): Point[][] {
+    const { cellWidth, cellHeight } = this
+    const { width, height, variance } = this.properties
+    const moveLimitX = cellWidth * variance * 0.2
+    const moveLimitY = cellHeight * variance
+    const points = []
+
+    for (let y = cellHeight; y <= height; y += cellHeight) {
+      const pointsPerLayer = []
+      pointsPerLayer.push({ x: 0, y: Math.floor(y) })
+
+      for (let x = cellWidth; x < width; x += cellWidth) {
+        const varietalY = y - moveLimitY / 2 + Math.random() * moveLimitY
+        const varietalX = x - moveLimitX / 2 + Math.random() * moveLimitX
+        pointsPerLayer.push({
+          x: Math.floor(varietalX),
+          y: Math.floor(varietalY)
+        })
+      }
+      pointsPerLayer.push({ x: width, y: Math.floor(y) })
+      points.push(pointsPerLayer)
+    }
+
+    return points
+  }
+
+  generateClosedPath(index: number) {
+    const animatedPathList: string[] = []
+
+    const { fillColor, strokeColor, strokeWidth, transform } = this.properties
+    const style = { fillColor, strokeColor, strokeWidth, transform }
+
+    const path = this.generatePath(this.points[index])
+
+    if (this.needAnimation) {
+      this.animationPoints.forEach((waves) => {
+        animatedPathList.push(this.generatePath(waves[index]))
+      })
+    }
+
+    return {
+      ...style,
+      d: path,
+      animatedPath: animatedPathList
+    }
+  }
+
+  generatePath(points: Point[]) {
+    const xPoints = points.map((p) => p.x)
+    const yPoints = points.map((p) => p.y)
+
+    const leftCornerPoint = { x: 0, y: this.properties.height + this.cellHeight }
+    const rightCornerPoint = { x: this.properties.width, y: this.properties.height + this.cellHeight }
+    const xControlPoints = computeControlPoints(xPoints)
+    const yControlPoints = computeControlPoints(yPoints)
+
+    let path =
+      `M ${leftCornerPoint.x},${leftCornerPoint.y} ` +
+      `C ${leftCornerPoint.x},${leftCornerPoint.y} ` +
+      `${xPoints[0]},${yPoints[0]} ` +
+      `${xPoints[0]},${yPoints[0]} `
+
+    for (let i = 0; i < xPoints.length - 1; i++) {
+      path +=
+        `C ${xControlPoints.p1[i]},${yControlPoints.p1[i]} ` +
+        `${xControlPoints.p2[i]},${yControlPoints.p2[i]} ` +
+        `${xPoints[i + 1]},${yPoints[i + 1]} `
+    }
+
+    path +=
+      `C ${xPoints[xPoints.length - 1]},${yPoints[xPoints.length - 1]} ` +
+      `${rightCornerPoint.x},${rightCornerPoint.y} ` +
+      `${rightCornerPoint.x},${rightCornerPoint.y} Z`
+
+    return path
+  }
+
+  private generateKeyframe(percent: number, d: string) {
+    return `${percent}% {d: path("${d}")}`
+  }
+
+  generateAnimationStyle(index: number) {
+    const path = this.pathList[index]
+    const { steps } = this.animation
+    if (!path) { return }
+
+    const animationList = Array.from(Array(steps + 2)).map((_, index, { length }) => {
+      const isBound = index === 0 || index + 1 === length
+      const percent = index * (100 / (steps + 1))
+      return this.generateKeyframe(percent, isBound ? path.d : path.animatedPath[index - 1])
+    })
+
+    console.log({ animationList })
+
+    return `.path-${index}{
+      animation:pathAnim-${index} ${this.animation.time}ms;
+      animation-timing-function: ${this.animation.timingFunction};
+      animation-iteration-count: ${this.animation.iteration};
+    }
+
+    @keyframes pathAnim-${index}{
+      ${animationList.join('')}
+    }`
+  }
+
+  generateSvg() {
+    return {
+      svg: {
+        width: this.properties.width,
+        height: this.properties.height + this.cellHeight,
+        xmlns: svgns,
+        paths: this.pathList
+      }
+    }
+  }
+}

src/components/themes/agida/lib/wave.ts

@@ -34,7 +34,7 @@ export default class DestructionTheme extends Vue {
         renderOptions: {
           externalTimeUse: true
         },
-        renderHook: function() {
+        renderHook() {
           const gl = this as unknown as GL
 
           if (!gl.programInfo.uniforms.position) {

src/components/themes/destruction/index.tsx

@@ -14,5 +14,5 @@
 .transition-group
   position: relative
 
-.background-image
-  mask url('../assets/images/masks/main.svg') 50% 50% / 100% 80%  no-repeat border-box
+// .background-image
+//   mask url('../assets/images/masks/main.svg') 50% 50% / 100% 80%  no-repeat border-box

src/style/general.styl

@@ -0,0 +1,14 @@
+.waves--top
+  position absolute
+  top 0
+  left 0
+  transform-origin 50% 100%
+  transform: translate(-50%, -100%) rotate(calc(180deg - var(--angle)))
+
+.waves--bottom
+  position absolute
+  bottom 0
+  right 0
+  transform-origin 50% 100%
+  transform translateX(50%) rotate(calc(-90deg + (90deg - var(--angle))))
+

src/style/themes/agida.styl

@@ -1,3 +1,4 @@
+@import './agida.styl'
 @import './osmos.styl'
 @import './space.styl'
 @import './suprematism.styl'