Skip to content

Commit

Permalink
woo! loop
Browse files Browse the repository at this point in the history
  • Loading branch information
@JGantts
JGantts committed Mar 3, 2024
1 parent 02e9e83 commit 7801dd4
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 71 deletions.
87 changes: 52 additions & 35 deletions src/Curtain/Curtain.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, type PropType } from 'vue'
// @ts-ignore
import{ Smooth } from '../assets/Smooth'
Expand Down Expand Up @@ -80,10 +81,11 @@ let canvasElement: HTMLCanvasElement
Rendering functions
*/
async function initializeBackground() {
canvasElement.width = canvasElement.clientWidth;
canvasElement.height = canvasElement.clientHeight;
if (canvasElement.width != canvasElement.clientWidth) {
canvasElement.width = canvasElement.clientWidth;
canvasElement.height = canvasElement.clientHeight;
}
canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height)
pixelColumnsSuper = []
pixelColumnsLarge = []
Expand Down Expand Up @@ -134,14 +136,11 @@ async function initializeBackground() {
)
}
await reconPixelsFine()
await paintPixelsFine()
}
async function initializeCurtain() {
console.log("hi")
doneAnimatingCurtain = false
let countToAddSmoothed = widthInLargePixels*PIXELATED_LARGE_BOX_SIZE/SMOOTHED_BOX_SIZE
Expand Down Expand Up @@ -176,24 +175,29 @@ async function initializeCurtain() {
})
}
clientWidthInitial = canvasElement.clientWidth
clientHeightInitial = canvasElement.clientHeight
window.requestAnimationFrame(renderLoop)
if (clientWidthInitial != canvasElement.clientWidth) {
clientWidthInitial = canvasElement.clientWidth
clientHeightInitial = canvasElement.clientHeight
}
}
let clientWidthInitial = 0
let clientHeightInitial = 0
async function renderLoop() {
let done = await renderScene();
let continueToNextFrame = !done
if (continueToNextFrame) {
window.requestAnimationFrame(renderLoop)
let state = await renderScene();
switch(state) {
case AnimationState.AboveTop:
renderLoop()
break
case AnimationState.Inside:
window.requestAnimationFrame(renderLoop)
break
case AnimationState.BelowBottom:
return
}
}
async function reconPixelsSuper() {
while ((pixelColumnsSuper[0].length-TOP_BUFFER_PIXEL*2) < heightInSuperPixels) {
for (let key in pixelColumnsSuper) {
Expand Down Expand Up @@ -455,12 +459,17 @@ async function calculateColumnFine(index: number) {
)
}
enum AnimationState {
AboveTop,
Inside,
BelowBottom,
}
let doneAnimatingCurtain = false
async function renderScene(): Promise<Boolean> {
async function renderScene(): Promise<AnimationState> {
if (doneAnimatingCurtain) {
return true
return AnimationState.BelowBottom
}
let eachIsDone = true
for (let index=0; index < gaussianObjects.length; index++) {
gaussianObjects[index].acceleration += gaussianObjects[index].jolt
gaussianObjects[index].velocity += gaussianObjects[index].acceleration
Expand All @@ -477,12 +486,17 @@ async function renderScene(): Promise<Boolean> {
canvasContext.beginPath()
let index=0
canvasContext.moveTo(index, gaussionSmoothed(index))
let eachIsAbove = true
let eachIsBelow = true
index++
for (; index < gaussianObjects.length*SMOOTHED_BOX_SIZE; index++) {
let smoothedPoint = gaussionSmoothed(index/SMOOTHED_BOX_SIZE)
canvasContext.lineTo(index, smoothedPoint)
if (smoothedPoint >= -5 ) {
eachIsAbove = false
}
if (smoothedPoint <= clientHeightInitial + 5 ) {
eachIsDone = false
eachIsBelow = false
}
}
Expand All @@ -495,13 +509,16 @@ async function renderScene(): Promise<Boolean> {
canvasContext.createPattern
//canvasSmoothContext.restore()
if (eachIsDone) {
if (eachIsAbove) {
return AnimationState.AboveTop
}
if (eachIsBelow) {
emit('curtainCall', '')
doneAnimatingCurtain = true
return true
return AnimationState.BelowBottom
}
return false
return AnimationState.Inside
}
async function renderColumn(columnIndex: number) {
Expand Down Expand Up @@ -601,7 +618,6 @@ function gradientAtPercentage(percentage: number): Color {
let colorB: Color|null = null
let percentageAlongSection: number|null = null
//console.log(rainbow)
for (let index=0; index < rainbow.stops.length; index++) {
if (rainbow.stops[index].stop > percentage) {
let stopA = rainbow.stops[index-1]
Expand All @@ -618,10 +634,6 @@ function gradientAtPercentage(percentage: number): Color {
if (!colorA || !colorB || !percentageAlongSection) {
return rainbow.stops[0].color
}
/*console.log(colorA.hue)
console.log(colorB.hue)
console.log(colorA.hue - colorB.hue)
console.log('')*/
let hue: number
let saturation: number
let lightness: number
Expand All @@ -648,8 +660,6 @@ function gradientAtPercentage(percentage: number): Color {
lightness = colorHigh.lightness*(1-percentageAlongSection) + colorLow.lightness*percentageAlongSection
targetHue = 360 + colorLow.hue
let hueUnsliced = colorHigh.hue*(1-percentageAlongSection) + targetHue*percentageAlongSection
//console.log(`${colorA.hue} ${colorB.hue}`)
//console.log(`${percentageAlongSection} from ${colorHighHue} to ${colorLowHue} ${hueUnsliced}`)
if (hueUnsliced < 360) {
hue = hueUnsliced
} else {
Expand Down Expand Up @@ -748,8 +758,6 @@ function gaussianDistributionAt(variance: number, oneOverSqrtTwoPiVariance: numb
//#endregion
onMounted(async () => {
console.log("Hello, world!")
//@ts-expect-error
canvasElement = canvasRef.value
canvasContext = canvasElement.getContext("2d")!
Expand All @@ -765,16 +773,25 @@ const canvasRef = ref(null)
let rainbow: Rainbow
const reloadBackground = (rainbowIn: Rainbow) => {
const loadCurtain = async (rainbowIn: Rainbow) => {
rainbow = rainbowIn
initializeBackground()
initializeCurtain()
await initializeBackground()
await initializeCurtain()
}
const playCurtain = async () => {
//canvasContext.clearRect(0, 0, canvasElement.width, canvasElement.height)
await paintPixelsFine()
window.requestAnimationFrame(renderLoop)
}
const emit = defineEmits([
'curtainCall',
]);
defineExpose({ reloadBackground })
defineExpose({
loadCurtain,
playCurtain,
})
</script>

<template>
Expand Down
125 changes: 89 additions & 36 deletions src/components/Background.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,17 +78,17 @@ import {
} from '@radix-ui/colors';
let colorsCycleIndex = 1
let colorsCycleIndex = 0
const colorsCycle: Rainbow[] = [
{
dir: RainbowDirection.Regular,
stops: [
{ stop: 0, color: hslToComponents(sky.sky10) },
{ stop: 0.45, color: hslToComponents(blue.blue10) },
{ stop: 0.5, color: hslToComponents(blue.blue10) },
{ stop: 0.6, color: hslToComponents(blue.blue10) },
{ stop: 1, color: hslToComponents(grass.grass10) },
],
dir: RainbowDirection.Regular,
stops: [
{ stop: 0, color: hslToComponents(orange.orange8) },
{ stop: 0.45, color: hslToComponents(tomato.tomato10) },
//{ stop: 0.5, color: hslToComponents(tomato.tomato9) },
{ stop: 0.6, color: hslToComponents(red.red10) },
{ stop: 1, color: hslToComponents(ruby.ruby11) },
],
curve: {
pos: { low: -300, high: 0 },
velo: { low: 0, high: 5 },
Expand All @@ -97,14 +97,14 @@ const colorsCycle: Rainbow[] = [
},
},
{
dir: RainbowDirection.Regular,
stops: [
{ stop: 0, color: hslToComponents(orange.orange9) },
{ stop: 0.45, color: hslToComponents(tomato.tomato10) },
//{ stop: 0.5, color: hslToComponents(tomato.tomato9) },
{ stop: 0.6, color: hslToComponents(red.red10) },
{ stop: 1, color: hslToComponents(ruby.ruby11) },
],
dir: RainbowDirection.Regular,
stops: [
{ stop: 0, color: hslToComponents(sky.sky10) },
{ stop: 0.45, color: hslToComponents(blue.blue10) },
{ stop: 0.5, color: hslToComponents(blue.blue10) },
{ stop: 0.6, color: hslToComponents(blue.blue10) },
{ stop: 1, color: hslToComponents(grass.grass10) },
],
curve: {
pos: { low: -300, high: 0 },
velo: { low: 0, high: 5 },
Expand Down Expand Up @@ -207,43 +207,84 @@ function hslToComponents(hsl: string): Color {
const curtain1Ref = ref(null)
const curtain2Ref = ref(null)
const curtain3Ref = ref(null)
const curtainHolder1Ref = ref(null)
const curtainHolder2Ref = ref(null)
const curtainHolder3Ref = ref(null)
const reload1 = async () => {
loadNext(curtainHolder2Ref.value, curtainHolder1Ref.value, curtain2Ref.value)
loadNext(
curtainHolder2Ref.value,
curtainHolder3Ref.value,
curtainHolder1Ref.value,
curtain2Ref.value,
curtain3Ref.value
)
}
const reload2 = async () => {
loadNext(curtainHolder1Ref.value, curtainHolder2Ref.value, curtain1Ref.value)
loadNext(
curtainHolder3Ref.value,
curtainHolder1Ref.value,
curtainHolder2Ref.value,
curtain3Ref.value,
curtain1Ref.value
)
}
const reload3 = async () => {
loadNext(
curtainHolder1Ref.value,
curtainHolder2Ref.value,
curtainHolder3Ref.value,
curtain1Ref.value,
curtain2Ref.value
)
}
function loadNext(
element1: Element|null,
element2: Element|null,
async function loadNext(
elementNext: Element|null,
elementThen: Element|null,
elementClear: Element|null,
//@ts-expect-error
curtainNext: Curtain|null
curtainNext: Curtain|null,
//@ts-expect-error
curtainThen: Curtain|null,
) {
let classList1 = element1?.classList
let classList2 = element2?.classList
let classListNext = elementNext?.classList
let classListThen = elementThen?.classList
let classListClear = elementClear?.classList
if (!classList1 || !classList2 || !curtainNext) {
if (!classListNext || !classListThen || !classListClear || !curtainNext || !curtainThen) {
console.log("err")
return
}
classList2.remove("front-curtain")
classList1.add("front-curtain")
if (colorsCycleIndex >= colorsCycle.length) {
colorsCycleIndex = 0
}
curtainNext.reloadBackground(colorsCycle[colorsCycleIndex])
curtainNext.playCurtain()
curtainThen.loadCurtain(colorsCycle[colorsCycleIndex])
colorsCycleIndex++
//const delay = ms => new Promise(res => setTimeout(res, ms));
window.requestAnimationFrame(() => {
classListNext?.add("curr-curtain")
classListThen?.remove("prev-curtain")
classListClear?.add("prev-curtain")
classListClear?.remove("curr-curtain")
})
}
onMounted(() => {
reload1()
onMounted(async () => {
await curtain1Ref.value?.loadCurtain(colorsCycle[1])

Check failure on line 284 in src/components/Background.vue

View workflow job for this annotation

GitHub Actions / build 

Property 'loadCurtain' does not exist on type 'never'.
await curtain2Ref.value?.loadCurtain(colorsCycle[0])

Check failure on line 285 in src/components/Background.vue

View workflow job for this annotation

GitHub Actions / build 

Property 'loadCurtain' does not exist on type 'never'.
await curtain3Ref.value?.loadCurtain(colorsCycle[1])

Check failure on line 286 in src/components/Background.vue

View workflow job for this annotation

GitHub Actions / build 

Property 'loadCurtain' does not exist on type 'never'.
reload2()
})
function reloadBackground() {
Expand All @@ -260,7 +301,7 @@ defineExpose({ reloadBackground })
ref="curtainHolder1Ref">
<Curtain
class="curtain"
id="curtain1" ref="curtain1Ref"
ref="curtain1Ref"
@curtainCall="reload1"
/>
</div>
Expand All @@ -274,6 +315,16 @@ defineExpose({ reloadBackground })
@curtainCall="reload2"
/>
</div>
<div
class="curtain-holder"
ref="curtainHolder3Ref"
>
<Curtain
class="curtain"
ref="curtain3Ref"
@curtainCall="reload3"
/>
</div>
</div>
</template>

Expand All @@ -283,13 +334,15 @@ defineExpose({ reloadBackground })
top: 0;
left: 0;
right: 0;
bottom: 0;
bottom: 0;
}
.front-curtain {
.curtain-holder{
position: fixed;
z-index: 0;
}
.front-curtain {
.curr-curtain {
z-index: 2;
}
.prev-curtain {
z-index: 1;
}
</style>

0 comments on commit 7801dd4

Please sign in to comment.