Diffusion Curves

From Inkscape Wiki
Jump to navigation Jump to search

Diffusion Curves are a way of specifying very free form gradients. It works by letting colors diffuse from curves, seeding the colors along both sides of the curves using gradients (along the curves). Additionally a varying amount of blur can be applied along the curves. This makes diffusion curves extremely flexible and very interesting to have in Inkscape.

Representation

The links at the bottom define various features that can be useful for Diffusion Curves. Here the following features are considered:

  • Colors at nodes / gradients defined on paths (on one or both sides of the curve)
  • Diffusion across boundaries

Diffusion curves could be represented by paths with gradients attached to them, along with an enclosing group that says that the colors should be diffused within that group. For example (don't mind the exact attributes):

<g diffuse="true">
  <path d="M 0,0 L 190,190"
        leftBoundary="#F00 #00F" rightBoundary="#00F #F00" boundaryBlur="5" />
</g>

Or:

<g diffuse="true">
  <path d="M 0,0 L 190,190"
        leftBoundary="url(#redToBlue)" rightBoundary="url(#blueToRed)" boundaryBlur="5" />
</g>

Assuming that the two gradients are made to go from #F00 to #00F and vice versa this would roughly look like this (note that this is just a rough approximation):

DiffusionCurveSimulation.png

Note that with diffusion curves the blur itself can also vary along the path, which could be used in the above image to let the edge be sharper in some areas. This is useful for depth of field effects for example.

Normally diffusion curves will have infinite extent, but this can be controlled when needed by surrounding a set of curves with a closed path that has an outside boundary which is fully transparent.

Mathematical Definition

Diffusion curves are defined as the solution to a Laplace equation (the sum of second partial derivatives is zero) with boundary conditions (the colors on the curves). This is done for both the colors and the blur and then a spatially varying blur is applied to the diffused colors using the diffused blur values.

Converting to SVG

There would be several possible avenues for converting diffusion curves to SVG:

  • Bitmap rendering... (Obviously not very appealing.)
  • Using filters (for example, it should be possible to simulate spatially varying blur by doing multiple blurs and combining the results using weights).
  • By solving the Laplace equations on a Delaunay triangulation or something similar, and using ordinary gradients and/or blurs for the finishing touches or to make it possible to use a coarser grid. (This could give problems in the presence of "curved curves".)

Questions/Problems

  • If diffusion curves are indeed represented by paths inside a group, what happens with subgroups or shapes without having gradients defined along their edges?
  • What should happen with 2D objects (filled shapes and strokes) in diffusion groups?
    • It might actually be interesting to not only set colors and blur values (heat capacity?) along the sides of edges (1D), but also for surfaces (2D). This shouldn't complicate things much. In fact, it might even be slightly easier to handle the 2D case properly (as it is easier to discretize for example).
  • It might be interesting to redefine them in some way that unifies the color diffusion and blurring. E.g. currently colors are either to be met exactly or not at all, is it possible to reformulate the problem in such a way that we can restrict colors to varying degrees?

Links