html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<link rel="icon" href="data:,">
</head>
<body>
<a href="https://en.m.wikipedia.org/wiki/Percolation_theory">Percolation Theory Wikipedia</a>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// ########################################################################
// ##############################CONFIGURATION#############################
// ########################################################################
const FRAMES = 30;
const WIDTH = 320;
const HEIGHT = 440;
const CELL_SIZE = 2;
// the factor by which `p` changes
var P_FACTOR = 0.005;
// if true algorithm will consider diagonals when visiting cells
const ALLOW_DIAGONALS = false;
// if true only graphs with size part of `MIN_GRAPH_SIZE_TO_PAINT` array will be painted
// the actual sizes are the indexes of the array and the value of the element is the number
// of allowed graphs of this size
const RESTRICT_BY_SIZE = true;
// p label size
const TEXT_SIZE = 24;
const TEXT_LABEL_LEN = 80;
// iteration types
// randomises iteration step directions
const RANDOM_STEP_DIRECTIONS = true;
const NORMAL_ITERATION = 0;
const BREATH_FIRST_ITERATION = 1;
const DEPTH_FIRST_ITERATION = 2;
// range of random step
const RANDOM_RANGE = 40;
// every iteration step is random between 0 and `RANDOM_RANGE`
const RANDOM_STEP_BREATH_FIRST_ITERATION = 3;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run