Skip to content

Commit

Permalink
feat(Lensflare): group constants into objects
Browse files Browse the repository at this point in the history
  • Loading branch information
@andretchen0
andretchen0 committed Sep 5, 2023
1 parent 9766d6b commit 022529f
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 308 deletions.
80 changes: 40 additions & 40 deletions src/core/abstractions/Lensflare/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,48 +24,48 @@ export const starThin8 = `${TEXTURE_PATH}starThin8.png`
// Flare elements are divided into back, oversize, body, front.
// They are arranged as such, relative to the light source and camera:
//
// [distance < 0] [distance == 0] [distance > 0]
// light camera
// back body, oversize front
// | distance < 0 | distance == 0 | distance > 0 | camera |
// | ------------ | -------------- | ------------ | ------ |
// | | light | | |
// | back | body, oversize | front | |

export const oversizeTexturesOptional = [line, ring]
export const oversizeColors = ['white']
export const oversizeSizeMin = 750
export const oversizeSizeMax = 1024
export const oversizeElementsNumMin = 0
export const oversizeElementsNumMax = 2
export const oversize = {
texture: [line, ring],
color: ['white'],
distance: [0, 0],
size: [750, 1024],
length: [0, 2],
}

export const bodyTexturesRequired = [circleBlur, rays6]
export const bodyTexturesOptional = [circle, circleRainbow, ring, starThin6]
export const bodyColors = ['white']
export const bodySizeMin = 180
export const bodySizeMax = 512
export const bodyTexturesOptionalNumMin = 2
export const bodyTexturesOptionalNumMax = 3
export const bodyRequired = {
texture: [circleBlur, rays6],
color: ['white'],
distance: [0, 0],
size: [180, 512],
}

export const bodyOptional = {
texture: [circle, circleRainbow, ring, starThin6],
color: ['white'],
distance: [0, 0],
size: [180, 512],
length: [2, 3],
}

export const frontTexturesOptional = [circleBlur, circle, ring, poly6, polyStroke6]
export const [darkPurple, darkBlue] = [0x38235f, 0x02055a]
export const frontColors = ['dimgray', 'gray', 'darkgray', darkPurple, darkBlue]
export const frontTexturesNumMin = 2
export const frontTexturesNumMax = 4
export const frontSizeMin = 20
export const frontSizeMax = 180
export const frontOffsetMin = 0.5
export const frontOffsetMax = 1
export const frontLengthMin = 0.75
export const frontLengthMax = 2.5
export const frontElementsNumMin = 5
export const frontElementsNumMax = 21

export const backTexturesOptional = frontTexturesOptional
export const backColors = frontColors
export const backTexturesNumMin = 2
export const backTexturesNumMax = 4
export const backSizeMin = 180
export const backSizeMax = 360
export const backOffsetMin = 0.1
export const backOffsetMax = 0.2
export const backLengthMin = 0.5
export const backLengthMax = 0.6
export const backElementsNumMin = 0
export const backElementsNumMax = 5
export const front = {
texture : [circleBlur, circle, ring, poly6, polyStroke6],
color: ['dimgray', 'gray', 'darkgray', darkPurple, darkBlue],
distance: [0.5, 2.5],
size: [20, 180],
length: [5, 21]
}

export const back = {
texture : [circleBlur, circle, ring, poly6, polyStroke6],
color: ['dimgray', 'gray', 'darkgray', darkPurple, darkBlue],
distance: [-0.6, -0.1],
size: [180, 360],
length: [0, 5]
}
144 changes: 21 additions & 123 deletions src/core/abstractions/Lensflare/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Texture, MathUtils, Color } from 'three'
import { TresColor } from '@tresjs/core'
import RandUtils from './RandUtils'
import { linear, easeInCubic, easeInOutCubic, easeInQuart, easeOutBounce } from './easing'
import { linear, easeInCubic, easeInOutCubic, easeInQuart, easeOutBounce } from '../../../utils/easing'
import Lensflare from './component.vue'
import * as constant from './constants'

export { Lensflare };
export { Lensflare }

export const partialLensflarePropsArrayToLensflarePropsArray = (
partialProps: Partial<LensflareElementProps>[] | undefined,
Expand All @@ -17,10 +18,6 @@ export const partialLensflarePropsArrayToLensflarePropsArray = (
defaultElement,
)

const TEXTURE_PATH =
'https://raw.githubusercontent.com/andretchen0/tresjs_assets/' +
'b1bc3780de73a9328a530767c9a7f4cbab060396/textures/lensflare/'

const easingFunctions = [linear, easeInCubic, easeInOutCubic, easeInQuart, easeOutBounce]

const lerp = MathUtils.lerp
Expand Down Expand Up @@ -73,7 +70,7 @@ function partialPropsArrayToPropsArray<T>(
}

const defaultElement: LensflareElementProps = {
texture: `${TEXTURE_PATH}cirlceBlur.png`,
texture: `${constant.TEXTURE_PATH}cirlceBlur.png`,
size: 64,
distance: 0,
color: new Color('white'),
Expand All @@ -82,128 +79,29 @@ const defaultElement: LensflareElementProps = {
const getSeededLensflareElementProps = (seed: number): LensflareElementProps[] => {
const rand: RandUtils = new RandUtils(seed)

const numPoints = rand.choice([4, 6, 8]) as 4 | 6 | 8

const circle = `${TEXTURE_PATH}circle.png`
const circleBlur = `${TEXTURE_PATH}cirlceBlur.png`
const circleRainbow = `${TEXTURE_PATH}circleRainbow.png`
const line = `${TEXTURE_PATH}line.png`
const poly = `${TEXTURE_PATH}poly${numPoints}.png`
const polyStroke = `${TEXTURE_PATH}polyStroke${numPoints}.png`
const rays = `${TEXTURE_PATH}rays${numPoints}.png`
const ring = `${TEXTURE_PATH}ring.png`
const starThin = `${TEXTURE_PATH}starThin${numPoints}.png`

// NOTE:
// Flare elements are divided into back, oversize, body, front.
// They are arranged as such, relative to the light source and camera:
//
// [distance < 0] [distance == 0] [distance > 0]
// light camera
// back body, oversize front

const oversizeTexturesOptional = [line, ring]
const oversizeColors = ['white']
const oversizeSizeMin = 750
const oversizeSizeMax = 1024
const oversizeElementsNumMin = 0
const oversizeElementsNumMax = 2

const bodyTexturesRequired = [circleBlur, rays]
const bodyTexturesOptional = [circle, circleRainbow, ring, starThin]
const bodyColors = ['white']
const bodySizeMin = 180
const bodySizeMax = 512
const bodyTexturesOptionalNumMin = 2
const bodyTexturesOptionalNumMax = 3

const frontTexturesOptional = [circleBlur, circle, ring, poly, polyStroke]
const [darkPurple, darkBlue] = [0x38235f, 0x02055a]
const frontColors = ['dimgray', 'gray', 'darkgray', darkPurple, darkBlue]
const frontTexturesNumMin = 2
const frontTexturesNumMax = 4
const frontSizeMin = 20
const frontSizeMax = 180
const frontOffsetMin = 0.5
const frontOffsetMax = 1
const frontLengthMin = 0.75
const frontLengthMax = 2.5
const frontElementsNumMin = 5
const frontElementsNumMax = 21

const backTexturesOptional = frontTexturesOptional
const backColors = frontColors
const backTexturesNumMin = 2
const backTexturesNumMax = 4
const backSizeMin = 180
const backSizeMax = 360
const backOffsetMin = 0.1
const backOffsetMax = 0.2
const backLengthMin = 0.5
const backLengthMax = 0.6
const backElementsNumMin = 0
const backElementsNumMax = 5

const easingFn = rand.choice(easingFunctions) as (n: number) => number

const oversizeTexturesSelected = rand.sample(
oversizeTexturesOptional,
rand.int(oversizeElementsNumMin, oversizeElementsNumMax),
)
const oversizeElementProps: LensflareElementProps[] = oversizeTexturesSelected.map(texture => ({
texture,
size: rand.int(oversizeSizeMin, oversizeSizeMax),
distance: 0,
color: rand.defaultChoice(oversizeColors, 'white'),
}))

const bodyTexturesOptionalSelected = rand.sample(
bodyTexturesOptional,
rand.int(bodyTexturesOptionalNumMin, bodyTexturesOptionalNumMax),
)

const bodyElementProps: LensflareElementProps[] = [
...bodyTexturesRequired.map(texture => ({
texture,
size: rand.int(bodySizeMin, bodySizeMax),
distance: 0,
color: rand.defaultChoice(bodyColors, defaultElement.color),
})),
...bodyTexturesOptionalSelected.map(texture => ({
const bodyRequiredElementProps: LensflareElementProps[] = [
...constant.bodyRequired.texture.map(texture => ({
texture,
size: rand.int(bodySizeMin, bodySizeMax),
distance: 0,
color: rand.defaultChoice(bodyColors, defaultElement.color),
size: rand.float(constant.bodyRequired.size[0], constant.bodyRequired.size[1]),
distance: rand.float(constant.bodyRequired.distance[0], constant.bodyRequired.distance[1]),
color: rand.defaultChoice(constant.bodyRequired.color, defaultElement.color),
})),
]

const frontTexturesSelected = rand.sample(frontTexturesOptional, rand.int(frontTexturesNumMin, frontTexturesNumMax))
const frontNumElements = rand.int(frontElementsNumMin, frontElementsNumMax)
const frontDistanceStart = rand.float(frontOffsetMin, frontOffsetMax)
const frontDistanceEnd = frontDistanceStart + rand.float(frontLengthMin, frontLengthMax)
const frontElementProps: LensflareElementProps[] = new Array(frontNumElements).fill(0).map(() => {
const progress = easingFn(rand.rand())
return {
texture: rand.defaultChoice(frontTexturesSelected, defaultElement.texture),
size: lerp(frontSizeMin, frontSizeMax, easingFn(1 - progress)),
distance: lerp(frontDistanceStart, frontDistanceEnd, progress),
color: rand.defaultChoice(frontColors, defaultElement.color),
}
})

const backTexturesSelected = rand.sample(backTexturesOptional, rand.int(backTexturesNumMin, backTexturesNumMax))
const backNumElements = rand.int(backElementsNumMin, backElementsNumMax)
const backDistanceStart = rand.float(backOffsetMin, backOffsetMax)
const backDistanceEnd = backDistanceStart + rand.float(backLengthMin, backLengthMax)
const backElementProps = new Array(backNumElements).fill(0).map(() => {
const progress = easingFn(rand.rand())
return {
texture: rand.defaultChoice(backTexturesSelected, defaultElement.texture),
size: lerp(backSizeMin, backSizeMax, easingFn(1 - progress)),
distance: -lerp(backDistanceStart, backDistanceEnd, progress),
color: rand.defaultChoice(backColors, defaultElement.color),
}
const [oversizeElementProps, frontElementProps, bodyOptionalElementsProps, backElementProps] = [constant.oversize, constant.front, constant.bodyOptional, constant.back].map(preset => {
const numElements = rand.int(preset.length[0], preset.length[1])
return new Array(numElements).fill(0).map(() => {
const progress = easingFn(rand.rand())
return {
texture: rand.defaultChoice(preset.texture, defaultElement.texture),
size: lerp(preset.size[0], preset.size[1], easingFn(1 - progress)),
distance: lerp(preset.distance[0], preset.distance[1], progress),
color: rand.defaultChoice(preset.color, defaultElement.color),
}
})
})

return [...oversizeElementProps, ...bodyElementProps, ...frontElementProps, ...backElementProps]
return [...oversizeElementProps, ...bodyRequiredElementProps, ...bodyOptionalElementsProps, ...frontElementProps, ...backElementProps]
}
Loading

0 comments on commit 022529f

Please sign in to comment.