Brendan/animation 2

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": false
+}

animation/base/pixi_app.js

@@ -0,0 +1,178 @@
+import * as PIXI from 'pixi.js'
+import { debounce, getWindowSize, mapRange, backgroundContain, backgroundSize } from './utils/helpers'
+import Fantasy from '../elements/fantasy.js'
+import MolochFight from '../elements/moloch-fight.js'
+import BackgroundClouds from '../elements/background.js'
+import { gsap } from 'gsap'
+
+const pixi_app = new PIXI.Application({
+  width: window.innerWidth,
+  height: window.innerHeight,
+  backgroundColor: 0x000000
+})
+
+pixi_app.loader
+  .add('spray_circ', '/animation/img/spray_circ.png')
+  .add('logo', '/animation/img/logo_logotype__white-optimized.png')
+  .add('rf_purple', '/animation/img/raid__fantasy__purple.png')
+  .add('rf_yellow', '/animation/img/raid__fantasy__red.png')
+  .add('rf_red', '/animation/img/raid__fantasy__silver.png')
+  .add('rf_silver', '/animation/img/raid__fantasy__yellow.png')
+  .add('red_warrior', '/animation/img/red_warrior-color.png')
+  .add('red_warrior_2', '/animation/img/red_warrior_2-color.png')
+  .add('red_sticks', '/animation/img/red_sticks-color.png')
+  .add('red_sticks_2', '/animation/img/red_sticks_2-color.png')
+  .add('red_archer', '/animation/img/red_archer-color.png')
+  .add('red_archer_2', '/animation/img/red_archer_2-color.png')
+  .add('red_wizard', '/animation/img/red_wizard-color.png')
+  .add('red_wizard_2', '/animation/img/red_wizard_2-color.png')
+  .add('red_sword', '/animation/img/red_sword-color.png')
+  .add('red_sword_2', '/animation/img/red_sword_2-color.png')
+  .add('moloch_horns', '/animation/img/moloch__horns.png')
+  .add('moloch_face', '/animation/img/moloch__face_2-color.png')
+  .add('moloch_guide', '/animation/img/moloch-scene.png')
+  .add('clouds', '/animation/img/clouds.png')
+  .load((loader, resources) => {})
+
+const colors = {
+  yellow: 0xfcfb75,
+  red: 0xff3864,
+  purp: 0xb66ad6,
+  grey: 0x2b2c34,
+  black: 0x000000,
+  g1: 0x24003A,
+  g2: 0x170011,
+  g3: 0x130000,
+  g4: 0x330F00
+}
+
+const fighter_element = document.getElementById('raid-banner')
+const fantasy_element = document.getElementById('raid-fantasy')
+const clouds_element = document.getElementById('portfolio')
+const placeholder = document.getElementById('raid-banner-placeholder')
+
+// gsap.to(placeholder, { alpha: 1, duration: 0.5 })
+
+pixi_app.loader.onComplete.add(() => {
+  const scene_container = new PIXI.Container()
+  scene_container.interactive = true
+  scene_container.on('mousemove', onPointerMove).on('touchmove', onPointerMove)
+  scene_container.alpha = 0
+  gsap.killTweensOf(placeholder)
+  gsap.to(placeholder, { alpha: 0, scale: 0, duration: 0.5 })
+  gsap.to(scene_container, { alpha: 1, duration: 1.5, delay: 0.25 })
+
+  pixi_app.stage.addChild(scene_container)
+
+  // Define background gradient
+  const background_clouds = new BackgroundClouds()
+
+  // Define Moloch fight
+  const fighters = new MolochFight()
+
+  // Define and init Moloch Fantasy graphic
+  const fantasy = new Fantasy()
+  fantasy.init()
+
+  // Define clouds
+  const clouds = new PIXI.Sprite(pixi_app.loader.resources.clouds.texture)
+  clouds.anchor.set(0.5)
+  clouds.x = pixi_app.renderer.width / 2
+
+  // Define displacement
+  let displace_move_timeout
+  let displace_can_move = true
+  let displace_speed_x = 1
+  let displace_speed_y = 1
+  const displacer = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture)
+  displacer.anchor.set(0.5)
+  displacer.scale.set(0.1, 0.1)
+  displacer.x = pixi_app.renderer.width / 2
+  displacer.y = pixi_app.renderer.height / 2
+  const displacementFilter = new PIXI.filters.DisplacementFilter(displacer)
+  scene_container.filters = [displacementFilter]
+
+  // Arrange Scene layers
+  scene_container.addChild(background_clouds)
+  scene_container.addChild(fighters)
+  scene_container.addChild(fantasy)
+  scene_container.addChild(clouds)
+  scene_container.addChild(displacer)
+
+
+
+  function onPointerMove(eventData) {
+    clearTimeout(displace_move_timeout)
+    displace_can_move = false
+    gsap.to(displacer, { duration: 1, x: eventData.data.global.x, y: eventData.data.global.y })
+    const cloud_mover_x = mapRange(eventData.data.global.x, 0, pixi_app.renderer.width, pixi_app.renderer.width / 2 + 50, pixi_app.renderer.width / 2 - 50)
+    gsap.to(clouds, { x: cloud_mover_x, duration: 15 })
+    displace_move_timeout = setTimeout(() => {
+      displace_can_move = true
+    }, 1000)
+  }
+
+  pixi_app.ticker.add((delta) => {
+    const fighter_position = fighter_element.getBoundingClientRect()
+    fighters.x = fighter_position.x
+    fighters.y = fighter_position.y
+
+    const fantasy_position = fantasy_element.getBoundingClientRect()
+    fantasy.x = fantasy_position.x
+    fantasy.y = fantasy_position.y
+
+    const clouds_position = clouds_element.getBoundingClientRect()
+    clouds.y = clouds_position.y + clouds_position.height / 2
+    if (displace_can_move) {
+      displacer.x = displacer.x + displace_speed_x
+      displacer.y = displacer.y + displace_speed_y
+
+      if (displacer.x > pixi_app.renderer.width || displacer.x < 0) {
+        displace_speed_x = -displace_speed_x
+      }
+
+      if (displacer.y > pixi_app.renderer.height || displacer.y < 0) {
+        displace_speed_y = -displace_speed_y
+      }
+    }
+  })
+
+  const scale_elements = () => {
+    const fantasy_scale = backgroundContain(
+      fantasy_element.offsetWidth,
+      fantasy_element.offsetHeight,
+      pixi_app.loader.resources.rf_yellow.texture.baseTexture.width,
+      pixi_app.loader.resources.rf_yellow.texture.baseTexture.height
+    )
+    fantasy.scale.set(fantasy_scale.scale)
+
+    const fighters_scale = backgroundContain(fighter_element.offsetWidth, fighter_element.offsetHeight, 3125, 3125)
+    fighters.scale.set(fighters_scale.scale)
+
+    const clouds_scale = backgroundSize(
+      clouds_element.offsetWidth,
+      clouds_element.offsetHeight,
+      pixi_app.loader.resources.clouds.texture.baseTexture.width,
+      pixi_app.loader.resources.clouds.texture.baseTexture.height
+    )
+    clouds.scale.set(clouds_scale.scale * 1.2)
+  }
+  scale_elements()
+  window.addEventListener(
+    'resize',
+    debounce((e) => {
+      const size = getWindowSize()
+      const w = size.width
+      const h = size.height
+
+      pixi_app.renderer.view.style.width = w + 'px'
+      pixi_app.renderer.view.style.height = h + 'px'
+      pixi_app.renderer.resize(w, h)
+
+      scale_elements()
+      clouds.x = pixi_app.renderer.width / 2
+    }, 10)
+  )
+})
+
+export default pixi_app

