Public
Edited
Jun 21, 2023
1 fork
2 stars
viewof mapColors = listInput({
input: (v, i) => Inputs.color({ label: "Color " + (i + 1), value: v }),
value: ["#a23924", "#ac774f", "#efca95", "#bdbe89", "#6e9379"]
})
displayColors(
25,
25,
mapColors, // an array of colors
"rgb", // return format
true, // show table distance
false, // colorize distance numbers
"rgb" // render format far left
)
checkContrast("black", ["#a23924", "#ac774f", "#efca95", "#bdbe89", "#6e9379"])
viewof mapColors2 = listInput({
input: (v, i) => Inputs.color({ label: "Color " + (i + 1), value: v }),
value: ["#ee7a63", "#d29465", "#efca95", "#bdbe89", "#81a28b"]
})
checkContrast("black", mapColors2)
displayColors(
25,
25,
mapColors2, // an array of colors
"lab", // return format
true, // show table distance
false, // colorize distance numbers
"rgb" // render format far left
)
<img id="myImg1b" src="${await FileAttachment("color2@2.png").url()}" style="height: 600px"/>
<img id="myImg3" src="${await FileAttachment("hs.png").url()}" style="height: 600px"/>
<img id="myImg2" src="${await FileAttachment("texture.png").url()}" style="height: 600px"/>
<img id="myImgCombo" src="${await FileAttachment("untitled (13).png").url()}" style="height: 600px"/>
combine()
function combine() {
let canvas = document.createElement("canvas");
canvas.id = "mycanvas";
let myImg1 = document.getElementById("myImg1b");
let myImg2 = document.getElementById("myImg2");
let myImg3 = document.getElementById("myImg3");
let myCanvas = canvas;
var w = myImg1.width;
var h = myImg1.height;
myCanvas.width = w;
myCanvas.height = h;
var ctx = myCanvas.getContext("2d");
ctx.clearRect(0, 0, w, h);
// composite now
ctx.globalCompositeOperation = blend[layerBlend[2]];
ctx.globalAlpha = layerOpacity[2] / 100;
ctx.drawImage(myImg3, 0, 0, w, h);
ctx.globalCompositeOperation = blend[layerBlend[1]];
ctx.globalAlpha = layerOpacity[1] / 100;
ctx.drawImage(myImg2, 0, 0, w, h);
ctx.globalCompositeOperation = blend[layerBlend[0]];
ctx.globalAlpha = layerOpacity[0] / 100;
ctx.drawImage(myImg1, 0, 0, w, h);
return myCanvas;
}
//html`${button.node()}`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
