Skip to content

Instantly share code, notes, and snippets.

@cole-gillespie

cole-gillespie/public_index.html

Last active January 8, 2022 20:30
Show Gist options
  • Save cole-gillespie/973a27143adf92fa82e56ac42b687fff to your computer and use it in GitHub Desktop.
Save cole-gillespie/973a27143adf92fa82e56ac42b687fff to your computer and use it in GitHub Desktop.
Download ZIP
fxhash template
Raw
public_index.html
<!DOCTYPE html>
<html>
<head>
<title>FXHASH project</title>
<meta charset="utf-8">
<script id="fxhash-snippet">
//---- do not edit the following code (you can indent as you wish)
let alphabet = "123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ"
var fxhash = "oo" + Array(49).fill(0).map(_=>alphabet[(Math.random()*alphabet.length)|0]).join('')
let b58dec = str=>[...str].reduce((p,c)=>p*alphabet.length+alphabet.indexOf(c)|0, 0)
let fxhashTrunc = fxhash.slice(2)
let regex = new RegExp(".{" + ((fxhash.length/4)|0) + "}", 'g')
let hashes = fxhashTrunc.match(regex).map(h => b58dec(h))
let sfc32 = (a, b, c, d) => {
return () => {
a |= 0; b |= 0; c |= 0; d |= 0
var t = (a + b | 0) + d | 0
d = d + 1 | 0
a = b ^ b >>> 9
b = c + (c << 3) | 0
c = c << 21 | c >>> 11
c = c + t | 0
return (t >>> 0) / 4294967296
}
}
var fxrand = sfc32(...hashes)
// call this method to trigger the preview
function fxpreview() {
console.log("fxhash: TRIGGER PREVIEW")
}
//---- /do not edit the following code
</script>
<link rel="stylesheet" href="./style.css">
<!-- if you need to import js scripts do it here -->
</head>
<body>
<!-- WEBPACK will inject the bundle.js here -->
</body>
<script src="./p5.min.js"></script>
</html>
Raw
src_colors.js
export const colors = [
{
name: "Austria",
colors: [
"#a40000",
"#16317d",
"#007e2f",
"#ffcd12",
"#b86092",
"#721b3e",
"#00b7a7",
],
order: [1, 2, 3, 4, 6, 5, 7],
},
{
name: "Cassatt",
colors: [
"#b1615c",
"#d88782",
"#e3aba7",
"#edd7d9",
"#c9c9dd",
"#9d9dc7",
"#8282aa",
"#5a5a83",
],
order: [3, 6, 1, 8, 4, 5, 2, 7],
},
{
name: "Cross",
colors: [
"#c969a1",
"#ce4441",
"#ee8577",
"#eb7926",
"#ffbb44",
"#859b6c",
"#62929a",
"#004f63",
"#122451",
],
order: [4, 7, 1, 8, 2, 6, 3, 5, 9],
},
{
name: "Degas",
colors: [
"#591d06",
"#96410e",
"#e5a335",
"#556219",
"#418979",
"#2b614e",
"#053c29",
],
order: [5, 2, 4, 3, 7, 1, 6],
},
{
name: "Egypt",
colors: ["#dd5129", "#0f7ba2", "#43b284", "#fab255"],
order: [1, 2, 3, 4],
},
{
name: "Gauguin",
colors: ["#b04948", "#811e18", "#9e4013", "#c88a2c", "#4c6216", "#1a472a"],
order: [2, 5, 4, 3, 1, 6],
},
{
name: "Greek",
colors: ["#3c0d03", "#8d1c06", "#e67424", "#ed9b49", "#f5c34d"],
order: [2, 3, 5, 1, 4],
},
{
name: "Hokusai",
colors: [
"#6d2f20",
"#b75347",
"#df7e66",
"#e09351",
"#edc775",
"#94b594",
"#224b5e",
],
order: [2, 7, 4, 6, 5, 1, 3],
},
{
name: "Ingres",
colors: [
"#041d2c",
"#06314e",
"#18527e",
"#2e77ab",
"#d1b252",
"#a97f2f",
"#7e5522",
"#472c0b",
],
order: [4, 5, 3, 6, 2, 7, 1, 8],
},
{
name: "Isfahan1",
colors: [
"#4e3910",
"#845d29",
"#d8c29d",
"#4fb6ca",
"#178f92",
"#175f5d",
"#1d1f54",
],
order: [5, 2, 4, 6, 3, 7, 1],
},
{
name: "Isfahan2",
colors: ["#d7aca1", "#ddc000", "#79ad41", "#34b6c6", "#4063a3"],
order: [4, 2, 3, 5, 1],
},
{
name: "Juarez",
colors: ["#a82203", "#208cc0", "#f1af3a", "#cf5e4e", "#637b31", "#003967"],
order: [1, 2, 3, 4, 5, 6],
},
{
name: "Klimt",
colors: ["#df9ed4", "#c93f55", "#eacc62", "#469d76", "#3c4b99", "#924099"],
order: [5, 2, 3, 4, 6, 1],
},
{
name: "Manet",
colors: [
"#3b2319",
"#80521c",
"#d29c44",
"#ebc174",
"#ede2cc",
"#7ec5f4",
"#4585b7",
"#225e92",
"#183571",
"#43429b",
"#5e65be",
],
order: [8, 3, 10, 4, 7, 9, 11, 2, 6, 1, 5],
},
{
name: "Monet",
colors: [
"#4e6d58",
"#749e89",
"#abccbe",
"#e3cacf",
"#c399a2",
"#9f6e71",
"#41507b",
"#7d87b2",
"#c2cae3",
],
order: [2, 5, 8, 3, 4, 9, 1, 6, 7],
},
{
name: "Moreau",
colors: [
"#421600",
"#792504",
"#bc7524",
"#8dadca",
"#527baa",
"#104839",
"#082844",
],
order: [2, 5, 3, 4, 7, 1, 6],
},
{
name: "Morgenstern",
colors: [
"#7c668c",
"#b08ba5",
"#dfbbc8",
"#ffc680",
"#ffb178",
"#db8872",
"#a56457",
],
order: [6, 5, 4, 7, 3, 2, 1],
},
{
name: "Nattier",
colors: [
"#52271c",
"#944839",
"#c08e39",
"#7f793c",
"#565c33",
"#184948",
"#022a2a",
],
order: [1, 6, 5, 2, 3, 4, 7],
},
{
name: "NewKingdom",
colors: ["#e1846c", "#9eb4e0", "#e6bb9e", "#9c6849", "#735852"],
order: [2, 1, 3, 4, 5],
},
{
name: "Pillement",
colors: ["#a9845b", "#697852", "#738e8e", "#44636f", "#2b4655", "#0f252f"],
order: [4, 3, 2, 5, 1, 6],
},
{
name: "Pissaro",
colors: [
"#134130",
"#4c825d",
"#8cae9e",
"#8dc7dc",
"#508ca7",
"#1a5270",
"#0e2a4d",
],
order: [5, 2, 3, 6, 4, 7, 1],
},
{
name: "Redon",
colors: [
"#5b859e",
"#1e395f",
"#75884b",
"#1e5a46",
"#df8d71",
"#af4f2f",
"#d48f90",
"#732f30",
"#ab84a5",
"#59385c",
"#d8b847",
"#b38711",
],
order: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
},
{
name: "Renoir",
colors: [
"#17154f",
"#2f357c",
"#6c5d9e",
"#9d9cd5",
"#b0799a",
"#f6b3b0",
"#e48171",
"#bf3729",
"#e69b00",
"#f5bb50",
"#ada43b",
"#355828",
],
order: [2, 5, 9, 12, 3, 8, 7, 10, 4, 1, 6, 11],
},
{
name: "Robert",
colors: ["#11341a", "#375624", "#6ca4a0", "#487a7c", "#18505f", "#062e3d"],
order: [3, 2, 4, 5, 1, 6],
},
{
name: "Stevens",
colors: ["#042e4e", "#307d7f", "#598c4c", "#ba5c3f", "#a13213", "#470c00"],
order: [4, 2, 3, 5, 1, 6],
},
{
name: "Tara",
colors: ["#eab1c6", "#d35e17", "#e18a1f", "#e9b109", "#829d44"],
order: [1, 3, 2, 5, 4],
},
{
name: "Thomas",
colors: [
"#b24422",
"#c44d76",
"#4457a5",
"#13315f",
"#b1a1cc",
"#59386c",
"#447861",
"#7caf5c",
],
order: [3, 2, 8, 6, 1, 4, 7, 5],
},
{
name: "Tiepolo",
colors: [
"#802417",
"#c06636",
"#ce9344",
"#e8b960",
"#646e3b",
"#2b5851",
"#508ea2",
"#17486f",
],
order: [1, 2, 8, 6, 3, 5, 7, 4],
},
{
name: "Troy",
colors: [
"#421401",
"#6c1d0e",
"#8b3a2b",
"#c27668",
"#7ba0b4",
"#44728c",
"#235070",
"#0a2d46",
],
order: [2, 7, 4, 5, 1, 8, 3, 6],
},
{
name: "VanGogh1",
colors: [
"#2c2d54",
"#434475",
"#6b6ca3",
"#969bc7",
"#87bcbd",
"#89ab7c",
"#6f9954",
],
order: [3, 5, 7, 4, 6, 2, 1],
},
{
name: "VanGogh2",
colors: [
"#bd3106",
"#d9700e",
"#e9a00e",
"#eebe04",
"#5b7314",
"#c3d6ce",
"#89a6bb",
"#454b87",
],
order: [1, 5, 8, 2, 7, 4, 6, 3],
},
{
name: "Veronese",
colors: [
"#67322e",
"#99610a",
"#c38f16",
"#6e948c",
"#2c6b67",
"#175449",
"#122c43",
],
order: [5, 1, 7, 2, 3, 6, 4],
},
{
name: "Wissing",
colors: ["#4b1d0d", "#7c291e", "#ba7233", "#3a4421", "#2d5380"],
order: [2, 3, 5, 4, 1],
},
];
export const getColorScheme = (size) => {
if(size) {
var mc = colors.filter((c) => {
return c.colors.length >= 8;
})
var idx = int(rand(0, mc.length -1))
return mc[idx].colors;
}
var idx = int(rand(0, colors.length -1))
return colors[idx].colors;
}
Raw
src_index.js
var size;
var padding;
var offset;
var colorScheme;
import { getColorScheme } from './colors';
import { getRandomNumber as rndm, getRandomArrayItem } from './random';
window.setup = function() {
colorMode(HSB, 360, 100, 100, 100);
size = min(windowWidth, windowHeight)
offset = size / 15;
padding = size - offset;
colorScheme = getColorScheme(7);
var color =
background(255)
createCanvas(size, size);
noLoop();
console.log({
fxhash,
size,
offset,
padding,
colorScheme,
color: getRandomArrayItem(colorScheme),
random: rndm()
})
}
window.draw = function() {
// init
}
window.mousePressed = function() {
//redraw();
}
window.keyPressed = function() {
//save();
}
Raw
src_random.js
export const getRandomNumber = (min, max) => {
if(min !== undefined && max === undefined){
return fxrand(min)
}
if(min === undefined && max === undefined) return fxrand()
return fxrand() * (max - min) + min;
}
export const getRandomArrayItem = (arr) => {
var idx = int(getRandomNumber(0, arr.length -1))
return arr[idx];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment