Jungle Coder
written by night, read by day
Just added post themes! Witness The Colors, and Exult!

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[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!

Comments

Previously: My Janet Story
Next: EVA_voice: "Jungle Coder 2.0 Online"