2f:[] 2d:{"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":276,"value":"viewof selectedPlatform = Inputs.select(platforms, {\n format: (platform) => platform.name,\n value: platforms.find((platform) => platform.name === \"Mastodon\")\n})","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":295,"value":"model3 = p5((sketch) => {\n refresh;\n sketch.setup = function () {\n sketch.createCanvas(width, height);\n };\n let pixelSize = width / 120;\n sketch.draw = function () {\n for (let y = 0; y < height; y = y + pixelSize) {\n for (let x = 0; x < width; x = x + pixelSize) {\n sketch.noStroke();\n sketch.fill(getRandomColor(sketch));\n sketch.rect(x, y, pixelSize, pixelSize);\n }\n }\n };\n sketch.noLoop();\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: \"SeenThis\", dimensions: { height: 300, width: 1200 } },\n { name: \"Twitter\", dimensions: { height: 500, width: 1500 } },\n { name: \"LinkedIn\", dimensions: { height: 396, width: 1584 } },\n { name: \"Facebook\", dimensions: { height: 312, width: 820 } }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"selectedPlatform","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"width = selectedPlatform.dimensions.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"height = selectedPlatform.dimensions.height","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"}