41:null 42:["$","title",null,{"children":"Patterns | Moritz | Observable"}] 48:[] 46:{"id":"ab0c9c5978354cdf","slug":"patterns","title":"Patterns","thumbnail":"e96e14ee8890cd450c68260e7a0bb6dfa81325b1aad6686237dd985f79c51c10","access_level":"public","create_time":"$D2018-11-08T15:07:49.901Z","update_time":"$D2018-11-09T11:30:09.207Z","view_time":null,"first_public_time":"$D2018-11-08T15:47:49.323Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"df5ed4c939fa7f66","login":"moklick","name":"Moritz","avatar_url":"https://avatars-next.observableusercontent.com/ac0c2852023fb93b8bcd0ad0b6557eb7af6c7b144fd28322e8d22b0e5194a8bd","tier":"starter_2024","bio":"I help journalists and newsrooms to create better things on the web @wbkd","following":false},"version":230,"publish_version":230,"role":null,"authored":false,"authors":[{"type":"individual","id":"282999f71f24dffa","login":"moklick","name":"Moritz","avatar_url":"https://avatars-next.observableusercontent.com/ac0c2852023fb93b8bcd0ad0b6557eb7af6c7b144fd28322e8d22b0e5194a8bd","tier":null,"bio":"I help journalists and newsrooms to create better things on the web @wbkd","following":false}],"members":[{"type":"individual","id":"282999f71f24dffa","login":"moklick","name":"Moritz","avatar_url":"https://avatars-next.observableusercontent.com/ac0c2852023fb93b8bcd0ad0b6557eb7af6c7b144fd28322e8d22b0e5194a8bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Patterns","cells":[{"id":0,"value":"md`# Patterns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof rectColorHex = color({\n value: \"#52398d\",\n title: \"color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"render = {\n let ctx = DOM.context2d(1000,400)\n patternA(ctx);\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof sizeA = slider({\n min: 1, \n max: 10, \n step: 1, \n value: 2, \n title: 'size', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function patternA(ctx){\n const gridSize = 10;\n const rectSize = sizeA;\n const cols = ctx.canvas.width / gridSize;\n const rows = ctx.canvas.height / gridSize;\n \n for (let row = 0; row < rows; row++) {\n ctx.fillStyle = `rgba(${rectColor[0]},${rectColor[1]},${rectColor[2]}, ${1- (row / rows)})`;\n for (let col = 0; col < cols; col++) {\n const offset = (gridSize - rectSize) / 2;\n const x = (col * gridSize) + offset;\n const y = (row * gridSize) + offset;\n ctx.fillRect(x,y,rectSize,rectSize);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"renderB = {\n let ctx = DOM.context2d(1000,400)\n patternB(ctx);\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"viewof sizeB = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 2, \n title: 'size', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function patternB(ctx) {\n const gridSize = 10;\n const rectSize = sizeB;\n const cols = ctx.canvas.width / gridSize;\n const rows = ctx.canvas.height / gridSize;\n \n ctx.lineWidth = 0.85;\n \n for (let row = 0; row < rows; row++) {\n const color = `rgba(${rectColor[0]},${rectColor[1]},${rectColor[2]},${1 - (row / rows)})`;\n ctx.fillStyle = color;\n ctx.strokeStyle = color;\n \n for (let col = 0; col < cols; col++) {\n const offset = (gridSize - rectSize) / 2;\n const x = (col * gridSize) + offset;\n const y = (row * gridSize) + offset;\n ctx.fillRect(x,y,rectSize,rectSize);\n \n if (Math.random() > .89) {\n ctx.beginPath();\n ctx.moveTo(x, row * gridSize + (gridSize / 2));\n ctx.lineTo(x + gridSize, row * gridSize + (gridSize / 2));\n ctx.stroke();\n }\n\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"renderCross = {\n let ctx = DOM.context2d(1000,400)\n patternCross(ctx);\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"viewof sizeCross = slider({\n min: 1, \n max: sizeCrossGrid, \n step: 1, \n value: 6, \n title: 'size', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"viewof sizeCrossGrid = slider({\n min: 10, \n max: 50, \n step: 1, \n value: 35, \n title: 'size', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"function patternCross(ctx) {\n const cols = ctx.canvas.width / sizeCrossGrid;\n const rows = ctx.canvas.height / sizeCrossGrid;\n \n ctx.lineWidth = 1;\n \n for (let row = 0; row < rows; row++) {\n for (let col = 0; col < cols; col++) {\n const offset = ((sizeCrossGrid - sizeCross) / 2);\n const x = (col * sizeCrossGrid);\n const y = (row * sizeCrossGrid);\n const centerX = x + (sizeCrossGrid / 2);\n const centerY = y + (sizeCrossGrid / 2);\n const offsetX = x + offset;\n const offsetY = y + offset;\n \n const color = `rgba(${rectColor[0]},${rectColor[1]},${rectColor[2]}, ${Math.random() + 0.25})`;\n ctx.fillStyle = color;\n ctx.strokeColor = color;\n \n ctx.beginPath();\n ctx.moveTo(centerX, offsetY);\n ctx.lineTo(centerX, offsetY + sizeCross);\n ctx.moveTo(offsetX, centerY);\n ctx.lineTo(offsetX + sizeCross, centerY);\n ctx.stroke();\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"renderC = {\n let ctx = DOM.context2d(1000,400)\n patternC(ctx);\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"function patternC(ctx) {\n const rectSize = sizeC;\n const cols = ctx.canvas.width / gridSize;\n const rows = ctx.canvas.height / gridSize;\n \n for (let row = 0; row < rows; row++) {\n for (let col = 0; col < cols; col++) {\n const offset = (gridSize - rectSize) / 2;\n const x = (col * gridSize) + offset;\n const y = (row * gridSize) + offset;\n \n if (Math.random() > randomProp) {\n const color = `rgba(${rectColor[0]},${rectColor[1]},${rectColor[2]}, ${Math.random() + 0.25})`;\n ctx.fillStyle = color;\n ctx.fillRect(x ,y, rectSize, rectSize);\n } \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viewof gridSize = slider({\n min: 5, \n max: 50, \n step: 1, \n value: 20, \n title: 'grid size', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof sizeC = slider({\n min: 1, \n max: gridSize, \n step: 1, \n value: 25, \n title: 'size', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof randomProp = slider({\n min: 0, \n max: 1, \n step: 0.05, \n value: 0.7, \n title: 'random prop', \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"renderE = {\n let ctx = DOM.context2d(1000,1000)\n patternE(ctx);\n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"function patternE(ctx) {\n const rectSize = sizeC;\n const cols = ctx.canvas.width / gridSize;\n const rows = ctx.canvas.height / gridSize;\n \n for (let row = 0; row < rows; row++) {\n for (let col = 0; col < cols; col++) {\n const offset = (gridSize - rectSize) / 2;\n const x = (col * gridSize) + offset;\n const y = (row * gridSize) + offset;\n \n if (row / rows < 0.1 || Math.random() > (row / rows)) {\n const color = `rgba(${rectColor[0]},${rectColor[1]},${rectColor[2]}, ${Math.random() + 0.3})`;\n ctx.fillStyle = color;\n ctx.fillRect(x ,y, rectSize, rectSize);\n } \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { slider, color } from \"@jashkenas/inputs\"\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"rectColor = hexToRgb(rectColorHex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"hexToRgb = hex => hex.replace(/^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b).substring(1).match(/.{2}/g).map(x => parseInt(x, 16))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 47:"$46:body"