Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Colours in Codea

edited July 17 in Questions Posts: 35

Can someone give me a list of all the colours used in Codea, such as the ones used for the background, comments, numbers, strings, sidebar (with the line numbers), and so on? I'm trying to match Codea's look in a Codea project. I already found the font, inconsolata. I tried sampling the colours from screenshots, but since the text is antialiased, I can't get the exact value. So far I have determined the background as being color(30,32,40) and the comments as being color(30,160,140). The rest I cannot know for sure. I can't find the code anywhere.

Tagged:

Comments

  • dave1707dave1707 Mod
    Posts: 6,331

    @MPan1 The colors aren't listed anywhere, so unless the developers respond, you'll just have to try and match them yourself.

  • Posts: 744

    Fill, stroke, tint, ...
    (
    Red[0-255]
    ,
    Green[0-255]
    ,
    Blue[0-255]
    )

  • Posts: 35

    @TokOut I know how the color functions work, I'm asking for the RGB values of different parts of Codea's interface. Maybe @Simeon could help out?

  • Posts: 35

    You could always take a screenshot and use a paint/photo tool and sample the colors of the pixels yourself.

  • dave1707dave1707 Mod
    edited July 17 Posts: 6,331

    @MPan1 Here a little program that allows you to get the color of a screen pixel. To use, do a screen capture in landscape mode of what you want to get the pixel colors of. Once you do a screen capture, go into Codea and then into assets, then the documents folder. At the top select add from photos and select the picture. Give it a name and select use. Change the name in my program to the name of your picture. When you run my program, there will be a small red square in the center of the screen. Move your finger anywhere on the screen to move the small red square. The pixels in the small red square will show enlarged in the large red square. The r,g,b,a values below the large red square will be the color values of the pixel that's in the blue square in the center of the large red square. I don't have any error checks, so if you move the small red square out of the picture, the program will exit with an error.

    displayMode(FULLSCREEN)
    supportedOrientations(LANDSCAPE_ANY)
    
    function setup()
        rectMode(CENTER)
        dx,dy=WIDTH/2,HEIGHT/2
        img=readImage("Documents:picture")       -- your image here
    end
    
    function draw()
        background(40, 40, 50)
        sprite(img,WIDTH/2,HEIGHT/2)
        stroke(255, 0, 0, 255)
        strokeWidth(2)
        noFill()
        rect(dx-1,dy-1,10,10)
        r,g,b,a=img:get(dx//1,dy//1)
        fill(255)
        rect(800,120,250,30)
        fill(255, 0, 0, 255)
        text("r="..r.."  g="..g.."  b=  "..b.."  a=  "..a,800,120)
        tab={}
        for x=-3,3 do
            for y=-3,3 do
                r,g,b,a=img:get(dx//1-x,dy//1-y)
                table.insert(tab,vec4(r,g,b,a))            
            end
        end
        strokeWidth(1)
        rect(795,220,170,170)
        cnt=0
        for x=1,7 do
            for y=1,7 do
                cnt=cnt+1
                fill(tab[cnt].x,tab[cnt].y,tab[cnt].z,tab[cnt].w)
                rect(875-x*20,300-y*20,20,20)
            end
        end
        noFill()
        stroke(0,0,255)
        strokeWidth(3)
        rect(795,220,23,23)
    end
    
    function touched(t)
        if t.state==MOVING then
            dx=dx+t.deltaX
            dy=dy+t.deltaY
        end
    end
    
  • edited July 17 Posts: 35

    @BigZaphod @dave1707 as I said in my first post, I tried sampling the colours already, but it's no use as the text is antialiased, meaning it is near impossible to find a point where the text has an alpha of 255.

  • dave1707dave1707 Mod
    Posts: 6,331

    @MPan1 When I use my program and a screen shot of some code in the Codea editor, every pixel I looked at had an alpha of 255. The r,g,b values varied because of the antialise, but you can get the color value used by looking at multiple pixels of a number or letter or other thing and see what the r,g,b values are of the darkest pixels. That should give you an idea of the color used for the different parts of the editor.

  • Posts: 35

    @dave1707 I want to find exact values, but I can't because of this kind of thing:

    image.png 79.3K
  • Posts: 35

    I demand the highest quality integers on the market

  • dave1707dave1707 Mod
    Posts: 6,331

    @MPan1 What are you using to look at the screen. When I use my code to look at setup(), the darkest values are 0,0,0,255 for the letters, and 50,70,120,255 for the (.

  • dave1707dave1707 Mod
    Posts: 6,331

    @MPan1 It's also better to look at something that goes horizontal or vertical so you don't get a lot of different values.

Sign In or Register to comment.