Digital Humanist. Manhattan-based.
Published
Edited
Mar 23, 2021
2 stars
function copy(image, x, y) {
const size = 512
const context = DOM.context2d(size, size)
var imgwidth = image.offsetWidth;
var imgheight = image.offsetHeight;
context.drawImage(image, 0, 0, size, size);
return context
}
to_bw = function(image, size, normalize, color) {
// color--optionally saturate with a color
const c = copy(image, size, size)
const image_data = c.getImageData(0, 0, size, size).data
const new_image_data = new Uint8ClampedArray(size * size * 4)
const alpha = new Float32Array(size * size)
let img_offset = 0
for (let i = 0; i < size; i += 1) {
for (let j = 0; j < size; j += 1) {
alpha[j + i * size] = d3.sum(image_data.slice(img_offset, img_offset + 4))/3
img_offset += 4
}
}
let shift = 0;
if (normalize) {
const mean_darkness = d3.mean(alpha)
shift = mean_darkness - normalize
}
for (let i = 0; i < size; i += 1) {
for (let j = 0; j < size; j += 1) {
new_image_data[4 * (i + j * size) + 3] = alpha[i + j * size] - shift
if (color) {
try {
new_image_data.set(color, 4 * (i + j * size))
} catch {
console.warn("HMMM")
}
}
img_offset += 4
}
}
const b_and_w = DOM.context2d(size, size)
const new_imageData = new ImageData(new_image_data, size, size);
b_and_w.putImageData(new_imageData, 0, 0);
return b_and_w.canvas
}
image_list = image_list_select.slice(0, 16)
egyptian_linen = FileAttachment("image@23.png").image() // FileAttachment("image.png").image()
md`# Metal
`
FileAttachment("image@12.png").image()
thai_spiral = FileAttachment("image@25.png").image()
assyrian_tablet = FileAttachment("image@20.png").image()
assyrian_water = FileAttachment("image@21.png").image()
md`# Paper
https://www.metmuseum.org/art/collection/search/660073?searchField=All&showOnly=openAccess&ft=*&offset=0&rpp=20&pos=8
`
italian_paper = FileAttachment("image@24.png").image()
md`# Silk
[Length of painted silk
mid-18th century
Chinese, possibly Canton](https://www.metmuseum.org/art/collection/search/239345?searchField=All&sortBy=Relevance&ao=on&od=on&showOnly=openAccess&ft=fabric&offset=40&rpp=20&pos=58)
`
//FileAttachment("image@7.png").image()
//FileAttachment("image@9.png").image()
FileAttachment("image@10.png").image()
damascus_tile = FileAttachment("image@22.png").image()
md`# Brushstrokes
## Pointillist
[Study for "A Sunday on La Grande Jatte"
1884
Georges Seurat French](https://www.metmuseum.org/art/collection/search/437658?searchField=All&sortBy=Relevance&ao=on&od=on&showOnly=openAccess&ft=brushstrokes&offset=0&rpp=20&pos=6)
`
seurat_strokes = FileAttachment("image@4.png").image()
md`Ingres`
ingres_strokes = FileAttachment("image@8.png").image()
van_gogh_strokes_1 = FileAttachment("image@5.png").image()
van_gogh_strokes_2 = FileAttachment("image@6.png").image()
mamluk_doors = FileAttachment("image@18.png").image()
indian_sandstone = FileAttachment("image@17.png").image()
spanish_desk = FileAttachment("image@28.png").image()
damascus_fountain = FileAttachment("image@27.png").image()
egyptian_window = FileAttachment("image@26.png").image()
anatolian_stone = FileAttachment("image@1.png").image()
nippurian_clay = FileAttachment("image@16.png").image()
minoan_terracotta = FileAttachment("image@14.png").image()
md`[Dedham Pottery vase, c. 1900](https://www.metmuseum.org/art/collection/search/20038?searchField=All&sortBy=Relevance&what=Stoneware&ao=on&od=on&showOnly=openAccess&ft=textured&offset=0&rpp=20&pos=14)`
dedham_vase = FileAttachment("image@11.png").image()
md`Terracotta jar with barbotine decoration
2nd century A.D.
Roman
`
roman_terracotta = FileAttachment("image@2.png").image()
samarran_tile = FileAttachment("image@3.png").image()
canvas = {
const size = 512
const context = DOM.context2d(size * 4, size * 4)
function copy(image, x, y) {
context.drawImage(image, x, y, size, size);
}
let i = 0
let j = 0
let image_num = 0
for (let image of image_list) {
let color = undefined
if (prefill_with_scheme) {
const color_string = prefill_with_scheme[image_num++ % prefill_with_scheme.length]
const {r, g, b} = d3.rgb(color_string)
color = [r, g, b]
}
let normalize_towards = 0
if (normalize.split("towards ").length > 1) {
normalize_towards = +normalize.split("towards ")[1]
}
const clone = bw == "Black and White" ? to_bw(image, size, normalize_towards, color) : image
copy(clone, i, j)
i += size
if (i + size > context.canvas.width) {
i = 0
j += size
}
if (j > context.canvas.width) {
throw "Trying to draw too many images than the canvas can hold"
}
}
return context.canvas
}
bw
images = d3.selectAll("img")
import { Checkbox, Radio, Range } from '@observablehq/inputs'
d3 = require("d3@v6")
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.
