ProceduralBackground/test.html at master · itslevo/ProceduralBackground · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
	<style>
		#render{
			position: relative;
			z-index: 1;
		}

    #content{
      position: absolute;
      top: 20%;
      bottom: 20%;
      right: 10%;
      left: 10%;
      margin: auto;
    }
	</style>
</head>
<body>
	<div id="content">

	</div>
	<button id="render">render</button>
	<button id="renderAnimated">render animated</button>

  <input type="number" value=5 id="pixelSize" style="width: 2rem" />
  <select id="algo">
    <option value="branch">bright colours</option>
    <option value="diffuse">smeared colours</option>
  </select>
<script src="procBG.js"></script>
<script type="text/javascript">

  function getSettings() {
    var cell_value = parseInt(document.getElementById("pixelSize").value) || 5;
    var algo = document.getElementById("algo").value || "branch";
    return {
	    cell_width       : cell_value,
      cell_height      : cell_value,
      cell_gap         : 0,
      variance         : 2,
      variance_fulcrum : 0.5,
      fill_percentage  : 100,
      base_alpha       : 100,
      algo             : algo,
      render_method    : "square",
      parent           : document.getElementById("content"),
      canvas_styling : {
        "position" : "absolute",
        "top"      : 0,
        "bottom"   : 0,
        "right"    : 0,
        "left"     : 0,
        "width"    : "99.5%",
        "height"   : "99.5%",
        "border-width"   : "1px",
        "border-style"   : "solid",
        "border-color"   : "white"
      },
      background_grid: false
  	}
  }
	ProceduralBackground.init(getSettings());

  document.getElementById("renderAnimated").addEventListener("click", function () {
    var settings = ProceduralBackground.settings
    var grid_width = Math.floor(settings.canvas.width / (settings.cell_width + settings.cell_gap) + 1);
    var grid_height = Math.floor(settings.canvas.height / (settings.cell_height + settings.cell_gap) + 1);


    ProceduralBackground.init({
      ...getSettings(),
      seed: {
        x: Math.floor(Math.random() * grid_width),
        y: Math.floor(Math.random() * grid_height),
        r: Math.floor(Math.random() * 256),
        g: Math.floor(Math.random() * 256),
        b: Math.floor(Math.random() * 256)
      },
      seed_array: []
    })
    ProceduralBackground.renderAnimated();
  })

	document.getElementById("render").addEventListener("click", function( ) {

    var settings = ProceduralBackground.settings
    var grid_width = Math.floor(settings.canvas.width / (settings.cell_width + settings.cell_gap) + 1);
    var grid_height = Math.floor(settings.canvas.height / (settings.cell_height + settings.cell_gap) + 1);
    ProceduralBackground.init({
      ...getSettings(),
      seed: {
        x: Math.floor(Math.random() * grid_width),
        y: Math.floor(Math.random() * grid_height),
        r: Math.floor(Math.random() * 256),
        g: Math.floor(Math.random() * 256),
        b: Math.floor(Math.random() * 256)
      },
      seed_array: []
    })
		ProceduralBackground.render();
	}, false);
</script>
</body>
</html>