2b:null 2c:["$","title",null,{"children":"Generative snowflake card explorations | Grant Custer | Observable"}] 31:T1287,card_front_nn = { let canvas = document.createElement("canvas"); canvas.width = card_width * dpi; canvas.height = card_height * dpi; canvas.style.width = card_width * mac_ppi * scale_card + "px"; canvas.style.height = card_height * mac_ppi * scale_card + "px"; canvas.style.border = `solid 20px #efefef`; let ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(0, 0, card_width * dpi, card_height * dpi); if (false) { ctx.strokeStyle = "blue"; ctx.moveTo(ds(0.5), 0); ctx.lineTo(ds(0.5), ds(card_height)); ctx.moveTo(ds(0), ds(0.5)); ctx.lineTo(ds(card_width), ds(0.5)); ctx.moveTo(ds(card_width - 0.5), ds(0)); ctx.lineTo(ds(card_width - 0.5), ds(card_height)); ctx.moveTo(ds(0), ds(card_height - 0.5)); ctx.lineTo(ds(card_width), ds(card_height - 0.5)); ctx.stroke(); } let columns = 4; let rows = 5; let iwidth = ds(1); let iheight = ds(1); let width = iwidth * columns; let height = iheight * rows; ctx.fillStyle = "#00a7e1"; ctx.textBaseline = "middle"; let font_size = ds(0.2); let line_height = font_size * 1.4; ctx.font = `${font_size}px "Akzidenz-Grotesk Next"`; let here_x = ds(0.5) + ds(0.125 / 2); let here_y = ds(0.5); ctx.fillStyle = "black"; ctx.fillText("HAPPY NEW YEAR", here_x, here_y + iheight * 5.375); ctx.fillStyle = colors[0]; ctx.fillText( "from Cloudera Machine Learning", here_x, here_y + iheight * 5.625 ); let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push([c, r]); } } for (let f = 0; f < cells.length; f++) { let cell = cells[f]; let cx = cells[f][0] * iwidth + iwidth / 2 + ds(0.5); let cy = cells[f][1] * iheight + iheight / 2 + ds(0.5); ctx.fillStyle = colors[0]; ctx.strokeStyle = colors[0]; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(cx, cy, 34, 0, 2 * Math.PI, false); ctx.fill(); if (cell[1] < rows - 1) { ctx.beginPath(); let next_y = cy + iheight; for (let c = 0; c < columns; c++) { ctx.moveTo(cx, cy); let next_x = c * iwidth + iwidth / 2 + ds(0.5); ctx.lineTo(next_x, next_y); } ctx.stroke(); } } ctx.strokeStyle = "black"; ctx.fillStyle = "black"; ctx.lineWidth = 1; for (let f = 0; f < cells.length; f++) { if ((f !== 14 && f !== 15 && f !== 18 && f !== 19) || true) { let offset_x = cells[f][0] * iwidth + ds(0.5); let offset_y = cells[f][1] * iheight + ds(0.5); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 4; // spike let spikes = []; let spike_num = Math.floor(2 + Math.random() * 10); // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = iwidth / 2 + off_adjacent + x_dist * jitter; let new_y = iheight / 2 + y_dist * jitter; let new_other_y = iheight / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [iwidth / 2 + off_adjacent, iheight / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(iwidth / 2 + offset_x, iheight / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-iwidth / 2, -iheight / 2); ctx.beginPath(); ctx.moveTo(iwidth / 2, iheight / 2); ctx.lineTo(iwidth / 2 + adjacent - adjacent * 0.2, iheight / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } } return canvas; }32:T1ca6,card_front_double = { let canvas = document.createElement("canvas"); canvas.width = card_width * dpi; canvas.height = card_height * dpi; canvas.style.width = card_width * mac_ppi * scale_card + "px"; canvas.style.height = card_height * mac_ppi * scale_card + "px"; canvas.style.border = `solid 20px #efefef`; let ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(0, 0, card_width * dpi, card_height * dpi); if (false) { ctx.strokeStyle = "blue"; ctx.moveTo(ds(0.5), 0); ctx.lineTo(ds(0.5), ds(card_height)); ctx.moveTo(ds(0), ds(0.5)); ctx.lineTo(ds(card_width), ds(0.5)); ctx.moveTo(ds(card_width - 0.5), ds(0)); ctx.lineTo(ds(card_width - 0.5), ds(card_height)); ctx.moveTo(ds(0), ds(card_height - 0.5)); ctx.lineTo(ds(card_width), ds(card_height - 0.5)); ctx.stroke(); } { let columns = 4; let rows = 6; let iwidth = ds(1); let iheight = ds(1); let width = iwidth * columns; let height = iheight * rows; ctx.fillStyle = "#00a7e1"; ctx.textBaseline = "middle"; let font_size = ds(0.375); let line_height = font_size * 1.4; ctx.font = `${font_size}px "Akzidenz-Grotesk Next"`; let here_x = ds(0.5); let here_y = ds(0.5); ctx.fillText("Happy", here_x, here_y + iheight * 1); ctx.fillText("New Year", here_x, here_y + iheight * 2); ctx.fillText("from", here_x, here_y + iheight * 3); ctx.fillText("Cloudera", here_x, here_y + iheight * 4); ctx.fillText("Machine Learning", here_x, here_y + iheight * 5); let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push([c, r]); } } ctx.strokeStyle = "black"; ctx.fillStyle = "black"; ctx.lineWidth = 1; for (let f = 0; f < cells.length; f++) { if ((f !== 14 && f !== 15 && f !== 18 && f !== 19) || true) { let offset_x = cells[f][0] * iwidth + ds(0.5); let offset_y = cells[f][1] * iheight + ds(0.5); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 3; // spike let spikes = []; let spike_num = Math.floor(2 + Math.random() * 10); // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = iwidth / 2 + off_adjacent + x_dist * jitter; let new_y = iheight / 2 + y_dist * jitter; let new_other_y = iheight / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [iwidth / 2 + off_adjacent, iheight / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(iwidth / 2 + offset_x, iheight / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-iwidth / 2, -iheight / 2); ctx.beginPath(); ctx.moveTo(iwidth / 2, iheight / 2); ctx.lineTo(iwidth / 2 + adjacent - adjacent * 0.2, iheight / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } } { let columns = 2; let rows = 3; let iwidth = ds(2); let iheight = ds(2); let width = iwidth * columns; let height = iheight * rows; let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push([c, r]); } } ctx.strokeStyle = "#00a7e1"; for (let f = 0; f < cells.length; f++) { if ((f !== 14 && f !== 15 && f !== 18 && f !== 19) || true) { let offset_x = cells[f][0] * iwidth + ds(0.5); let offset_y = cells[f][1] * iheight + ds(0.5); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 6; // spike let spikes = []; let spike_num = Math.floor(2 + Math.random() * 10); // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = iwidth / 2 + off_adjacent + x_dist * jitter; let new_y = iheight / 2 + y_dist * jitter; let new_other_y = iheight / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [iwidth / 2 + off_adjacent, iheight / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(iwidth / 2 + offset_x, iheight / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-iwidth / 2, -iheight / 2); ctx.beginPath(); ctx.moveTo(iwidth / 2, iheight / 2); ctx.lineTo(iwidth / 2 + adjacent - adjacent * 0.2, iheight / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } } } } return canvas; }33:T1b84,card_front_colors = { let canvas = document.createElement("canvas"); canvas.width = card_width * dpi; canvas.height = card_height * dpi; canvas.style.width = card_width * mac_ppi * scale_card + "px"; canvas.style.height = card_height * mac_ppi * scale_card + "px"; canvas.style.border = `solid 20px #efefef`; let ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(0, 0, card_width * dpi, card_height * dpi); if (false) { ctx.strokeStyle = "blue"; ctx.moveTo(ds(0.5), 0); ctx.lineTo(ds(0.5), ds(card_height)); ctx.moveTo(ds(0), ds(0.5)); ctx.lineTo(ds(card_width), ds(0.5)); ctx.moveTo(ds(card_width - 0.5), ds(0)); ctx.lineTo(ds(card_width - 0.5), ds(card_height)); ctx.moveTo(ds(0), ds(card_height - 0.5)); ctx.lineTo(ds(card_width), ds(card_height - 0.5)); ctx.stroke(); } let columns = 4 * 2; let rows = 6 * 2; let iwidth = ds(0.5); let iheight = ds(0.5); let cstep = iwidth; let rstep = iheight; function getCellIndex(column, row) { return row * columns + column; } function getCellColumnRow(index) { let column = index % columns; let row = Math.floor(index / columns); return [column, row]; } function expandSquare(cells, covered, index) { let start = index; let [scol, srow] = getCellColumnRow(index); let w = 1; let h = 1; function _expand() { if (w === h) { let to_expand = []; let next_column = scol + w; if (next_column === columns) return [w, h]; for (let i = 0; i < h; i++) { let eindex = getCellIndex(next_column, srow + i); let expand_candidate = cells[eindex]; let expand_check = expand_candidate === null && !covered.includes(eindex); if (!expand_check) return [w, h]; } // all expand checks passed w++; return _expand(); } else { let to_expand = []; let next_row = srow + h; if (next_row === rows) return [w - 1, h]; for (let i = 0; i < w; i++) { let eindex = getCellIndex(scol + i, next_row); let expand_candidate = cells[eindex]; to_expand.push(expand_candidate); let expand_check = expand_candidate === null && !covered.includes(eindex); if (!expand_check) return [w - 1, h]; } // all expand checks passed h++; return _expand(); } } return _expand(); } let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push(null); } } let randomly_filled_cells = cells.map(c => Math.random() > 0.9 ? "w" : null ); let expanded = []; let covered = []; for (let i = 0; i < cells.length; i++) { let cell = randomly_filled_cells[i]; if (cell === null && !covered.includes(i)) { let [col, row] = getCellColumnRow(i); let [w, h] = expandSquare(randomly_filled_cells, covered, i); // cap size to 3 if (w > 3) { w = 3; h = 3; } expanded.push([col, row, w, h]); // add to covered; for (let r = 0; r < h; r++) { for (let c = 0; c < w; c++) { let cindex = getCellIndex(col + c, row + r); covered.push(cindex); } } } } // add obstacles into expanded so we get every cell filled (order does not matter in this case) let filled_converted = []; for (let i = 0; i < cells.length; i++) { let cell = randomly_filled_cells[i]; if (cell === "w") { let [c, r] = getCellColumnRow(i); filled_converted.push([c, r, 1, 1]); } } let combined = [...expanded, ...filled_converted]; for (let i = 0; i < combined.length; i++) { let offset_x = combined[i][0] * iwidth + ds(0.5); let offset_y = combined[i][1] * iheight + ds(0.5); let size = combined[i][2] * iwidth; ctx.fillStyle = colors[combined[i][2] - 1]; ctx.fillRect(offset_x, offset_y, size, size); } ctx.fillStyle = "#fff"; ctx.textBaseline = "middle"; let font_size = ds(0.375); let line_height = font_size * 1.4; ctx.font = `${font_size}px "Akzidenz-Grotesk Next"`; let here_x = ds(0.5) + ds(0.25); let here_y = 1 * iheight + ds(0.5); ctx.fillText("Happy", here_x, here_y + iheight * 1); ctx.fillText("New Year", here_x, here_y + iheight * 3); ctx.fillText("from", here_x, here_y + iheight * 5); ctx.fillText("Cloudera", here_x, here_y + iheight * 7); ctx.fillText("Machine Learning", here_x, here_y + iheight * 9); for (let f = 0; f < combined.length; f++) { if ((f !== 14 && f !== 15 && f !== 18 && f !== 19) || true) { let offset_x = combined[f][0] * iwidth + ds(0.5); let offset_y = combined[f][1] * iheight + ds(0.5); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; side_size = combined[f][2] * iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 3; // spike let spikes = []; let spike_num = combined[f][2] * 4; // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = side_size / 2 + off_adjacent + x_dist * jitter; let new_y = side_size / 2 + y_dist * jitter; let new_other_y = side_size / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [side_size / 2 + off_adjacent, side_size / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(side_size / 2 + offset_x, side_size / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-side_size / 2, -side_size / 2); ctx.beginPath(); ctx.moveTo(side_size / 2, side_size / 2); ctx.lineTo(side_size / 2 + adjacent - adjacent * 0.2, side_size / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } } return canvas; }34:T1a0f,card_front_scaler = { let canvas = document.createElement("canvas"); canvas.width = card_width * dpi; canvas.height = card_height * dpi; canvas.style.width = card_width * mac_ppi * scale_card + "px"; canvas.style.height = card_height * mac_ppi * scale_card + "px"; canvas.style.border = `solid 20px #efefef`; let ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(0, 0, card_width * dpi, card_height * dpi); if (false) { ctx.strokeStyle = "blue"; ctx.moveTo(ds(0.5), 0); ctx.lineTo(ds(0.5), ds(card_height)); ctx.moveTo(ds(0), ds(0.5)); ctx.lineTo(ds(card_width), ds(0.5)); ctx.moveTo(ds(card_width - 0.5), ds(0)); ctx.lineTo(ds(card_width - 0.5), ds(card_height)); ctx.moveTo(ds(0), ds(card_height - 0.5)); ctx.lineTo(ds(card_width), ds(card_height - 0.5)); ctx.stroke(); } let columns = 4 * 2; let rows = 6 * 2; let iwidth = ds(0.5); let iheight = ds(0.5); ctx.fillStyle = "#00a7e1"; ctx.textBaseline = "middle"; let font_size = ds(0.375); let line_height = font_size * 1.4; ctx.font = `${font_size}px "Akzidenz-Grotesk Next"`; let here_x = ds(0.5) + ds(0.125) / 2; let here_y = 1 * iheight + ds(0.5); ctx.fillText("Happy", here_x, here_y + iheight * 1); ctx.fillText("New Year", here_x, here_y + iheight * 3); ctx.fillText("from", here_x, here_y + iheight * 5); ctx.fillText("Cloudera", here_x, here_y + iheight * 7); ctx.fillText("Machine Learning", here_x, here_y + iheight * 9); let cstep = iwidth; let rstep = iheight; function getCellIndex(column, row) { return row * columns + column; } function getCellColumnRow(index) { let column = index % columns; let row = Math.floor(index / columns); return [column, row]; } function expandSquare(cells, covered, index) { let start = index; let [scol, srow] = getCellColumnRow(index); let w = 1; let h = 1; function _expand() { if (w === h) { let to_expand = []; let next_column = scol + w; if (next_column === columns) return [w, h]; for (let i = 0; i < h; i++) { let eindex = getCellIndex(next_column, srow + i); let expand_candidate = cells[eindex]; let expand_check = expand_candidate === null && !covered.includes(eindex); if (!expand_check) return [w, h]; } // all expand checks passed w++; return _expand(); } else { let to_expand = []; let next_row = srow + h; if (next_row === rows) return [w - 1, h]; for (let i = 0; i < w; i++) { let eindex = getCellIndex(scol + i, next_row); let expand_candidate = cells[eindex]; to_expand.push(expand_candidate); let expand_check = expand_candidate === null && !covered.includes(eindex); if (!expand_check) return [w - 1, h]; } // all expand checks passed h++; return _expand(); } } return _expand(); } let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push(null); } } let randomly_filled_cells = cells.map(c => Math.random() > 0.9 ? "w" : null ); let expanded = []; let covered = []; for (let i = 0; i < cells.length; i++) { let cell = randomly_filled_cells[i]; if (cell === null && !covered.includes(i)) { let [col, row] = getCellColumnRow(i); let [w, h] = expandSquare(randomly_filled_cells, covered, i); expanded.push([col, row, w, h]); // add to covered; for (let r = 0; r < h; r++) { for (let c = 0; c < w; c++) { let cindex = getCellIndex(col + c, row + r); covered.push(cindex); } } } } // add obstacles into expanded so we get every cell filled (order does not matter in this case) let filled_converted = []; for (let i = 0; i < cells.length; i++) { let cell = randomly_filled_cells[i]; if (cell === "w") { let [c, r] = getCellColumnRow(i); filled_converted.push([c, r, 1, 1]); } } let combined = [...expanded, ...filled_converted]; for (let f = 0; f < combined.length; f++) { if ((f !== 14 && f !== 15 && f !== 18 && f !== 19) || true) { let offset_x = combined[f][0] * iwidth + ds(0.5); let offset_y = combined[f][1] * iheight + ds(0.5); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; side_size = combined[f][2] * iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 3; // spike let spikes = []; let spike_num = combined[f][2] * 4; // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = side_size / 2 + off_adjacent + x_dist * jitter; let new_y = side_size / 2 + y_dist * jitter; let new_other_y = side_size / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [side_size / 2 + off_adjacent, side_size / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(side_size / 2 + offset_x, side_size / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-side_size / 2, -side_size / 2); ctx.beginPath(); ctx.moveTo(side_size / 2, side_size / 2); ctx.lineTo(side_size / 2 + adjacent - adjacent * 0.2, side_size / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } } return canvas; }35:T1035,card_front = { let canvas = document.createElement("canvas"); canvas.width = card_width * dpi; canvas.height = card_height * dpi; canvas.style.width = card_width * mac_ppi * scale_card + "px"; canvas.style.height = card_height * mac_ppi * scale_card + "px"; canvas.style.border = `solid 20px #efefef`; let ctx = canvas.getContext("2d"); ctx.fillStyle = "white"; ctx.fillRect(0, 0, card_width * dpi, card_height * dpi); if (false) { ctx.strokeStyle = "blue"; ctx.moveTo(ds(0.5), 0); ctx.lineTo(ds(0.5), ds(card_height)); ctx.moveTo(ds(0), ds(0.5)); ctx.lineTo(ds(card_width), ds(0.5)); ctx.moveTo(ds(card_width - 0.5), ds(0)); ctx.lineTo(ds(card_width - 0.5), ds(card_height)); ctx.moveTo(ds(0), ds(card_height - 0.5)); ctx.lineTo(ds(card_width), ds(card_height - 0.5)); ctx.stroke(); } let columns = 4; let rows = 6; let iwidth = ds(1); let iheight = ds(1); let width = iwidth * columns; let height = iheight * rows; ctx.fillStyle = "#00a7e1"; ctx.textBaseline = "middle"; let font_size = ds(0.375); let line_height = font_size * 1.4; ctx.font = `${font_size}px "Akzidenz-Grotesk Next"`; let here_x = ds(0.5); let here_y = ds(0.5); ctx.fillText("Happy", here_x, here_y + iheight * 1); ctx.fillText("New Year", here_x, here_y + iheight * 2); ctx.fillText("from", here_x, here_y + iheight * 3); ctx.fillText("Cloudera", here_x, here_y + iheight * 4); ctx.fillText("Machine Learning", here_x, here_y + iheight * 5); let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push([c, r]); } } ctx.strokeStyle = "black"; ctx.fillStyle = "black"; ctx.lineWidth = 1; for (let f = 0; f < cells.length; f++) { if ((f !== 14 && f !== 15 && f !== 18 && f !== 19) || true) { let offset_x = cells[f][0] * iwidth + ds(0.5); let offset_y = cells[f][1] * iheight + ds(0.5); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 3; // spike let spikes = []; let spike_num = Math.floor(2 + Math.random() * 10); // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = iwidth / 2 + off_adjacent + x_dist * jitter; let new_y = iheight / 2 + y_dist * jitter; let new_other_y = iheight / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [iwidth / 2 + off_adjacent, iheight / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(iwidth / 2 + offset_x, iheight / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-iwidth / 2, -iheight / 2); ctx.beginPath(); ctx.moveTo(iwidth / 2, iheight / 2); ctx.lineTo(iwidth / 2 + adjacent - adjacent * 0.2, iheight / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } } return canvas; }36:Te51,debug = { let columns = 5; let rows = 7; let iwidth = 150; let iheight = 150; let width = iwidth * columns; let height = iheight * rows; let canvas = document.createElement("canvas"); let dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = width + "px"; canvas.style.height = height + "px"; let ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push([c, r]); } } for (let f = 0; f < cells.length; f++) { let cell = cells[f]; let cx = cells[f][0] * iwidth + iwidth / 2; let cy = cells[f][1] * iheight + iheight / 2; ctx.fillStyle = "lightblue"; ctx.strokeStyle = "lightblue"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(cx, cy, 14, 0, 2 * Math.PI, false); ctx.fill(); if (cell[1] < rows - 1) { ctx.beginPath(); let next_y = cy + iheight; for (let c = 0; c < columns; c++) { ctx.moveTo(cx, cy); let next_x = c * iwidth + iwidth / 2; ctx.lineTo(next_x, next_y); } ctx.stroke(); } } ctx.strokeStyle = "black"; ctx.fillStyle = "black"; ctx.lineWidth = 1; for (let f = 0; f < cells.length; f++) { let offset_x = cells[f][0] * iwidth; let offset_y = cells[f][1] * iheight; // ctx.translate(iwidth / 2 + offset_x, iheight / 2 + offset_y); // ctx.rotate(toRadians(90)); // ctx.translate(-iwidth / 2 + offset_x, -iheight / 2 + offset_y); let sides = 6; let slice_offset = toRadians(180 / sides); let side_size = (0.5 + Math.random() * 0.5) * iwidth; side_size = iwidth; let opposite = (Math.sin(slice_offset) * side_size) / 2; let adjacent = (Math.cos(slice_offset) * side_size) / 2; ctx.lineWidth = 2; // spike let spikes = []; let spike_num = Math.floor(2 + Math.random() * 10); // spike_num = Math.ceil(Math.random() * cells.length); let spike_step = side_size / 2 / spike_num; for (let i = 1; i < spike_num + 1; i++) { let distance = i * spike_step; let offdist = distance - distance * 0.2; // let offdist = distance - distance * 0; let spike_opposite = Math.sin(slice_offset) * distance; let spike_adjacent = Math.cos(slice_offset) * distance; let off_opposite = Math.sin(slice_offset) * offdist; let off_adjacent = Math.cos(slice_offset) * offdist; // point.x = start.x + (final.x - start.x) * progress; // point.y = start.y + (final.y - start.y) * progress; let jitter = Math.random(); let x_dist = spike_adjacent - off_adjacent; let y_dist = spike_opposite; let new_x = iwidth / 2 + off_adjacent + x_dist * jitter; let new_y = iheight / 2 + y_dist * jitter; let new_other_y = iheight / 2 - y_dist * jitter; spikes.push([ [new_x, new_y], [iwidth / 2 + off_adjacent, iheight / 2], [new_x, new_other_y] ]); } for (let i = 0; i < sides; i++) { ctx.save(); ctx.translate(iwidth / 2 + offset_x, iheight / 2 + offset_y); ctx.rotate((i / sides) * toRadians(360) + toRadians(90)); ctx.translate(-iwidth / 2, -iheight / 2); ctx.beginPath(); ctx.moveTo(iwidth / 2, iheight / 2); ctx.lineTo(iwidth / 2 + adjacent - adjacent * 0.2, iheight / 2); for (let s = 0; s < spikes.length; s++) { let spike = spikes[s]; ctx.moveTo(...spike[0]); ctx.lineTo(...spike[1]); ctx.lineTo(...spike[2]); } ctx.stroke(); ctx.restore(); } } return canvas; }37:[] 2f:{"id":"d11ed16bb0a678b3","slug":"generative-snowflake-card-explorations","title":"Generative snowflake card explorations","thumbnail":"940d5a3674c975678f13c2139e6c6ce45a2d4a868ae20df45f2be4a39abc7cbf","access_level":"public","create_time":"$D2018-12-13T16:16:31.171Z","update_time":"$D2018-12-26T19:00:01.730Z","view_time":null,"first_public_time":"$D2018-12-26T18:59:12.316Z","fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":670,"publish_version":670,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"84831eedf07425ed","slug":"diagrams","title":"Designs and diagrams","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"type":"notebook","body":{"title":"Generative snowflake card explorations","cells":[{"id":0,"value":"md`# Generative snowflake card explorations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md`I decided to do something generative for our new year's card. For each snowflake, one branch is drawn. The number and length of the sub-branches are determined randomly. The canvas is rotated and the branch is repeated until all six branches are complete. This was a good exercise in getting more comfotable with rotating and then resetting the canvas element context. The blue dots and connections suggest a neural network. The final version is [here](https://beta.observablehq.com/@grantcuster/generative-snowflake-card-final).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`Snowflake psuedo-neural network final:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`Final scaled to a sheet of paper for preview printing:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"card_front_test = {\n let canvas = document.createElement(\"canvas\");\n canvas.width = 8.5 * dpi;\n canvas.height = 11 * dpi;\n canvas.style.width = card_width * mac_ppi * scale_card + \"px\";\n canvas.style.height = card_height * mac_ppi * scale_card + \"px\";\n let ctx = canvas.getContext(\"2d\");\n ctx.lineWidth = 2;\n ctx.strokeRect(((8.5 - 5) / 2) * dpi, ((11 - 7) / 2) * dpi, ds(5), ds(7));\n ctx.drawImage(card_front_nn, ((8.5 - 5) / 2) * dpi, ((11 - 7) / 2) * dpi);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"md`Snowflakes doubled:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`Snowflakes scaled with background colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"colors = [`rgb(41,167,222)`, `rgb(41,214,94)`, `rgb(255,143,0)`]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"md`Snowflakes scaled. I thought this would be the one:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"md`Bare snowflakes:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"function ds(inch) {\n return inch * dpi;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"scale_card = 0.75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md`Snowflake network sketch:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function toDegrees(angle) {\n return angle * (180 / Math.PI);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function toRadians(angle) {\n return angle * (Math.PI / 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"dpi = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"mac_ppi = 113.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"function scaleInch(inch) {\n return inch * mac_ppi;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"card_width = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"card_height = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"aspect = 5 / 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"