contextfreecode / brackets

Code for video: Ogres are like brackets
https://youtu.be/Bxel30L6C5U
1 stars 0 forks source link

please add this Beads language version of the same code #1

Open magicmouse opened 3 years ago

magicmouse commented 3 years ago

Please add this text as rgb_darken.beads, to add another language to your list. This produces output based on colors 0..255 As you can see from the word count, it is more compact than TypeScript.

beads 1 program rgb_darken
//  this is the Beads language version of the color darkening program
//  as presented on YouTube at https://www.youtube.com/watch?v=Bxel30L6C5U 
//  from Context Free channel
//
//  produces the output:
//   blue (0, 0, 255)  (0, 0, 127)
//   red (255, 0, 0)  (127, 0, 0)
//  yellow (255, 255, 0)  (127, 127, 0)

// a 3 element tree of colors
const list <=== { "red":RED, "yellow":YELLOW, "blue":BLUE }

// function that darkens a color. We could use HSV space, but darkening in RGB 
// has the same results as using HSV.
calc darken (
    c : color
    ) : color
    const SCALE = 0.5
    //  the std lib has functions that work 0..1 or 0..255 for colors
    return rgb255(r255(c)*SCALE, g255(c)*SCALE, b255(c)*SCALE)

//  loop across the list of colors
calc main_init
    //  loop across the list of colors
    var c : color
    loop across:list kind:str val:c index:name
        var d = darken(c)
        log "{name} ({r255(c)}, {g255(c)}, {b255(c)})  ({r255(d)}, {g255(d)}, {b255(d)})"
tjpalmer commented 3 years ago

Thanks for the PR. I'm willing to take other languages for sure.

For the examples here, I purposely used floating point 0 to 1 rather than int 0 to 255, although I know the latter is more common in bitmap data. Looks like you're using a built-in Beads color type here. I guess that makes sense since Beads is focused on GUI. Haskell had a library I could have used for colors (Data.Colour) that I chose not to use so I could show structure definition. Maybe you could do one version with the built in colors and one with a structure definition?

I also made all the examples a little more complicated than needed for this example, because I wanted to use this as proxy for a more involved program. So I wanted to have more language features on display, including the array indexing. Any chance you structure the program as the list (using the common beads data structure, I suppose) of names, then create the rgbs, then the darks, then make the loop and do indexing? In all the languages here except Bash (and C++), I used that structure, even though it's more bother than necessary for the scope of this example alone.

magicmouse commented 3 years ago

okay i made a version with a record structure so you can see how you declare a record type, and then initialize an array of records using the handy [<..... >] notation, where you put the field headers first that you want to set, and then make a table. Very handy for pasting in CSV data from Excel for example. No commas needed. I forget which other language has this, might be Julia.

Since beads is all about GUI, i posted the executable version at http://beadslang.com/apps/context/rgb.html Just so it could do something when you click, i made it so that when you click on a row it will randomly pick a new color, and show the darkened version. Obviously not useful, but shows basic event handling.

beads 1 program rgb_darken
//  sample program related to Youtube https://www.youtube.com/watch?v=Bxel30L6C5U
//  from Context Free, showing color computations in various programming langauges
//  to run this, go to beadslang.com/apps/context/rgb.html

record a_item  // the record we use in our list of colors
    name  : str
    color : color

var list : array of a_item <=== [<
    name        color
    "red"       RED
    "yellow"    YELLOW
    "blue"      BLUE 
    "turquoise" MEDIUM_TURQUOISE
    >]

assets local:"./art/"
    file:"written_in_beads.gif" label:ICON_BEADS width:674 height:265 preload // aspect 2.54

//  a function that calculates a darker version of a color using naive RGB values
================================
calc darken_rgb (
    c : color
    ) : color
================================
    const SCALE = 0.5
    return rgb1(r1(c)*SCALE, g1(c)*SCALE, b1(c)*SCALE)

================================
vert slice main_draw
================================
    draw_rect(bb, fill:GRAY2)

    skip 10 al
    add 24 pt
        draw_str(bb, "Click on row to switch colors", size:0.75)
    skip 14 pt
    add 300 pt color_chart
    skip 10 al
    add 36 pt d_icon

================================
horz slice d_icon
================================
    skip 10 al
    add 200 pt
        draw_image(bb, ICON_BEADS, horz:1)
----------------
track EV_TAP
    html_redirect("http://www.beadslang.com", newtab:Y)

//  our main drawing function
================================
grid color_chart
================================
    horz slice  //  break the horizontal into 3 sections, with 4 gaps
        skip 10 al 
        add 140 pt // name
        skip 10 pt
        add 90 pt // original color
        skip 10 pt
        add 90 pt // darkened color
        skip 10 al 

    vert slice  //  break the vertical into as many rows as we have data
        skip 10 al
        loop across:list
            add 60 pt
            skip 10 pt
        skip 30 al

    cell  //  draw each cell in the grid
        var base = list[b.cell.y].color
        case b.cell.x
        | 1  //  cell name
            draw_str(bb, list[b.cell.y].name, just:RIGHT, size:0.6)
        | 2  //  original color
            draw_rect(bb, fill:base, corner:4 pt)
        | 3  //  darkened color
            draw_rect(bb, fill:darken_rgb(base), corner:4 pt)
----------------
track EV_TAP
    //  any tap in a row, replace the color with a random one
    var row = b.cell.y
    if row <> U  //  ignore taps in the gaps
        list[row].color = random_color()
        list[row].name = color_to_hex(list[row].color)
magicmouse commented 3 years ago

I have created a folder for context free related code and apps, so that as you do more examples in multiple languages, i can include Beads if that would be okay with you. it is one of the best ways to compare languages, by taking the same task and implementing in other languages. I could have logged to console the color values, but if all you want to do is write to the console, i am never going to dislodge existing tools, which are all excellent at console stuff, but really fall down in the HTML world. I have implemented my website, which still has some errors to fix regarding pattern backgrounds in scrolling windows. see http://beadslang.com. It makes a decent rubbery website.