perrig-song-randomart
Version:
A browser implementation of the randomart generator proposed by Perrig and Song's 1999 paper 'Hash Visualization: a New Technique to improve Real-World Security'.
73 lines (66 loc) • 3.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<link rel="stylesheet" href="styles.css">
<script type ="module">
import { randomart } from './dist/index.js';
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('inputText');
const range = document.getElementById('inputRange');
const scaleRange = document.getElementById('scaleRange');
const canvas1 = document.getElementById('artCanvas1');
const ctx1 = canvas1.getContext('2d');
const canvas2 = document.getElementById('artCanvas2');
const ctx2 = canvas2.getContext('2d');
const canvas3 = document.getElementById('artCanvas3');
const ctx3 = canvas3.getContext('2d');
function generate(){
console.info("Input changed, generating random art.");
const bitmap1 = randomart(canvas1.width, canvas1.height, input.value, "perrig", range.value, scaleRange.value);
ctx1.drawImage(bitmap1, 0, 0, canvas1.width, canvas1.height);
const bitmap2 = randomart(canvas2.width, canvas2.height, input.value, "tsoding", range.value, scaleRange.value);
ctx2.drawImage(bitmap2, 0, 0, canvas2.width, canvas2.height);
const bitmap3 = randomart(canvas3.width, canvas3.height, input.value, "oswald", range.value, scaleRange.value);
ctx3.drawImage(bitmap3, 0, 0, canvas3.width, canvas3.height);
bitmap1.close();
bitmap2.close();
bitmap3.close();
}
input.addEventListener('input', (event) => {
console.info("Input text changed to:", event.target.value);
generate();
});
range.addEventListener('input', (event) => {
console.info("Range input changed to:", event.target.value);
document.getElementById('depthValue').textContent = range.value;
generate();
});
scaleRange.addEventListener('input', (event) => {
console.info("Scale range input changed to:", event.target.value);
document.getElementById('scaleValue').textContent = scaleRange.value;
generate();
});
// Initial generation
generate();
});
</script>
</head>
<body>
<p>Perrig Song - Tsoding - Oswald</p>
<canvas id="artCanvas1" width="500" height="500"></canvas>
<canvas id="artCanvas2" width="500" height="500"></canvas>
<canvas id="artCanvas3" width="500" height="500"></canvas>
<br/>
<p> Seed: </p>
<input type="text" id="inputText" value="adc" placeholder="Enter text for random art"/>
<p> Depth:</p>
<input type="range" id="inputRange" min="1" max="30" value="15"/>
<span id="depthValue">15</span>
<p> Scale:</p>
<input type="range" id="scaleRange" min="1" max="100" value="2"/>
<span id="scaleValue">2</span>
</body>
</html>