Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the Gaussian function to blur a pixmap #58

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

weihsinyeh
Copy link
Collaborator

@weihsinyeh weihsinyeh commented Oct 6, 2024

Use Pascal's Triangle to approximate a 5x5 Gaussian Kernel, and apply Gaussian blur on the twin_pixmap_t to implement the blurring technique.

See: #34

@jserv
Copy link
Contributor

jserv commented Oct 6, 2024

  • The original
the original
  • The proposed change
the proposed change

The idea behind #34 is to implement drop shadow, one of the most popular visual effects in modern window systems and compositing window managers. The effect should be applied at the window management level, not to background images, meaning the background image should not be blurred. The graphical effect of a visually elevated shape with a shadow underneath the window frame should occur transparently.

include/twin.h Outdated Show resolved Hide resolved
src/draw.c Outdated Show resolved Hide resolved
src/draw.c Outdated Show resolved Hide resolved
@weihsinyeh
Copy link
Collaborator Author

weihsinyeh commented Oct 6, 2024

The idea behind #34 is to implement drop shadow, one of the most popular visual effects in modern window systems and compositing window managers. The effect should be applied at the window management level, not to background images, meaning the background image should not be blurred. The graphical effect of a visually elevated shape with a shadow underneath the window frame should occur transparently.

Because I'm still unsure where to place the blur operation, whether to implement the blur in '_twin_widget_queue_paint()', as this function handles the rendering order of each widget object. It would need to read the corresponding pixel block currently on the screen during rendering to blur the current background. Or should I implement this operation when each widget's TwinEventPaint occurs? So I first try to implement this function on the background to see its effect.

@jserv
Copy link
Contributor

jserv commented Oct 6, 2024

Or should I implement this operation when each widget's TwinEventPaint occurs? So I first try to implement this function on the background to see its effect.

Alternatively, you can write an image viewer with drop shadow functionality to evaluate performance and visual effects in the initial stage. Once you have a better understanding of the window manager events and their flow, we can proceed with integrating it into the window system.

See MDN: drop-shadow

@jserv
Copy link
Contributor

jserv commented Oct 6, 2024

Alternatively, you can write an image viewer with drop shadow functionality to evaluate performance and visual effects in the initial stage.

For performance evaluation, you may consider the code mentioned in #55 (comment) .

@weihsinyeh
Copy link
Collaborator Author

I haven't applied stack blur to the drop shadow yet, because I don't know how to access the current screen's topmost pixel map. I want to apply the stack blur to a specific region of the topmost pixel map that overlaps with the shadow and then use this as the new shadow. The topmost pixel map is efficiently updated by refreshing only the damaged areas.

apps/multi.c Outdated Show resolved Hide resolved
@weihsinyeh weihsinyeh force-pushed the drop_shadow branch 2 times, most recently from a78fc51 to 3433384 Compare November 13, 2024 13:44
@jserv
Copy link
Contributor

jserv commented Nov 13, 2024

Compilation error/warning reported by Clang:

src/window.c:72:13: error: non-void function 'twin_window_create' should return a value [-Wreturn-type]
   72 |             return;
      |             ^
src/window.c:65:17: warning: left operand of comma operator has no effect [-Wunused-value]
   65 |         window->shadow_offset_x, window->shadow_offset_y = 50, 50;
      |         ~~~~~~  ^~~~~~~~~~~~~~~
src/window.c:65:64: warning: expression result unused [-Wunused-value]
   65 |         window->shadow_offset_x, window->shadow_offset_y = 50, 50;
      |                    

Add the stack blur function to blur the pixmap that is test on the test
window. Add the shadow pixel map under the window which has shadow
feature.
@jserv
Copy link
Contributor

jserv commented Nov 13, 2024

I am unsure how to validate this. Could you provide the relevant procedures or methods along with the expected behavior?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants