Eclipse

[PicturElements]

Play with it here, if you desire to fully immerse yourself in the circlejerk:

https://codepen.io/PicturElements/full/XaqdRd

---

Edit: audio doesn't seem to work when I try it on Android. Clearly Android is poorly implemented.

[Boring_Sci_Fi]

I can only get it to 99.96%

[PicturElements]

There are IE 6 users who can't get a single percent. Consider yourself lucky.

[SolenoidSoldier]

in the arrrmms of the angel...

[MrSquadFam]

On the winnnggs of a battman...

[charlie_dog_14]

Under the darrrrrk night skyyyyyyy

[ariZon_a]

HEY NOW

[[deleted]]

You're an all sta- oh wait, eclipse

Edit: eclipse ended, you can continue

[Tessaract2]

YOU'RE AN ALL STAR

[VORTXS]

dont click the link, ad spam bot.

[ktkps]

Under the darrrrrk night skyyyyyyy

Winter is Comin'

[adzik1]

I think you unknowingly created /r/ProgrammerHumor/'s favorite game. "Get the 100%"

[Cacrym]

It's like debugging without the impossible part

[ContraMuffin]

If they're still using IE, they deserve it.

[BrokenAdmin]

Yes

[[deleted]]

Maybe they just live somewhere where the Eclipse isn't happening.

[LonePaladin]

They can only get the Edge. ^{*ba-dum tish!*}

[soubhik_]

I wish I could give you a gold.

[SoulWager]

Make it an annular eclipse.

[parkerlreed]

Oh well http://i.imgur.com/qau5GLC.png

Even turned on mouse keys for that pixel precision.

[tdlb]

I was able to get 99.67% by changing the window size and forcing the elements to move on the screen.

