28:null 29:["$","title",null,{"children":"Social Media Banner Generator | Durbar Bagerhat | Observable"}] 2f:[] 2c:{"id":"96a2ff128e93dd31","slug":null,"title":"Social Media Banner Generator","thumbnail":"37561c7f385ff06c263c1ee8a81314643c2baddea1b491be30802a6c0cb51c34","access_level":"public","create_time":"$D2023-01-19T01:14:41.266Z","update_time":"$D2023-01-19T01:14:41.266Z","view_time":null,"first_public_time":"$D2023-01-19T01:14:41.266Z","fork":{"id":"a5d651524123d37e","slug":null,"title":"Social Media Banner Generator","owner":{"id":"5407a466bc5449bd","login":"nmerm","name":"Nicolas Mermoud-Ghraichy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3d6ada0e14d2c551","login":"faisalbsl21","name":"Durbar Bagerhat","avatar_url":"https://avatars-next.observableusercontent.com/9ccefa6ea0c7ba8759f0c579d234c9d330385e56002653d68b14f872da3c4300","tier":"starter_2024"},"version":273,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcd00632821167cc","login":"faisalbsl21","name":"Durbar Bagerhat","avatar_url":"https://avatars-next.observableusercontent.com/9ccefa6ea0c7ba8759f0c579d234c9d330385e56002653d68b14f872da3c4300","tier":null}],"members":[{"type":"individual","id":"bcd00632821167cc","login":"faisalbsl21","name":"Durbar Bagerhat","avatar_url":"https://avatars-next.observableusercontent.com/9ccefa6ea0c7ba8759f0c579d234c9d330385e56002653d68b14f872da3c4300","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Social Media Banner Generator","cells":[{"id":0,"value":"# Social Media Banner Generator","pinned":false,"hidden":false,"mode":"md"},{"id":248,"value":"## Platform","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"viewof select = Inputs.select([\"Mastodon\", \"Twitter\", \"LinkedIn\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"viewof hexColor = Inputs.color({ value: \"#4682b4\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"## Palette","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":185,"value":"viewof paletteMode = Inputs.select(\n [\n \"monochrome\",\n \"monochrome-dark\",\n \"monochrome-light\",\n \"analogic\",\n \"complement\",\n \"analogic-complement\",\n \"triad\",\n \"quad\"\n ],\n { label: \"Palette mode\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"## Color Opacity","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"viewof minOpacity = Inputs.range([0, 255], {\n label: \"Minimum opacity\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof maxOpacity = Inputs.range([minOpacity, 255], {\n label: \"Maximum opacity\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"## Drawings","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof refresh = Inputs.button(\"Refresh\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"model1 = p5((sketch) => {\n refresh;\n sketch.setup = function () {\n sketch.createCanvas(width, height);\n };\n sketch.draw = function () {\n sketch.background(255);\n sketch.noFill();\n\n // Use a for loop to draw n lines\n let n = 500;\n\n for (let i = 0; i < n; i++) {\n // Set the stroke weight for the lines\n sketch.strokeWeight(sketch.random(8, 16));\n\n // Set the stroke color\n sketch.stroke(getRandomColor(sketch));\n\n // Generate random x and y coordinates for the starting point of the line\n let x1 = sketch.random(0, sketch.width);\n let y1 = sketch.random(0, sketch.height);\n\n // Generate random x and y coordinates for the ending point of the line\n let x2 = x1 + sketch.random(-100, 100);\n let y2 = y1 + sketch.random(-100, 100);\n\n // arc(x1, y1, x2, y2, random(0, PI), random(0, PI));\n\n // Draw the line\n sketch.line(x1, y1, x2, y2);\n }\n };\n sketch.noLoop();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"model2 = p5((sketch) => {\n refresh;\n sketch.setup = function () {\n sketch.createCanvas(width, height);\n };\n\n sketch.draw = function () {\n sketch.noLoop();\n sketch.noStroke();\n for (let y = -10; y < height + 50; y += sketch.random(10, 20)) {\n for (let x = -10; x < width + 50; x += sketch.random(10, 20)) {\n sketch.fill(getRandomColor(sketch));\n sketch\n .rect(x, y + sketch.random(0, 5), 50, 50)\n .rotate(sketch.random(0, 360));\n }\n }\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"platforms = {\n return [\n { name: \"Mastodon\", dimensions: { height: 500, width: 1500 } },\n { name: \"LinkedIn\", dimensions: { height: 396, width: 1584 } },\n { name: \"Facebook\", dimensions: { height: 820, width: 312 } }\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"width = 1584","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = 396","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"{\n document.getElementById(\"color-box-1\").style.backgroundColor = colors[0];\n document.getElementById(\"color-box-2\").style.backgroundColor = colors[1];\n document.getElementById(\"color-box-3\").style.backgroundColor = colors[2];\n document.getElementById(\"color-box-4\").style.backgroundColor = colors[3];\n document.getElementById(\"color-box-5\").style.backgroundColor = colors[4];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"colors = randomPaletteFromHex.colors.map((color) => {\n return color.rgb.value;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"randomPaletteFromHex = fetch(\n \"https://www.thecolorapi.com/scheme?hex=\" +\n color +\n \"&format=json&mode=\" +\n paletteMode +\n \"&count=5\"\n).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"function getRandomColor(sketch) {\n let rgbColor = colors[Math.floor(Math.random() * colors.length)];\n let color = sketch.color(rgbColor);\n color.setAlpha(sketch.random(minOpacity, maxOpacity));\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function getRandomIntInclusive(min, max) {\n min = Math.ceil(min);\n max = Math.floor(max);\n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"color = hexColor.slice(1, 7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { p5 } from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"