woo! loop

src/Curtain/Curtain.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, type PropType } from 'vue'
+
 // @ts-ignore
 import{ Smooth } from '../assets/Smooth'
 
@@ -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 = []
@@ -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
 
@@ -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) {
@@ -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
@@ -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
  }
  }
 
@@ -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) {
@@ -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]
@@ -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
@@ -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 {
@@ -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")! 
@@ -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>

src/components/Background.vue

@@ -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 },
@@ -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 },
@@ -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])
+ await curtain2Ref.value?.loadCurtain(colorsCycle[0])
+ await curtain3Ref.value?.loadCurtain(colorsCycle[1])
+ reload2()
 })
 
 function reloadBackground() {
@@ -260,7 +301,7 @@ defineExpose({ reloadBackground })
  ref="curtainHolder1Ref">
  <Curtain
  class="curtain"
- id="curtain1" ref="curtain1Ref"
+ ref="curtain1Ref"
  @curtainCall="reload1"
  />
  </div>
@@ -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>
 
@@ -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>