Friday, 31 May 2019

rgba2rgb

I had a lovely little challenge a couple of days ago which, in conjunction with my invite to the First Alpha Testing of Empire of Code, got me excited. It led me to generate the following chunk of code:

const rgba2rgb = rgba => "#" + rgba.match(/.{1,2}/g)
                             .map((c, i, a) => (i !== a.length -1) 
                                 ? parseInt(c, 16) 
                                 : parseInt(c, 16) / 255)
                             .map((c, i, a) => (i !== a.length -1) 
                                 ? ~~((1 - a[3]) * 255 + a[3] * c) 
                                 : null)
                             .reverse()
                             .slice(1)
                             .reverse()
                             .map(c => c.toString(16))
                             .join("");

We needed to convert an RGBA colour to RGB, with the assumption that the original colour was atop a white background. The maths and colour theory are a little confusing, and I went through any number of iterations. The result made me feel a bit smug though as it is teeny - I'm guessing it could be improved though.

Have at it!

EDIT

So I clocked that the above wasn't quite as brilliant as I thought so I've updated it after simplifying it:

const rgba2rgb = function(rgba){ 
 const coloursAsBase16 = rgba.match(/.{1,2}/g);
    console.log("coloursAsBase16", coloursAsBase16);
    const coloursAsBase10 = coloursAsBase16.map(function(c, i, a){ 
     if(i !== a.length - 1){
         return parseInt(c, 16) // Value between 1 - 255
        }else{
         return parseInt(c, 16) / 255 // Value between 0 - 1
        }
    });
    console.log("coloursAsBase10", coloursAsBase10);
    const coloursWithAlpha = coloursAsBase10.reduce(function(t, c, i, a){
     if(i !== a.length - 1){
         return t.concat([parseInt(((1 - a[3]) * 255 + a[3] * c), 10)]);
        }else{
         return t;
        }
    }, [])
    console.log("coloursWithAlpha", coloursWithAlpha);
    const coloursChangedToBase16 = coloursWithAlpha.map(function(c){
     return c.toString(16)
    });
    console.log("coloursChangedToBase16", coloursChangedToBase16);
 return "#" + coloursChangedToBase16.join("");
}

Which led to this one-liner:

const rgba2rgb = rgba => "#" + rgba.match(/.{1,2}/g)
    .map((c, i, a) => (i !== a.length - 1) 
        ? parseInt(c, 16) 
        : parseInt(c, 16) / 255)
    .reduce((t, c, i, a) => (i !== a.length - 1) 
        ? t.concat([parseInt(((1 - a[3]) * 255 + a[3] * c), 10)]) 
        : t, [])
    .map(c => c.toString(16))
    .join("");

Wednesday, 8 May 2019

lodash _.sortBy

I needed to order an array of objects in an arbitrary fashion, using strings which make sense to the business but aren't necessarily orderable otherwise. Unfortunately I had to support IE11, so couldn't do fancy JS. Thankfully I had access to lodash. Anyway, I came up with this:

var statuses = ["one", "two", "three", "four"];

var complexObj = {
    dataset: [
        {
            label: "two"
        },
        {
            label: "four"
        },
        {
            label: "three"
        },
        {
            label: "one"
        },
    ]
};

console.table(complexObj.dataset)

complexObj.dataset = _.sortBy(complexObj.dataset, function(n) {
  return _.indexOf(statuses, n.label);
});

console.table(complexObj.dataset)

Which worked a treat, once I'd clocked I need to return the sorted array rather than merely sort it.

Sunday, 5 May 2019

Op Art with p5

My Dad and I both love Op art, and he recently forwarded an email from Tumblr with this link. It piqued my interest as I'm playing with p5 an awful lot at the minute in my spare time as you'll see from previous posts.

So I got to it but clocked that there might be an issue in terms of masking the squares which make up the image. A little judicious playing with Gimp meant that I knew the graphic would be made up of multiple squares. The squares either started with a black or yellow background and they changed after a delay. To get around the issue of masking, I opted to use createGraphics() and then embed that graphic in the main body of the image using the image() function. I ended up making a simple error though, but Stack Overflow came to my rescue, and I'm quite pleased with the result:

The code, which is also up on GitHub and as a single file on JSFiddle:

class Tile {

    constructor(p5, x, y, dimension, row, delay) {
        this.p5 = p5;
        this.x = x;
        this.y = y;
        this.dimension = dimension;
        this.delay = delay;
        this.onFirst = row % 2;
        this.on = p5.color(255, 184, 0);
        this.off = p5.color(26, 17, 16);
        this.diameter = Math.sqrt(Math.pow(dimension, 2) * 2)
        this.pg = p5.createGraphics(dimension, dimension)
        this.pg.noStroke();
    }

    update() {
        if (this.delay === 0) {
            if (this.diameter < 0) {
                this.diameter = Math.sqrt(Math.pow(this.dimension, 2) * 2);
                this.onFirst = !this.onFirst;
                this.delay = 120;
            }
            else {
                this.diameter -= 1;
            }
        } else {
            this.delay -= 1;
        }
        return this.draw();
    }

    draw() {
        this.pg.fill(this.onFirst ? this.off : this.on);
        this.pg.rect(0, 0, this.dimension, this.dimension);
        this.pg.fill(this.onFirst ? this.on : this.off);
        this.pg.circle(this.dimension / 2, this.dimension / 2, this.diameter);
        return this.pg;
    }
}

