CodingTrain / CodingTrain/Suggestion-Box

Refraction - Fisheye lens effect for water droplets on a windowpane

Offen
#1,728 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
Keine Sprachdaten
Sterne
570
Forks
85
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

I spent some time attempting to fake refraction through rain droplets on a window, but had very limited success. I checked the math, and it looked very daunting. Eventually, I settled on just using roughly the average color of the background:
[Portable Rainy Day](https://editor.p5js.org/thejoshvickers/full/GqLNRL6d_)

That being said, is it possible to do real-time refraction in Javascript from scratch? My thought would be to:
1) Create an image from the current frame of the canvas.
2) Scale down that image to the size of the "lens" (water droplet)
3) Flip that image on the x axis
4) Perform some sort of operation that creates a fisheye effect. Perhaps sampling pixels exponentially distant from the center of the image. (I just can't figure out how to actually do this.)
5) Use this as a new fill for the lens object.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne mit der verlinkten Portable Rainy Day-Skizze und ihrer Canvas-Darstellung des aktuellen Frames. Untersuche, ob die vorgeschlagene Bildaufnahme, Linsenskalierung, horizontale Spiegelung und Fisheye-Abtastung in JavaScript in Echtzeit implementiert werden können; das Issue nennt keine Dateien, Tests oder ein konkretes Abschlusskriterium, abgesehen davon, den Brechungseffekt zu erreichen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
computer-graphics
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
20/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.