3f:null 40:["$","title",null,{"children":"Gradient Signatures | Ross Mills | Observable"}] 46:[] 44:{"id":"9609a6bc8c11615f","slug":"gradient-signatures","title":"Gradient Signatures","thumbnail":"17e713ee7aa3d6576814a0866c9ab47c6fdd6ccba7462f981934860b35546c17","access_level":"public","create_time":"$D2023-01-13T22:27:09.237Z","update_time":"$D2023-12-08T12:13:09.614Z","view_time":null,"first_public_time":"$D2023-01-13T22:27:09.237Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":100,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9a6528a3906442c0","slug":"gradients","title":"Gradients ","owner":{"id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills"}},"type":"notebook","body":{"titling":"auto","title":"Gradient Signatures","cells":[{"id":0,"value":"# Gradient Signatures\n\nGenerating linear gradients as a kind of unique(ish) signature based on a string input.\n\nScroll below to get your own linear gradient signature!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"idTags = {\n const container = html`

`;\n \n const tags = ['Gavin Hastings', 'John Lennon', 'Otto Von Bismark', 'Winston Churchill', \n 'Andy Murray', 'Sigmund Freud', 'Stevie Wonder', 'Captain Jack Sparrow',\n 'Luke Skywalker', 'Ernie Ball', 'Austin Powers', 'Your name here'];\n for (let tag of tags) {\n \n const tagDisplay = getIdTagDisplay(tag); \n container.appendChild(tagDisplay);\n }\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"getYourOwn = {\nreturn md`## Get your own Gradient Signature`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"viewof yourName = Inputs.text({ label: 'Your name', placeholder: 'Enter your name' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"yourSignature = {\n if (yourName) return getIdTagDisplay(yourName);\n\n return html`

Your signature here

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"---\n\n### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"function hashString(string, seed) {\n return cyrb53(string, seed);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Hash function for strings (not cryptographically secure)\n// Borrowed from https://stackoverflow.com/a/52171480/2158331\nfunction cyrb53(str, seed = 0) {\n let h1 = 0xdeadbeef ^ seed, h2 = 0x41c6ce57 ^ seed;\n for (let i = 0, ch; i < str.length; i++) {\n ch = str.charCodeAt(i);\n h1 = Math.imul(h1 ^ ch, 2654435761);\n h2 = Math.imul(h2 ^ ch, 1597334677);\n }\n h1 = Math.imul(h1 ^ (h1>>>16), 2246822507) ^ Math.imul(h2 ^ (h2>>>13), 3266489909);\n h2 = Math.imul(h2 ^ (h2>>>16), 2246822507) ^ Math.imul(h1 ^ (h1>>>13), 3266489909);\n return 4294967296 * (2097151 & h2) + (h1>>>0);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"function getIdTagDisplay(idString) {\n const container = html`

`;\n const idTag = getIdTag(idString);\n container.append(idTag);\n container.append(html`

${idString}

`);\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"function getIdTag(idString) {\n const a = []; \n const n = 50;\n const hueMultipliers = [];\n for (let i = 0; i < n; i++) {\n hueMultipliers.push(hashString(idString, i) / Number.MAX_SAFE_INTEGER);\n }\n \n const saturationMultipliers = hueMultipliers.slice().reverse();\n const luminanceMultipliers = hueMultipliers.slice(\n 0, \n Math.floor(n / 2)).reverse().concat(hueMultipliers.slice(Math.floor(n / 2)).reverse());\n \n for (let i = 0; i < n; i++) {\n a.push({\n color: d3.hsl(\n hueMultipliers[i] * 255,\n 0.1 + (saturationMultipliers[i] * 4 / 5),\n 0.1 + (luminanceMultipliers[i] * 4 / 5),\n 1).formatHex(),\n pc: 10 + (i * 90/n)\n });\n }\n \n const rotation = hashString(idString) % 360;\n \n return html`

`\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {linearGradient} from \"@rossmills99/gradients\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"