Sorry, your browser doesn't support canvas element !
Sorry, your browser doesn't support canvas element !
Watercolor Illusion
Illusory color spreads into the entire enclosed area !
4
deg
0.1
deg
10
%
10
deg
1
cpd
25
deg
280
deg
v1.0
© 2020 KyberVision - Innovation in Vision Sciences
Send Feedback
The watercolor illusion or watercolor effect is a phenomenon of long-range color assimilation occurring when a dark chromatic contour delineating a figure is flanked on the inside by a brighter chromatic contour; the brighter color spreads into the entire enclosed area. The illusion is best when the inner and outer contours are of complementary colors (like orange and purple). The watercolor illusion is dependent on the combination of luminance and color contrast of the contour lines in order to have the color spreading effect occur.

References:

  Pinna (1987) Un effetto di colorazione. In: Majer V, Maeran M & Santinello M (Eds) Il laboratorio e la città. XXI Congresso degli Psicologi Italiani, p.158. Milano: Società Italiana di Psicologia

  Pinna et al. (2001) Surface color from boundaries: a new ‘watercolor’ illusion. Vision Research 41:2669–2676

  Pinna et al. (2003) The watercolor effect: a new principle of grouping and figure-ground organization. Vision Research 43:43–52

  Devinck et al. (2006) Illusory spreading of watercolor.. Journal of Vision 6:625–633

   Pinna (2008) Watercolor illusion. Scholarpedia 3(1):5352
Here is the math behind this stimulus:

  ratio = outerside/innerside
  radius = innerside/2; radout = outerside/2
  xmod = 1+0.01*ram*cos(2*pi*sf*y); ymod = 1+0.01*ram*cos(2*pi*sf*x)
  xmodout = radout*(1+0.01*ram*cos(2*pi*sf*y)/ratio)
  ymodout = radout*(1+0.01*ram*cos(2*pi*sf*x)/ratio)
  inx = (abs(x)-radius*xmod)/sigma; iny = (abs(y)-radius*ymod)/sigma
  inx2 = inx*inx*inx*inx; iny2 = iny*iny*iny*iny
  inxz = (sign(inx)*exp(-(inx2))) * float(abs(y)<radius*1.1)
  inyz = (sign(iny)*exp(-(iny2))) * float(abs(x)<radius*1.1)
  innegpattern = (inxz+inyz)<0
  inpospattern = (inxz+inyz)>0
  outx = (abs(x)-xmodout)/sigma; outy = (abs(y)-ymodout)/sigma
  outx2 = outx*outx*outx*outx; outy2 = outy*outy*outy*outy
  outxz = (sign(outx)*exp(-(outx2))) * float(abs(y)<radout*1.05)
  outyz = (sign(outy)*exp(-(outy2))) * float(abs(x)<radout*1.05)
  outnegpattern = (outxz+outyz)<0
  outpospattern = (outxz+outyz)>0
  back = (1-innegpattern-inpospattern-outnegpattern-outpospattern)
  innegoutpospattern = innegpattern+outpospattern
  inposoutnegpattern = inpospattern+outnegpattern
  deg = outhue+180
  b = 0.83; s = 0.84; hi = floor(deg/60); f = (deg-hi*60)/60
  p = b*(1-s); q = b*(1-f*s); t = b*(1-(1-f)*s);
  r1 = rhsb(hi,b,p,q,t); g1 = ghsb(hi,b,p,q,t); b1 = bhsb(hi,b,p,q,t)
  deg = inhue+180
  b = 0.99; s = 0.75; hi = floor(deg/60); f = (deg-hi*60)/60
  p = b*(1-s); q = b*(1-f*s); t = b*(1-(1-f)*s);
  r2 = rhsb(hi,b,p,q,t); g2 = ghsb(hi,b,p,q,t); b2 = bhsb(hi,b,p,q,t)
  zr = r1*innegoutpospattern + r2*inposoutnegpattern + back
  zg = g1*innegoutpospattern + g2*inposoutnegpattern + back
  zb = b1*innegoutpospattern + b2*inposoutnegpattern + back

Where:

  'innerside' is the inner frame size (in deg)
  'sigma' is the border thickness (in deg)
  'ram' is the amplitude modulation (in %)
  'outerside' is the outside frame (in deg)
  'sf' is the spatial frequency (in cpd)
  'inhue' is the inner hue (in deg)
  'outhue' is the outer hue (in deg)
The whole stimulus is generated in real-time using a GLSL shader that runs right inside your WebGL-compatible browser. The plain Math behind the stimulus was converted to this optimized GLSL shader using the new Psykinematix Pro Edition. Translation to Matlab and Python code is also possible !

This whole widget was also fully generated using Psykinematix Pro Edition. The parameters that control the stimulus properties through the sliders are the same as the ones you would define as dependent or independent variables when using the stimulus in an actual psychophysical experiment run in Psykinematix. The widget creation is otherwise fully customizable with your own logo, copyright, links, etc.

To learn more about the widget creation, click on the above "Made With" button !
v1.0
© 2020 KyberVision - Innovation in Vision Sciences