DriestYosho

When @Iggy is in a certain mood. 🦎⚠

I'm here to raid your cheese supplies and nobody can stop me

couhou

this is spin.

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

this is what it looks like.

<div style="animation: 10s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
  <!-- content -->
</div>

we can adjust the period using animation-duration and the phase using a negative animation-delay. (this makes the animation play immediately, but offset in time.)

<div style="animation: 10s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
  <!-- content -->
</div>

<div style="animation: 5s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
  <!-- content -->
</div>

<div style="animation: 10s linear -8s infinite spin; display: flex; justify-content: center; align-items: center">
  <!-- content -->
</div>

we can spin the other way by using reverse.

<div style="animation: 10s linear 0s infinite reverse spin; display: flex; justify-content: center; align-items: center">
  <!-- content -->
</div>

if we want to move in a circle, we can move our content to the side.

<div style="animation: 10s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
  <div style="transform: translate(100px)">
     <!-- content -->
  </div>
</div>

we can adjust the radius by adjusting how much we move.

<div style="animation: 10s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
  <div style="transform: translate(150px)">
     <!-- content -->
  </div>
</div>

we can stack spins by nesting divs that use spin.

<div style="animation: 10s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
  <div style="transform:translate(100px)">
    <div style="animation: 10s linear 0s infinite spin; display: flex; justify-content: center; align-items: center">
      <div style="transform:translate(100px)">
        <!-- content -->
      </div>
    </div>
  </div>
</div>

now, what if we wanted motion that was different than spin? can we move in a triangle instead?

yes! if we express our target motion as a closed path in the complex plane, we can use a fourier series to approximate it using a sum of spins! (there are many good explainers out there.)

we'll sample our target motion, compute a discrete fourier transform, then pick out the largest components for our approximation.

(implementation details: we need to cancel out each rotation before applying the next one, since otherwise subsequent rotations will be affected by it. this also has the benefit of not rotating your content, like in the previous examples. spin also goes clockwise [decreasing angle], so we need to reverse it.)

here's a triangle made from only 4 spins! (well, 8, if you count the 4 extra spins to cancel those out.)

here's some examples! (note: might lag browser)

2 points (square wave) (20 components)

4 points (20 components)

sine wave (2 components)

linear (triangle wave) (8 components)

sawtooth wave (20 components)

triangle (20 components)

square (20 components)

"marquee" (20 components)

you'll need to hide the bottom and maybe a bit of the sides.

"dvd screensaver" (20 components)

bounce (20 components)

eggbug (30 components, using @nex3's vectorized eggbug)

i thought about Fourier series yesterday and i remember thinking that its only a matter of time until someone does This.

god i love cohost

used these models:

• Procedural pencil by Oscar
• Pen model by Oppovinewood
• Rubber duck by mStuff

10-11-2022 - updated the colours in the tile matching puzzle to be more colourblind friendly.

10-11-2022 - I've heard reports that the lights on game doesn't properly detect completion on some browsers. I can't reproduce it on edge, chrome, or firefox on windows, or chrome and firefox on linux. One person said that zooming in or out can fix it, so please try this. Worst case scenario, right click on the purple button and delete the element, this will reveal the clickable button underneath.

view hints/solutions

step 1:

hint

look for inconsistencies, and click on 'em!

solution

click the screw in the bottom left corner, then click the hole just below the "blackle mori 2022" line

step 2:

hint

turn on all the lights

solution

this is the classic lights out puzzle, except instead of turning off lights, you need to turn them on. you can follow this guide to solve the puzzle, just invert the light-on-edness of all the instructions.

step 3:

hint

once you solve the sudoku puzzle, consider where the numbers in the circled cells could go...

solution

completing the sudoku puzzle gives the code 61644, enter this into the combination lock on the top right

step 4:

hint

also called picross, nonograms can be tricky. try to get most of the left side done before moving onto the right

solution

this is how the nonogram will look when solved:

step 5:

hint

pretty much the same as step 3. try your best!

solution

completing the sudoku puzzle gives the code 94427

step 6:

hint

try to figure out which tiles have to go in the corners first. this will whittle down the possibilities for where the rest of the tiles can go.

solution

the completed tile matching puzzle looks like this: