# Effects Published articles for Effects. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Text rendering and effects using GPU-computed distances DevFeed: [Text rendering and effects using GPU-computed distances]() Original publisher: [Read original article]() Published: 2025-11-01T17:20:06Z Content type: tutorial Language: en Sources: [The Last Static Blog RSS]() Topics: [GPU](), [signed distance functions](), [Font](), [Algorithm](), [Mobile]() Tags: [algorithm](), [code](), [compute](), [effects](), [fonts](), [gpu](), [graphics](), [math](), [mobile](), [prog](), [render](), [text]() ### AI overview This tutorial explains how to compute signed distance fields for text glyphs on the GPU. It covers extracting glyph outlines, representing lines and Bézier curves as cubics, implementing the algorithm in a shader, and the trade-offs and effects enabled by the approach. ### Source excerpt Text rendering is cursed. Anyone who has worked on text will tell you the same; whether it's about layout, bi-directional, shaping, Unicode, or the rendering itself, it's never a completely solved problem. In my personal case, I've been working on trying to render text in the context of a compositing engine for creative content. I needed crazy text effects, and I needed them to be reasonably fast, which implied working with the GPU as much as possible. The distance field was an obvious requirement because it unlocks anti-aliasing and the ability to make many great effects for basically free. In this article, we will see how to compute signed distance field on the GPU because it's much faster than doing it on the CPU, especially when targeting mobile devices. We will make the algorithm decently fast, then after lamenting about the limitations, we will see what kind of effects this opens up. Progressive build of the 'あ' glyph from the Mochiy Pop One font Extraction of glyph outlines Non-bitmap fonts contain glyphs defined by outlines made of closed sequences of lines and (quadratic or cubic) Bézier curves. Extracting them isn't exactly complicated: FreeType or ttf-parser typically expose a way to do that. For the purpose of this article, we're going to hard code the list of the Bézier curves inside the shader, but of course in a more serious setup those would be uploaded through storage buffers or similar. Using this tiny program, a glyph can be dumped as series of outlines into a fixed size array: struct Bezier { vec2 p0; // start point vec2 p1; // control point 1 vec2 p2; // control point 2 vec2 p3; // end point }; #define N 42 #define NC 2 const int glyph_A_count[2] = int[](33, 9); const Bezier glyph_A[42] = Bezier[]( Bezier(vec2( 0.365370, -0.570817), vec2( 0.374708, -0.631518), vec2( 0.332685, -0.687549), vec2( 0.339689, -0.748249)), Bezier(vec2( 0.339689, -0.748249), vec2( 0.339689, -0.748249), vec2( 0.344358, -0.764591), vec2( 0.351362, -0.771595)), Bezier(vec2 ## Latent Effects for Reusable Language Components DevFeed: [Latent Effects for Reusable Language Components]() Original publisher: [Read original article]() Published: 2021-10-14T14:02:48Z Content type: article Language: en Sources: [Lambda the Ultimate]() Topics: [Haskell](), [Programming](), [Development](), [implementation]() Tags: [abstraction](), [deferred](), [effects](), [examples](), [functional](), [haskell](), [modular](), [monad](), [programming-languages](), [semantics](), [theory]() ### AI overview The article discusses latent effects, a generic class of control-flow mechanisms for modular language definitions. It describes how function abstractions, lazy computations, and MetaML-like staging can be expressed and combined, with a full Haskell implementation and examples. ### Source excerpt Latent Effects for Reusable Language Components, by Birthe van den Berg, Tom Schrijvers, Casper Bach Poulsen, Nicolas Wu: The development of programming languages can be quite complicated and costly. Hence, much effort has been devoted to the modular definition of language features that can be reused in various combinations to define new languages and experiment with their semantics. A notable outcome of these efforts is the algebra-based "datatypes "a la carte" (DTC) approach. When combined with algebraic effects, DTC can model a wide range of common language features. Unfortunately, the current state of the art does not cover modular definitions of advanced control-flow mechanisms that defer execution to an appropriate point, such as call-by-name and call-by-need evaluation, as well as (multi-)staging. This paper defines latent effects, a generic class of such control-flow mechanisms. We demonstrate how function abstractions, lazy computations and a MetaML-like staging can all be expressed in a modular fashion using latent effects, and how they can be combined in various ways to obtain complex semantics. We provide a full Haskell implementation of our effects and handlers with a range of examples. Looks like a nice generalization of the basic approach taken by algebraic effects to more subtle contexts. Algebraic effects have been discussed here on LtU many times. I think this description from section 2.3 is a pretty good overview of their approach: LE&H is based on a different, more sophisticated structure than AE&H's free monad. This structure supports non-atomic operations (e.g., function abstraction, thunking, quoting) that contain or delimit computations whose execution may be deferred. Also, the layered handling is different. The idea is still the same, to replace bit by bit the structure of the tree by its meaning. Yet, while AE&H grows the meaning around the shrinking tree, LE&H grows little "pockets of meaning" around the individual nodes remaining in the ## Tackling the Awkward Squad for Reactive Programming DevFeed: [Tackling the Awkward Squad for Reactive Programming]() Original publisher: [Read original article]() Published: 2020-09-15T17:48:50Z Content type: article Language: en Sources: [Lambda the Ultimate]() Topics: [reactive](), [Programming](), [IO](), [Scala](), [JavaScript]() Tags: [effects](), [implementation](), [javascript](), [ltu-forum](), [programming](), [reactive](), [reactive-programming](), [scala](), [streams]() ### AI overview This paper examines how reactive programming is embedded within applications that also use imperative languages such as JavaScript or Scala. It identifies long-running computations, side effects, and coordination between imperative and reactive code as key concerns, then proposes the Actor-Reactor Model, which separates actors and reactors and composes them through data streams. The model is demonstrated in the Stella language. ### Source excerpt https://2020.ecoop.org/details/ecoop-2020-papers/19/Tackling-the-Awkward-Squad-for-Reactive-Programming-The-Actor-Reactor-Model Sam Van den Vonder, Thierry Renaux, Bjarno Oeyen, Joeri De Koster, Wolfgang De Meuter Reactive programming is a programming paradigm whereby programs are internally represented by a dependency graph, which is used to automatically (re)compute parts of a program whenever its input changes. In practice reactive programming can only be used for some parts of an application: a reactive program is usually embedded in an application that is still written in ordinary imperative languages such as JavaScript or Scala. In this paper we investigate this embedding and we distill "the awkward squad for reactive programming" as 3 concerns that are essential for real-world software development, but that do not fit within reactive programming. They are related to long lasting computations, side-effects, and the coordination between imperative and reactive code. To solve these issues we design a new programming model called the Actor-Reactor Model in which programs are split up in a number of actors and reactors. Actors and reactors enforce a strict separation of imperative and reactive code, and they can be composed via a number of composition operators that make use of data streams. We demonstrate the model via our own implementation in a language called Stella. ## The Contrast Swap Technique: Improved Image Performance with CSS Filters DevFeed: [The Contrast Swap Technique: Improved Image Performance with CSS Filters]() Original publisher: [Read original article]() Published: 2017-11-17T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [browser](), [Web Development](), [Website]() Tags: [browser](), [css](), [effects](), [filter](), [image](), [images](), [performance](), [techniques](), [web-performance]() ### AI overview This article presents the Contrast Swap Technique, using CSS filters and blend modes to style images in the browser and explore their potential for web performance. ### Source excerpt With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn't all that filter effects are good for. You can use filters for web performance, too. ## Comparing Grayscale Image Effects in Canvas, SVG, CSS Filters, and CSS Blend Modes DevFeed: [Comparing Grayscale Image Effects in Canvas, SVG, CSS Filters, and CSS Blend Modes]() Original publisher: [Read original article]() Published: 2016-05-19T00:00:00Z Content type: comparison Language: en Sources: [Una Kravets]() Topics: [image effects](), [Canvas](), [CSS](), [SVG](), [HTML](), [implementation]() Tags: [canvas](), [compare](), [css](), [effects](), [html](), [image](), [image-effects](), [implementation](), [performance](), [post](), [svg](), [web]() ### AI overview This article compares implementations of the grayscale image effect using HTML canvas, SVG, CSS filters, and CSS blend modes. ### Source excerpt This post for Smashing Magazine looks at one of the most popular image effects, grayscale, to compare its implementation in HTML canvas, SVG, CSS filters, and CSS blend modes. ## Website animations and effects can harm scrolling performance DevFeed: [Website animations and effects can harm scrolling performance]() Original publisher: [Read original article]() Author: Stanko Published: 2016-02-29T00:00:00Z Content type: opinion Language: en Sources: [Stanko Tadić]() Topics: [Website](), [cpu](), [Hardware]() Tags: [animations](), [cpu](), [effects](), [hardware](), [laptop](), [performance](), [website]() ### AI overview The article argues that websites overloaded with animations and effects can become difficult to scroll and consume excessive CPU resources, even on high-end hardware. ### Source excerpt People need to realize that is not enough to have a nice website with a ton of animations and effects. There is no point having such a website if I can't scroll it, while CPU and coolers go crazy. And I use latest MacBook with maxed hardware. Can't imagine trying to use those websites on the old machine (or IE8-9). Get your performance together. ## CSS Image Effects #6: Infrared Photography DevFeed: [CSS Image Effects #6: Infrared Photography]() Original publisher: [Read original article]() Published: 2015-11-07T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [Code]() Tags: [code](), [css](), [effects](), [examples](), [image-effects]() ### AI overview This tutorial explains how to recreate a faux infrared photography effect with CSS filters, blend modes, duplicated images, inversion, color blending, and hue adjustments. It also presents a reusable mixin for applying the effect. ### Source excerpt In the final post of the CSS Image Effects series, we explore the beautiful, surreal world of infrared photography by creating our own faux effect. ## CSS Image Effects #2: 3D Glasses DevFeed: [CSS Image Effects #2: 3D Glasses]() Original publisher: [Read original article]() Published: 2015-10-05T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [image effects](), [color](), [3D]() Tags: [3d](), [css](), [effects](), [graphics](), [image-effects]() ### AI overview This tutorial explains how to recreate an anaglyph-style 3D photo effect in the browser using CSS blend modes. It describes combining red and cyan layers, separating them around the original image, and adding perspective to simulate depth. ### Source excerpt How do you make 3D-glasses-like graphics in the browser? We'll look at how blend modes work together to create this effect.