new p5(p5 => {

    const rows = 14;
    const columns = 14;
    const dimension = 40;
    const framerate = 20;
    const tiles = [];
    const delay = 30;

    p5.setup = () => {
        p5.createCanvas(columns * dimension, rows * dimension);
        for (let row = 0; row < rows; row++) {
            for (let column = 0; column < columns; column++) {
                tiles.push(new Tile(
                    p5,
                    column * dimension,
                    row * dimension,
                    dimension,
                    row,
                    column % 2 ? ((rows - row) * 5) + 80 : row * 5
                ));
            }
        }
    };

    p5.draw = () => {
        p5.background(200);
        tiles.forEach((tile) => {
            p5.image(tile.update(), tile.x, tile.y);
        });
    };
});

Wednesday, 24 April 2019

JS Comma Operator

A mate at work asked me a question about checking things in JS. He had a case where if an object had a property he needed to check for 3 conditions, one of which was if the properties value matched a given value. If it didn't have the property then he needed just needed to check 2 conditions. He wasn't overly keen on wrapping the two conditions within a further if statement and asked if I knew of a way of combining them all into one if statement, I must admit I knew that there was one but I couldn't think of it for the life of me...

As in a particularly nasty case of athletes foot, it itched at me overnight, then I started to remember a rather obscure feature of JS which it seems it borrowed from C, the Comma Operator. In order to check that it would do what he needed to do, I wrote this simple JSFiddle:

let a;

if(true && true && a === 1, a){
  alert("First: a === 1");
}

a = 1;

if(true && true && a === 1, a){
  alert("Second: a === 1");
}

It's rather obscure though, so I'm a little concerned about using it with production code, as discussed on StackOverflow.

Saturday, 6 April 2019

p5-INVADER

You might've seen previous posts on my conversion of Python to p5 from Wireframe magazine, and this has been by far the hardest one I've tried as it involved lots and lots of looping through arrays. Arrays not only of the elements which make up the characters, such as shots and shields but also through the matrix which I use to generate the images of the shots and shields. Using a matrix or multi-dimensional array in this way is an approach I'm thinking of adapting for the Digital Counter as it allows a visual representation of the character within an array and so makes tweaking the characters more accessible.

If you check through the history of the repo, you'll see that I went through many different methods of calculating whether or not a shot simply grazed a shield or whether it had a substantial impact, resulting in an explosion. I did this eventually by allowing the shot to have a hit point value which incremented each time it chewed a pixel from the shield; when that hit point reached a critical level, then the shot exploded and eroded a far greater chunk from the shield.

To save resources each shot is removed from an array when it drops too far beneath the stage, and each shield removed when it is empty. I guess I should also close the processing when there are no more shields, but this does pretty much what I wanted and seems to mimic the original Python implementation closely enough. If not you're welcome to branch and tweak it.

Monday, 1 April 2019

grid-area in VueJS

As you can probably tell from recent posts, I'm making extensive use of CSS grid layouts... I'm also having to support IE11 while doing so, oh joy. The thing is I like the grid-area approach to defining where things should go within the layout, and I write it in the following way:

{
  ...
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
  ...
}

Which is cool, but it took me ages to figure out why it wasn't working... even though it was simple enough to get it working in IE11 too where I replaced it with four declarations:

{
  ...
  grid-row: grid-row-start;
  grid-row-span: (grid-row-end - grid-row-start);
  grid-column: grid-column-start;
  grid-column-span: (grid-column-end - grid-column-start);
  ...
}

I was left though with it still not working as expected until I clocked that Vue was replacing grid-row-end and grid-column-end with auto. I then clocked that the JS syntax is slightly different in that the final two values can also use spans like this:

{
  ...
  grid-area: grid-row-start / grid-column-start / span (grid-row-end - grid-row-start) / span (grid-column-end - grid-column-start);
  ...
}


Setting it as four integers was not working, setting it as integers prefixed with span was working in Vue where the final two integers were getting replaced with auto - so I replaced all instances with width and depth spans and updated my script accordingly, the required output is now:

{
  ...
  grid-area: grid-row-start / grid-column-start / span width / span depth;
  ...
}


Combined with the specificity required for IE11 we then have the following:

{
  ...
  grid-row: grid-row-start;
  grid-row-span: width;
  grid-column: grid-column-start;
  grid-column-span: depth;
  grid-area: grid-row-start / grid-column-start / span width / span depth;
  ...
}

Which, when converted to a method function, results in this:

placeElement: function (x, y, width, depth) {
    return {
        gridRow: x,
        gridRowSpan: width,
        gridColumn: y,
        gridColumnSpan: depth,
        gridArea: [x, y, "span " + width, "span " + depth].join(" / "),
    };
}

Not brilliant to look at but Vue will auto prefix the individual values so that gridRow becomes -ms-grid-row etc. for IE11 and won't bother outputting anything other than the grid-area for Chrome et al.

It also seems cleaner in that we have the four arguments and it looks more natural and logical somehow to define how many rows and columns the element should span.

Along with that, returning an object means we can then add to it in subsequent functions.

Sunday, 24 March 2019

Digital Counter

I'm still working with grid layouts and making sure they work properly in IE11... I'm also concerned with petrol prices at the minute at my local BP Garage... so I got to playing with digital readouts in preparation for making a CSS grid calculator and developed this. I'm using lodash merely because it helps with all the nice array functionality which we don't have in IE11.