animation/base/utils/helpers.js

@@ -0,0 +1,98 @@
+const shuffleArray = function (array) {
+  var currentIndex = array.length,
+    temporaryValue,
+    randomIndex
+
+  while (0 !== currentIndex) {
+    randomIndex = Math.floor(Math.random() * currentIndex)
+    currentIndex -= 1
+
+    temporaryValue = array[currentIndex]
+    array[currentIndex] = array[randomIndex]
+    array[randomIndex] = temporaryValue
+  }
+
+  return array
+}
+
+function getWindowSize() {
+  const wWidth = window.innerWidth
+  const wHeight = window.innerHeight
+  const data = {
+    width: wWidth,
+    height: wHeight,
+  }
+  return data
+}
+
+const debounce = function (func, time = 100) {
+  var timer
+  return function (event) {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(func, time, event)
+  }
+}
+
+const mapRange = function (the_numb, in_min, in_max, out_min, out_max) {
+  return ((the_numb - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+}
+
+const boxRatio = function (w, h) {
+  return w / h
+}
+
+const backgroundSize = function (containerW, containerH, imgW, imgH) {
+  let newDims = {
+    w: null,
+    h: null,
+    scale: null,
+  }
+  const imgRatio = imgW / imgH
+  if (containerW / imgRatio < containerH) {
+    // Image is 100% wide and shorter than container
+    // new dims must be contaier heigh
+    newDims.h = containerH
+    newDims.w = containerH * imgRatio
+    //newDims.scale = newDims.h / imgH;
+  } else {
+    // Image is 100% wide and taller than container
+
+    newDims.w = containerW
+    newDims.h = containerW / imgRatio
+    //newDims.scale = newDims.w / imgW;
+  }
+  newDims.scale = newDims.w / imgW
+  return newDims
+}
+
+const backgroundContain = function (containerW, containerH, imgW, imgH) {
+  let newDims = {
+    w: null,
+    h: null,
+    scale: null,
+  }
+  const imgRatio = imgW / imgH
+  if (containerW / imgRatio < containerH) {
+    // Image is 100% wide and shorter than container
+    // new dims must be contaier heigh
+    // newDims.h = containerH;
+    // newDims.w = containerH * imgRatio;
+
+    newDims.w = containerW
+    newDims.h = containerW * imgRatio
+  } else {
+    // Image is 100% wide and taller than container
+    // newDims.w = containerW;
+    // newDims.h = containerW / imgRatio;
+
+    newDims.h = containerH
+    newDims.w = containerH * imgRatio
+  }
+  newDims.scale = newDims.w / imgW
+  return newDims
+}
+function getRandomFromRange(min, max) {
+  return Math.random() * (max - min) + min
+}
+
+export { shuffleArray, getWindowSize, debounce, mapRange, boxRatio, backgroundSize, backgroundContain, getRandomFromRange }

animation/elements/_bolierplate

@@ -0,0 +1,23 @@
+import * as PIXI from 'pixi.js'
+import pixi_app from '../base/pixi_app.js'
+import { debounce, backgroundSize } from '../base/utils/helpers'
+import { gsap } from 'gsap'
+
+export default class ELEMENT extends PIXI.Container {
+  constructor() {
+    super()
+  }
+  init() {
+    //pixi_app.ticker.add(() => {})
+
+    window.addEventListener(
+      'resize',
+      debounce((e) => {
+        this.size()
+      }, 1500)
+    )
+    this.size()
+  }
+  mousemove(x, y) {}
+  size() {}
+}

animation/elements/background.js

@@ -0,0 +1,92 @@
+import * as PIXI from 'pixi.js'
+import pixi_app from '../base/pixi_app.js'
+import { debounce, mapRange, backgroundSize } from '../base/utils/helpers'
+import { gsap } from 'gsap'
+
+const colors = {
+  yellow: 0xfcfb75,
+  red: 0xff3864,
+  purp: 0xb66ad6,
+  grey: 0x2b2c34,
+  black: 0x000000,
+  g1: 0x24003a,
+  g2: 0x170011,
+  g3: 0x130000,
+  g4: 0x330f00
+}
+
+export default class BackgroundClouds extends PIXI.Container {
+  constructor() {
+    super()
+
+    const clouds = []
+
+    const positions = [
+    [
+        [0, 0],
+        [0, pixi_app.renderer.height],
+        [pixi_app.renderer.width, pixi_app.renderer.height / 2],
+    ],
+    [
+        [pixi_app.renderer.width / 2, 0],
+        [0, pixi_app.renderer.height],
+        [pixi_app.renderer.width, pixi_app.renderer.height],
+    ],
+    [
+        [0, pixi_app.renderer.height / 2],
+        [pixi_app.renderer.width, pixi_app.renderer.height],
+        [pixi_app.renderer.width, 0],
+    ],
+    [
+        [pixi_app.renderer.width / 2, pixi_app.renderer.height],
+        [0, 0],
+        [pixi_app.renderer.width, 0],
+    ],
+    ]
+
+    const color_cloud_scale = backgroundSize(
+        pixi_app.renderer.width,
+        pixi_app.renderer.height,
+        pixi_app.loader.resources.spray_circ.texture.baseTexture.width,
+        pixi_app.loader.resources.spray_circ.texture.baseTexture.height
+    )
+
+    const color_cloud_1 = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture)
+    color_cloud_1.tint = colors.g1
+    clouds.push(color_cloud_1)
+
+    const color_cloud_2 = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture)
+    color_cloud_2.tint = colors.g2
+
+    clouds.push(color_cloud_2)
+
+    const color_cloud_3 = new PIXI.Sprite(pixi_app.loader.resources.spray_circ.texture)
+    color_cloud_3.tint = colors.g4
+
+    clouds.push(color_cloud_3)
+
+    for (let index = 0; index < clouds.length; index++) {
+    const cloud = clouds[index]
+    cloud.scale.set(color_cloud_scale.scale * 2)
+    cloud.anchor.set(0.5)
+    cloud.alpha = 1
+    }
+    gsap.set(color_cloud_1, { x: positions[2][0][0], y: positions[2][0][1] })
+    gsap.set(color_cloud_2, { x: positions[2][1][0], y: positions[2][1][1] })
+    gsap.set(color_cloud_3, { x: positions[2][2][0], y: positions[2][2][1] })
+    let loop_index = 0
+    setInterval(() => {
+    loop_index = (loop_index + 1) % positions.length
+    gsap.to(color_cloud_1, { duration: 10, ease: 'back.out(1.7)', x: positions[loop_index][0][0], y: positions[loop_index][0][1] })
+    gsap.to(color_cloud_2, { duration: 10, ease: 'back.out(1.7)', x: positions[loop_index][1][0], y: positions[loop_index][1][1] })
+    gsap.to(color_cloud_3, { duration: 10, ease: 'back.out(1.7)', x: positions[loop_index][2][0], y: positions[loop_index][2][1] })
+    }, 10000)
+    this.addChild(color_cloud_3)
+    this.addChild(color_cloud_1)
+    this.addChild(color_cloud_2)    
+  }
+  init() {}
+  mousemove(eventData) {
+  }
+  size() {}
+}