CodingTrain / CodingTrain/Suggestion-Box
Refraction - Fisheye lens effect for water droplets on a windowpane
- 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