Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
157 lines (156 sloc) 3.84 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Print</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: sans-serif;
font-size: 16px;
line-height: 1.6;
background-color: rgb(50, 65, 166);
}
strong {
font-weight: bold;
}
canvas {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.wrapper {
width: 90%;
max-width: 600px;
margin: 60px auto;
z-index: 2;
position: relative;
}
.box {
box-sizing: border-box;
padding: 32px;
border-radius: 6px;
background-color: rgba(255,255,255,0.9);
color: #333;
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
}
h1 {
font-weight: bold;
font-size: 2em;
margin-bottom: 0.5em;
}
a {
font-weight: bold;
color: rgb(50, 65, 166);
}
p:not(:last-of-type) {
margin-bottom: 1em;
}
p:last-of-type {
text-align: right;
margin-top: 2em;
}
button {
outline: none;
border: none;
background: rgb(50, 65, 166);
color: #fff;
padding: 16px;
box-sizing: border-box;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.25px;
border-radius: 3px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
transition: all 250ms ease;
cursor: pointer;
}
button:hover {
background: rgb(40, 55, 156);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<h1>Random 10 PRINT background</h1>
<p>This simple sketch generates a <strong>10 PRINT</strong>-style pattern full page background with random colors.</p>
<p>Colors are selected via <a href="//gka.github.io/chroma.js/">chroma.js</a> to have a <strong>high WCAG contrast ratio</strong> between them.</p>
<p>The pattern was inspired by the <a href="https://10print.org/">10 PRINT book</a> by Nick Montfort, Patsy Baudoin, John Bell, Ian Bogost, Jeremy Douglass, Mark C. Marino, Michael Mateas,Casey Reas, Mark Sample, and Noah Vawter.</p>
<p>The work was also inspired by Dan Shiffman's <a href="//www.youtube.com/watch?v=bEyTZ5ZZxZs">Coding Challenge #76</a>.</p>
<p>
<button onclick="draw10p()">ANOTHER ONE!</button>
</p>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>
<script>
let x = 0;
let y = 0;
let s = 30;
function setup() {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
createCanvas(w,h)
background(50, 65, 166);
draw10p();
}
function draw(){
}
function draw10p() {
x = 0;
y = 0;
let c_s = palette();
let c_a = c_s[0];
let c_b = c_s[1];
background(c_a);
let n = Math.ceil(((document.documentElement.clientWidth + s) / s) * ((document.documentElement.clientHeight + s) / s));
for (let i = 0; i < n; i++) {
stroke(c_b);
if (random(1) < 0.5) {
line(x,y,x+s,y+s);
} else {
line(x,y+s,x+s,y);
}
x += s;
if (x > width) {
x = 0
y += s;
}
}
}
function palette() {
let found = false;
let colors = [];
let c_a, c_b;
while (!found) {
c_a = chroma.random();
c_b = chroma.random();
if(chroma.contrast(c_a, c_b) > 4.5) {
found = true;
console.log('A: ',c_a.rgb());
console.log('B: ',c_b.rgb());
}
}
colors.push(c_a.rgb());
colors.push(c_b.rgb());
return colors;
}
</script>
</body>
</html>
You can’t perform that action at this time.