JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Feather growth simulation.
<p>
    <button id='advance_btn'>Advance 1 step</button>
    <button id='restart_btn'>Restart</button>
</p>

<button id='hide_message'>hide</button><div id='feather_message'>...</div>


<div id='feather_container'></div>
<div id='feather_canvas'></div>

CSS

#feather_canvas {
    width: 200px;
    height: 400px;
    border: 1px solid grey;
}

JavaScript

const feather = [
    // Each sub-array is a shaft (rachis) section.
    [
        // The two vanes sprouting from it.
        [5,1],
        [5,1]
    ],[
        [5,1,1],
        [5,1,1],
    ],[
        [5,4,5,4],
        [5,4,5,4],
    ],[
        [4,4,5,4,1],
        [4,4,5,4,1],
    ],[
        [3,2,3],
        [3,2,3],
    ]
];

// Hex colours used for values 0-9.
const palette = ["","","","","","","","","",""];

let symmetry = false;

function drawBarb(b, dir){
    document.getElementById("feather_container").innerHTML += "<br>" + b;
}

let parent = document.getElementById("feather_canvas");
let canvas = document.createElement("canvas");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;
let ctx = canvas.getContext("2d");


for(let barbs of feather){
    drawBarb(barbs[0], 1);
    if(symmetry){
        drawBarb(barbs[0], 2);
    }else{
        drawBarb(barbs[1], 2);
    }
}

class FeatherSim {
    
    constructor(feather = false){
        if(feather != false){
            this.load();
        }
    }
    
    load(data){
        this.instruction = data;
    }
    
    export(){
        let data = "aaaa";
        document.getElementById("export_data").value = data;
    }
    
    // Complete process, render finished feather.
    // Only if a set of instructions are loaded.
    instantFeather(){
        if(!this.instruction){
            this.showMessage("Need to load a set of instructions before auto-generating a feather.");
            return;
        }
    }
    
    // Generate random set of instructions.
    randomFeather(){}
    
    // Go to next step of instructions, or
    // take user's inputs from page.
    advance(){}
    
    // Reset feather growth, go back to
    // first step of instructions.
    restart(){}
    
    // Wipe all current instructions. Blank slate.
    clear(){
        this.instructions = false;
    }
    
    showMessage(msg){
        let div = document.getElementById("feather_message");
       ...