JSFiddle - React, Tailwind, and code Playground

by bcronin

HTML

<script src="http://surfacecurve.org:8708/platform/pusher/script/pusher.color.min.js"></script>
<canvas width="320" height="24"></canvas>

JavaScript

//
// Function to make -30 to 30 degree temperature to 
// a color
//
var F = function(t)
{
    // Map the temperature to a 0-1 range
    var a = (t + 30)/60;
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a);
    
    // Scrunch the green/cyan range in the middle
    var sign = (a < .5) ? -1 : 1;
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5;
    
    // Linear interpolation between the cold and hot
    var h0 = 259;
    var h1 = 12;
    var h = (h0) * (1 - a) + (h1) * (a);
    
    return pusher.color("hsv", h, 75, 90).hex6();
};

//
// Generic code to display a color bar
//
var canvas = $("canvas").get(0);
var w = canvas.width;
var h = canvas.height;
var ctx = canvas.getContext('2d');

for (var x = 0; x < w; ++x)
{
    var temp = -30 + (60 * x/(w-1));
    ctx.fillStyle = F(temp);
    ctx.fillRect(x, 0, 1, h);
}