Color Shifter

Hey guys, I recently came across a game called OLO. Its very simple and something I really like about it is the color transitions they have during the menu. The effect I’m talking about is displayed in the beginning of this video.

I imagine it wouldn’t be that hard to include into Codea because I want to use it in my project as well. I think the code might go something like where you add a value to the RBG every time you call it. For example,

background(29+20, 107, 157, 255)

Please, anyone help

I kinda solved my own problem, but I need help reverting back to the same color I started at, kind of like a loop. I put

bg = color(29 ,107, 157, 255)

into the main and then

 bg = bg + color(1, 1, 0, 255)             

into the draw function.

You can try using a sine function for the rgb channels with an offset to make them run out of sync.

sv = sv + 0.002.    -- this determines the speed of the sine wave
red = 127 + math.sin(sv) * 127 -- this value goes between 0-254 

Mpilgrem also kindly posted a hsv function to controll colors using hue, saturation and brightness in my “liquid line flow” thread a couple down.

.@Kirl can you please explain what this sine wave does and how i would use code snippet to create to a background transition. Thank you!!

I just learnt about this! :smiley: It fluctuates the red value from 0 to 254 :smiley: Like magic!

.@Jordan @Kirl I learned how to use your code into my background and now I was just wondering how I could add more colors to the spectrum. I already tried putting a green and blue value but all i get is a fade to black and back. How do I add more colors and still make it look nice, color wise?

check out this post by @Zoyt

.@Jordan thanks for the link. It’s very, very helpful. I searched something like that, but with the forum layout it didn’t show up

Good luck with it and have fun!

thanks .@Zoyt. Since you have created this class, I have one question. My whole game UI is based on pastel colors. I wanna make the color shifting include pastels as well but I can’t full manage to. This is what I have so far:

ChangeColor = class()

function ChangeColor:init(cc,r,g,b)
    self.phase = 0
    self.changingpace = cc
    self.bgr = r
    self.bgg = g
    self.bgb = b

function ChangeColor:update()
    self.bgr = 29+ 100 * math.sin(self.phase / (2*math.pi))
    self.bgg = 107+ 100 * math.sin(self.phase * 4/ (2*math.pi))
    self.bgb = 157+ 100 * math.sin(self.phase * 6/ (2*math.pi))
    self.phase = self.phase + self.changingpace
    if self.phase > (360 * 6) then
        self.phase = 0

function ChangeColor:getColor()
    return self.bgr,self.bgg,self.bgb

It’s ok if you don’t know how, as you’ve posted this code a while back, but thank you

If your UI is based on pastels then I assume that you want only pastels in your color shift. What about adding some white to the color before using it?

.@Codeslinger thanks for the tip. How exactly would I add white? Would it be a transparent white?

I’m not sure how to make nice pastel colors, perhaps there is some kind of technical definition of a pastel color? Maybe look into pastel filters of photo editing programs.

Anyway, I would try to reduce the distance to white, i.e. reduce the distance to 255 for each of the color components red, green and blue.

Here’s an example for the red component, you’ll have to play with the factor.

-- given: red (0...255)
distance = 255 - red
-- 30% more white
pastel_red = red + (distance * 0.3)

.@Codeslinger that looks good too. A while back I was messing with the blend and mix operations that were added with colors and wondered if I could do the same to achieve a pastel. this is what I came up with:

    c1 = color(255, 255, 255, 10)
    c2 = color(ChangeColor:getColor())
    c3 = c1:blend( c2 )

Pastel Bon Bons here was inspired by this discussion. The function pastelH2RGB(hue, strength) is based on the equilateral triangles that form a circumference, on the surface of the cube, below the white corner of the red, green, blue cube of colours.