Still at it. It occurred to me that the hearts on the left take 19 blocks to form.
Coincidentally, 19 is the total number of unique rotations of all the Tetris pieces, summed accordingly:
T – 4
S + Z – 2 each
J + L – 4 each
I – 2
O – 1
I wonder if there’s a solution that uses each rotation once AND avoids piece adjacency?
These were tough to re-revise. Might take another crack at it tomorrow. The one on the right is starting to get closer to a good balance of colours/piece rotations…
Planned to have a lot more of this done tonight but solving the placement of the tetrominoes proved to take much longer than I thought it would (the outline I initially drew up didn’t have the correct area so fixing things took a reasonable amount of time.)
Next time I’d probably mock this up digitally before launching into drawing it!
Tonight I worked on some custom CSS that could be injected into a BrowserSource in OBS to turn a bracket that looks something like this:
Into something that looks like this:
The CSS is included below for future reference.
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
body {
background: black;
}
svg text {
font-family: "Press Start 2P", monospace;
}
/*** Remove rounded edges ***/
svg g.match rect.match--base-background {
rx: 0;
ry: 0;
}
svg g.match g {
clip-path: none;
}
/**** Seeds ****/
svg path.match--seed-background {
fill: #c1261d;
outline: 2px solid black;
outline-offset: 0px;
}
svg text.match--seed {
transform: translateY(4px);
fill: black;
}
/**** Player Names ****/
svg text.match--player-name {
font-size: 15px;
transform: translateY(5px);
fill: white;
stroke: transparent;
}
svg text.match--player-name.-placeholder {
stroke: transparent;
/* fill: transparent; */
font-size: 10px;
transform: translateY(2px);
}
svg path.match--player-background {
outline: 2px solid black;
outline-offset: 0px;
}
/**** Match dividing line ****/
svg line.match--player-divider {
stroke: black;
stroke-width: 3px;
}
/**** Player Scores ****/
svg text.match--player-score {
font-size: 15px;
transform: translateX(1px) translateY(5px);
fill: black;
stroke: transparent;
}
svg g.match svg.match--player path.match--player-score-background {
outline: 2px solid black;
outline-offset: 0px;
/* outline: 2px double #c1261d;
outline-offset: -7px; */
fill: white;
}
svg g.match svg.match--player path.match--player-score-background.-winner {
/* Winner gets highlighted background */
fill: #f39c05;
}
/*** Round Names ***/
svg .round-label text {
transform: translateY(2px);
}
svg.round g.round-label rect {
fill: black;
outline: 2px solid #aaecf2;
outline-offset: -4px;
}
span.live-stamp {
display: none;
}
They’re a little heavy – the beads are glass – but I’m pleased with the outcome.
Yay for phone cameras.
Unfortunately the people I bought the beads from didn’t have two shades of blue in the right bead sizes. I made do with clear for the light blue – and put pieces of blue paper between the glass so that from certain angles it refracts the colour. You can see hints of it in the above photo but it’s definitely most effective viewed longways.
I am thinking of making a necklace to match. My housemate suggested putting the blocks on tiers so they look like they’re falling. To go with that I had an idea of making a matching t-shirt design, so it would look like the blocks were falling into the t-shirt… hmmm, ideas!