Ombre

1 collaborator

WHAT IS IT?

This demonstrates a function that returns an intermediate RGB color along a gradient between two colors. The entire set of those colors is also called an Ombre.

HOW IT WORKS

The wrong way -- linear interpolation

A simple way to find an intermediate color between two colors is to use a linear scale.

To find the color 1/4 of the way between RGB color a and RGB color b, you might multiply the components of A by 1/4 and B by 3/4, and add those results. For a position T, between 0 and 1, the formula is:

C = A * t  +  B * (1 - t)

Simple, but incorrect. Because of the way color works the resulting gradient is darker and duller than it should be.

With this method, the half-way color beween Pure Blue [ 0 0 255] and pure Yellow [ 255 255 0], is middle gray [ 128 128 128 ], which is far to dark to be the halfway between to such intense hues.

The right way -- square root of summed interpolated squares.

The correct way is to square the values of the components, scale the squares, sum the products, then take the square root of the sum.

C = sqrt (A ^ 2 * t + B ^ 2 * (1 - t))

The results maintain brightness and saturation across the ombre.

With this method, the half-way color beween Pure Blue [ 0 0 255] and pure Yellow [ 255 255 0], is light middle gray [ 180 180 180 ].

If you're thinking that this looks a lot like a distance function, you're not wrong.

HOW TO USE IT

For ease of use typical situations, and to make the Ombre reporter work like SCALE-COLOR, the reported expects two colors, that can be NetLogo color numbers or RGB colors, a number that is the number of divisions in the ombre, and a number that is the number of the division that should be reported (the first division is 0).

To use the Ombre function in your own model, provide the start and end color, the number of divisions, and the desired division. Here's a simple example:

to demo-ombre
  create-turtles 10
  [ setxy min-pxcor + who 0
    set color Ombre red blue 10 who
  ]
end

THINGS TO NOTICE

This demonstration model includes both methods. Notice how brightness is not maintained across the gradiation using the "bad-ombre" method.

THINGS TO TRY

In this demo, change the colors used for the ombres.

Try using ombre to color a collection of turtles

Try using ombre with some randomness, so the resulting colors dont have visible bands.

Comments and Questions

Please start the discussion about this model! (You'll first need to log in.)

Click to Run Model

globals [ kind ]

to-report Ombre [ a b steps sample ]
  let t sample / (steps - 1)
  if is-number? a [ set a extract-rgb a ]
  if is-number? b [ set b extract-rgb b ]
  ;; right: square-root of sum of scaled squares
  report (map [ [ aa bb ] -> sqrt(  (aa * aa * t) + (bb * bb * (1 - t) ) ) ] a b)
end 

to-report Bad-Ombre [ a b steps sample ]
  let t sample / (steps - 1)
  let argb a
  let brgb b
  ;; wrong: linear scaled values
  report (map [ [ aa bb ] -> ( (aa * t) + (bb * (1 - t) ) ) ] argb brgb)
end 

to-report Ombre2 [ a b steps sample ]
  if-else kind = "bad"
  [ report bad-ombre a b steps sample ]
  [ report ombre a b steps sample ]
end 

to setup-bad
  set kind "bad"
  setup
end 

to setup-good
  set kind "good"
  setup
end 

to setup
  clear-patches
  clear-turtles
  let t 0
  let rgbRed [255   0   0 ] ;; pure Red
  let rgbGreen [  0 255   0 ] ;; pure Green
  let rgbBlue [  0   0 255 ] ;; pure Blue
  let rgbYellow [ 255 255  0 ] ;; cyber Yellow
  ask patches
  [ let colorRight Ombre2 rgbRed rgbYellow        world-width  (pycor - min-pycor)
    let colorLeft  Ombre2 rgbBlue rgbGreen        world-width  (pycor - min-pycor)
    ;; output of these is then blended to get the final color
    let colorBottom-to-Top Ombre2 colorRight colorLeft world-height (pxcor - min-pxcor)
    set pcolor colorBottom-to-Top
  ]
  reset-ticks
end 

to magnify
  if not any? turtles [ create-turtles 1 [ set shape "circle 3" set size 10 ] ]
  ask turtles
  [ if-else mouse-inside?
    [ setxy mouse-xcor mouse-ycor ]
    [ setxy 0 0]
    set color pcolor
    set label round-rgb color
  ]
end 

to-report round-rgb [ this ]
    report (map [x -> int x ] this)
end 

to-report color-under-mouse
  if mouse-inside? [ report round-rgb [ pcolor ] of patch mouse-xcor mouse-ycor ]
  report "n/a"
end 

to go
   magnify
end

There is only one version of this model, created almost 4 years ago by James Steiner.

Attached files

File	Type	Description	Last updated
Ombre.png	preview	Preview for 'Ombre'	almost 4 years ago, by James Steiner	Download

This model does not have any ancestors.

This model does not have any descendants.

NetLogo