3
$\begingroup$

I've been playing around with more advanced graphics these days (beyond the basic 2D UI and image effects that the iOS platform offers), and I'm wanting to implement a visual effect similar to how iOS's Siri uses what appears to be a "color nebula" in the background.

Siri's color nebula

Here's a video of it in action. Seeing it animated is pretty important given that it's a dynamic effect.

Over time, the colors and intensity change, and various areas bloom and fade colors in. It's very subtle and has this ambient feel to it.

Anyway, I'm working in SceneKit, Apple's 3D scene composition API, and it has access to anything from Core Image to OpenGL to Metal as far as shaders and filtering geometries. So I'm curious if there is a general purpose algorithm for this kind of a) color effect (changing hue and other properties) and b) the slow, nebulous way colors come in and out and move around.

What techniques can one employ to pull of this animated visual effect?

I'd also love to read any additional resources about various ways to use colors and blending in graphics to achieve interesting effects.

Improve this question
$\endgroup$

1 Answer 1

Reset to default
3
$\begingroup$

I have no knowledge of SceneKit whatsoever, but the effect appears to be a simple post-process Gaussian blur of the app icon grid, with the blur radius increasing over time (i.e. increasing the blur amount) during the transition, with a touch of colour correction tacked on (which causes the darkening). It should be easy enough to implement in any graphics API that allows rendering to textures and performing image filtering on them (for instance, in OpenGL you could use framebuffer objects to achieve this).

You can have a look at an example WebGL implementation here. It's worth noting that it is a separable filter; meaning, it's a rectangle-shaped filter, but you can avoid sampling the same pixels (overlapping neighbouring samples) multiple times by splitting it into two passes – a horizontal and a vertical one – to the same effect.

Improve this answer
$\endgroup$
5
  • 1
    $\begingroup$ I think IneQuation means the gaussian filter is a box filter in the sense that it applies to nn pixels. It's then worth separating it since you go from nn to 2*n (muliplications per pixel) $\endgroup$
    – cmourglia
    Oct 13, 2016 at 14:20
  • $\begingroup$ Given the code linked in the answer, this is the first one. $\endgroup$
    – cmourglia
    Oct 13, 2016 at 19:15
  • 1
    $\begingroup$ You are correct, @trichoplax, I meant a square neighbourhood. Fixing. :) $\endgroup$
    – IneQuation
    Oct 14, 2016 at 6:50
  • 2
    $\begingroup$ I think he's not asking about the blurred home screen icons, but about the colored "clouds" that slowly fade in and out. See the cloudy green/cyan area in the mid-bottom of the screenshot, or watch the linked video. $\endgroup$
    – Nathan Reed
    Oct 14, 2016 at 15:38
  • $\begingroup$ Huh, okay, I didn't notice it before you pointed it out to me. Anyway, I'd try splatting some random, slowly moving, colourful particles to a small texture, up-sampling (while Gaussian-blurring) to screen size and additive-blending them onto the screen. Should I edit the answer or add a new one? $\endgroup$
    – IneQuation
    Oct 14, 2016 at 16:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.