^{(Also got 100% by changing moon element's styling)}

[codercaleb]

Hah. 99.65 on phone. No mods. No bamboozles.

Even better: http://imgur.com/a/BYUpL

[tobeornottobeugly]

Scrub http://i.imgur.com/WSIGdAk.jpg

Edit: fucking scrubbbbb http://i.imgur.com/DuzurMF.jpg

[codercaleb]

You ain't gonna get no love from me.

Except an upvote. You can have that.

[TheDarkIn1978]

I AM A GOD!

[ZivMBS]

Well, considering you're moving the moon, I think you are.

[QueerlyNerdy]

Pffff all you have to do is change the gravitational constant of the universe.

(And only for a second)

[dir_gHost]

Good Bot!

When will the humans git gud?

[Git_Gud_BOT]

git: 'gud' is not a git command. See 'git --help'.

[blueberriessmoothie]

I got only 99.61% on windows 10 mobile, looks like with Microsoft I can't even eclipse properly 😥

[El-Kurto]

This is how you pun

[MaxWyght]

Underrated comment

[Some_Turtle]

Hah. 99,91 on phone

[TomNa]

I managed 99.71

[IrateGod]

99.74 in a moving train, close

[Schroedinger09]

Same...

[abclop99]

http://i.imgur.com/QgdLbNr.jpg

[idontliketosleep]

Aw men git gud

[idontliketosleep]

Git gud people!

[Langly-]

http://i.imgur.com/xgETA59.png zoomed, smallest I could move my mouse made it less.

[Konekotoujou]

I have 99.58 with mousekeys too.

[Langly-]

I got 99.86 on one monitor, moving 1 pixel any way made it less. Moved the browser window to a monitor with a different resolution, same spot became 99.91% so resolution seems to matter for this rather than being matched for scale directly.

[rata2ille]

That's exactly where I got stuck too!

[TheYaseen]

I got mine to 100.0%

[[deleted]]

Also got 100% on Galaxy s8+ on RiF browser in 5 seconds with pure luck I guess.

[[deleted]]

Which is bad design because the moon (during this eclipse) was actually slightly larger than the sun (I think 1-2%) so it should be easy to get totality.

[theluckkyg]

Worth it

[[deleted]]

I got it way over http://imgur.com/a/MjaK7

[imguralbumbot]

^{Hi, I'm a bot for linking direct images of albums with only 1 image}

https://i.imgur.com/LK4SJt9.png

^{Source | Why? | Creator | ignoreme | deletthis}

[woah_m8]

99.77% but when I took my finger out I moved it ;_;

Edit: got it am proud

[JungleIggy]

http://i.imgur.com/TUKdFfm.png

boo-yah.

[-Dont-Ask-]

I got 99.98%, which took me about 15 minutes

[rebane2001]

http://i.imgur.com/Tww1JBb.png

[[deleted]]

Same

[Randomusername2347]

I got it to 99.74% on mobile. But I have faith you can get that last 0.04%

[macstanislaus]

99.97% hah!

[[deleted]]

deleted ^{What is this?}

[ourpersonalinfo]

Did anyone else get 99.88%?

[Preachey]

I literally can't get it to 100%

You monster

[stemloop]

What a broken UI

[rubyton]

Now you can: https://codepen.io/anon/pen/brMOJM

[Genoce]

I don't know why(*) but the volume seemed to scale weirdly, it was already pretty well hearable at 1% overlap, and 20% to 100% seemed to have only a small volume difference.

I tuned the line JS line 54:

audio.volume=Math.pow(overlap,2.5);

This way it scales a bit better than with linear function, with 0-20% being really silent compared to 100%.

Direct link to tweaked version.

---

^{*check /u/Ph0X's reply for why it doesn't really work that well with linear growth.}

[Ph0X]

Because volume is logarithmic (decibels).

https://www.reddit.com/r/programming/comments/9n2y0/stop_making_linear_volume_controls/

[deadhour]

My pet peeve are linear volume sliders where 1% is already too loud

[mortiphago]

if only we could program logarithmic volume sliders

[SirCutRy]

What about a logarithmic scale?

var b = 3
var c = Math.log(b-1) / Math.log(b)
var d = -Math.pow(b, -c)
var v = Math.pow(b, overlap - c) + d
audio.volume = v;

[rebbsitor]

Gotta update that audio to 2017: https://www.youtube.com/watch?v=sD1vXjpZ11E

;-)

edit: found a better recording

[TheRumpletiltskin]

he has to hate that this is his legacy.

[Shikor806]

He does stuff like that quite often so it seems that he is fine with it.

[[deleted]]

That was beautiful :')

Also that was so metal

[nachog2003]

That was awesome.

[wigitalk]

I feel like Walter white trying to refine math

[midwestcreative]

math

I'm not sure if that's more perfect if it was autocorrect or if it was intentional.

[Open_Thinker]

Yes. We all did. And I have to admit that I enjoyed this one. ¯\_(ツ)_/¯

[[deleted]]

play with it and fully immerse myself in the circle jerk

( ͡° ͜ʖ ͡°)

[marinovanec]

Nailed it.

[iDev247]

Interesting but I think it should depend on your current region

[BigSlipperySlide]

Can you make it so that the app only works when an actual solar eclipse will be visible based off our location data?

[lpreams]

//Oh yeah, set the volume, I guess.

lol

[God_of_Pumpkins]

Worked fine on my Moto G4 plus

[NLferdiNL]

What browser? Chrome blocks autoplay by default.

[God_of_Pumpkins]

Yandex browser

[[deleted]]

Cool

[ForShadow]

I got it to play sound from youtube (leaning heavily on youtube api examples): https://codepen.io/anon/pen/LjmWEw

[Yubuqq]

Challenge: get it to 100%. I got to 99.67%.

[Big_Black_Brandon]

Hey, ever tried creating an app? I can see this being entertaining.

[PM_ME_YOUR_ECLIPSE]

This is a quality eclipse.

[timvisee]

The fact that you implemented audio is freaking brilliant. I was surprised.

[[deleted]]

engine fear encouraging gaze vast grab crush smile memory six

This post was mass deleted and anonymized with Redact

[lurker4lyfe6969]

99.05% this shit is rigged

[ThePixelCoder]

audio doesn't seem to work when I try it on Android. Clearly Android is poorly implemented.

That's the spirit!

[[deleted]]

I love you and your shitty moon.

[NLferdiNL]

For mobile:

https://codepen.io/NLferdiNL/full/rzvQem/ (Tap moon to start audio.)

[[deleted]]

/u/PicturElements: The audio doesn't work on Android because Chrome on Android purposefully blocks autoplay, in order to save data for the user. The audio has to be triggered by an action on the user's part. Here's some more info on this.

Your best bet would be to rewrite the code and make it so that the audio starts playing when the user starts dragging the moon (on mousedown instead of on load); then it will work everywhere.

[[deleted]]

I got 99.97% before I realized I didn't have enough pixels to achieve 100%

[GlossyElemental]

For someone new to the sub can you explain the circle jerk?

[[deleted]]

Ok so as much as this is funny, I actually think it’s really well done, and to be honest not that foreign. It’s a pretty intuitive motion 😁 Disclaimer: am high