Jungle Coder

The musings of a third culture coder and missionary kid

## As the Advent is Drawn, 2021

My wife and I wanted to do a low pressure advent challenge, since creating this Snow Globe was so fun. She pulled together the challenge below. For anyone interested in following along, I’m planning on posting on `#astheadventisdrawn` on Twitter and Instagram. ## Week 1

### Day 0, 11⁄30, preparation

The first prompt: Gingerbread Men/Houses. I used Janet to roll for the mix-in prompt, and got C, aka Candy Canes

``````repl:7:> ([:A :B :C :D :E :F] (math/floor (* 6 (math/random))))
:C
repl:8:>
``````

Because I’m building this with p5.js, I went ahead and copied code from my previous p5 sketch. The main thing of note is the `pointInTri` and `tri` functions I had from before.

``````function setup() {
createCanvas(windowWidth, windowHeight);
}

// Based on https://stackoverflow.com/a/61804756/823592
function pointInTri(r1, r2, topx, topy, width, height) {
let [tx, ty, h, w] = [topx, topy, height, width];
let [Ax, Ay] = [tx, ty];
let [Bx, By] = [tx + w / 2, ty + h];
let [Cx, Cy] = [tx - w / 2, ty + h];
let sqrtR1 = sqrt(r1);
let x = (1 - sqrtR1) * Ax + (sqrtR1 * (1 - r2)) * Bx + (sqrtR1 * r2) * Cx;
let y = (1 - sqrtR1) * Ay + (sqrtR1 * (1 - r2)) * By + (sqrtR1 * r2) * Cy;
return [x, y];
}

function tri(topx, topy, width, height) {
push()
let [tx, ty, h, w] = [topx, topy, height, width];
triangle(
tx - w / 2, ty + h,
tx, ty,
tx + w / 2, ty + h
)
pop()
return [ty + h , ty] ;
}

function randPtsInTri(orns, params) {
let pts = [];
for (let r of orns) {
let pt = pointInTri(r, r, ...params);
pts.push(pt);
}
return pts;
}

function draw() {
background(6, 6, 6);
let w = Math.min(width, height);
let ww = width;
let wh = height;
stroke('black');
fill(200, 200, 200, 50); //234
}

function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
``````

This index.html document isn’t set to change during the challenge, but is shown here for anyone who might be curious.

``````<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8"/>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>

<body style="background: black;">
<main>
</main>
</body>

</html>
``````

That’s it for tonight, I’ll be back tomorrow with a first attempt at coding some gingerbread kin!

Previously: My Janet Story