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.
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[0], r[1], ...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>
<head>
<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>
<!--<script src="autoreload.js"></script>-->
</head>
<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!