31:T11f9,card_front_nn = { regen; 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); let margin_x = ds(0.375); let columns = 4; let rows = 5; let iwidth = (ds(card_width) - margin_x * 2) / columns; let iheight = iwidth; let leftover = ds(card_height) - (margin_x * 2 + iheight * rows); let margin_y = leftover / 2; let width = iwidth * columns; let height = iheight * rows; ctx.fillStyle = "#00a7e1"; ctx.textBaseline = "middle"; let font_size = ds(0.1725); let line_height = font_size * 1.4; ctx.font = `${font_size}px "Akzidenz-Grotesk Next"`; let here_x = margin_x + ds(0.125 / 2); let here_y = margin_y; ctx.fillStyle = "black"; ctx.fillText("HAPPY NEW YEAR", here_x, here_y + iheight * 5.25); ctx.fillStyle = colors[0]; ctx.fillText( "from the Machine Learning Team", here_x + iwidth / 2, here_y + iheight * 5.55 ); ctx.fillText("at Cloudera", here_x + iwidth / 2, here_y + iheight * 5.8); 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 + margin_x; let cy = cells[f][1] * iheight + iheight / 2 + margin_y; 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 + margin_x; 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 + margin_x; let offset_y = cells[f][1] * iheight + margin_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 = 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:[] 2f:{"title":"Generative snowflake card final","cells":[{"id":0,"value":"md`# Generative snowflake card final`","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"md`Final design, sized and scaled for printing on moo.com. Explorations [here](https://beta.observablehq.com/@grantcuster/generative-snowflake-card-explorations).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"viewof regen = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"colors = [`rgb(41,167,222)`, `rgb(41,214,94)`, `rgb(255,143,0)`]","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"function ds(inch) {\n return inch * dpi;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"scale_card = 0.75","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"function toDegrees(angle) {\n return angle * (180 / Math.PI);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"function toRadians(angle) {\n return angle * (Math.PI / 180);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"dpi = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"mac_ppi = 113.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"function scaleInch(inch) {\n return inch * mac_ppi;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"card_width = 4.13","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"card_height = 5.83","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"aspect = 5 / 7","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}