Skip to content

Instantly share code, notes, and snippets.

@ndrhzn

ndrhzn/index.html

Last active March 8, 2019 10:53
Show Gist options
  • Save ndrhzn/49bf00b9e3a641e0891f786a669c0f21 to your computer and use it in GitHub Desktop.
Save ndrhzn/49bf00b9e3a641e0891f786a669c0f21 to your computer and use it in GitHub Desktop.
Download ZIP
P5 - Alphabet
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Alphabet</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<meta charset="utf-8" />
<style media="screen">
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script>
let alphabet = ['а', 'б', 'в', 'г' ,'ґ', 'д', 'е', 'є', 'ж', 'з', 'и', 'і', 'ї', 'й', 'к', 'л', 'м', 'н', 'о', 'п', 'р', 'с', 'т', 'у', 'ф', 'х', 'ц', 'ч', 'ш', 'щ', 'ь', 'ю', 'я'];
let colors = ['#f7fcf0','#e0f3db','#ccebc5','#a8ddb5','#7bccc4','#4eb3d3','#2b8cbe','#0868ac','#084081'];
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(4)
}
function draw() {
background('#FFFEFA');
for(let i = 12.5; i < windowWidth; i+= 25) {
for(let l = 12.5; l < windowHeight; l+= 25) {
let letter = alphabet[Math.floor(Math.random() * alphabet.length)];
let textColor = colors[Math.floor(Math.random() * colors.length)];
fill(textColor);
textSize(18);
textFont('Ubuntu Mono');
textAlign(CENTER);
text(letter, i, l);
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment