DeepRose/backgroundTest.html at master · RomanRiesen/DeepRose · 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
<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Background Test</title>

  </head>
  <body>
    <canvas id = "background" width = "1000" height = "1000"></canvas>

    <script>
    /* accepts parameters
 * h  Object = {h:x, s:y, v:z}
 * OR
 * h, s, v
*/
function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    if (arguments.length === 1) {
        s = h.s, v = h.v, h = h.h;
    }
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }
    return (
        "rgb(" +
        Math.round(r * 255)+
        Math.round(g * 255)+
        Math.round(b * 255)+
        ")"
    )
}
    var canvas = document.getElementById("background")
    var ctx = canvas.getContext("2d")

    //ctx.globalCompositeOperation = "xor"

    //ctx.filter = "blur(10px)"

    var width = canvas.width
    var height = canvas.height

    var radius = 200

    var maxConcRings = 2
    var radiusDecrease = 1.5

    //ctx.fillStyle = 'rgb(0,0,0)'
    for (var n = 0; n < 200; n++) {
        var h = Math.floor(Math.random()*255)
        var s = 0.6//Math.floor(Math.random()*255)
        var v = 0.4//Math.floor(Math.random()*255)
        var a = Math.floor(Math.random()*255)
        var c = [h,s,v].join()

        var col = ["rgb(0,0,0)", "rgb(255,255,255)"]
        var v = Math.random() <= 0.4 ? col[0] : col[1]
        ctx.fillStyle = v//HSVtoRGB(h,s,v)//
        //console.log(ctx.fillStyle);


        var x = Math.random()*width
        var y =  Math.random()*height
        var rx = Math.random()*radius+100
        var ry = Math.random()*radius+100
        var rot = Math.random()*Math.PI

        ctx.beginPath()
        ctx.ellipse(x,y,rx, ry,0,rot, 2*Math.PI)
        //ctx.fill();


        for(var i = 0; i < maxConcRings; i++){
            ctx.beginPath()
            ctx.lineWidth = 2
            var h = Math.floor(Math.random()*255)
            var s = 0.6//Math.floor(Math.random()*255)
            var v = 0.9//Math.floor(Math.random()*255)
            var a = Math.floor(Math.random()*255)
            var v = Math.random() < 0.5 ? col[0] : col[1]
            ctx.strokeStyle = v//"rgba("+v+")" HSVtoRGB(h,s,v)//
            //console.log(ctx.fillStyle);
            ctx.ellipse(x, y, rx/((radiusDecrease)), ry/(radiusDecrease), rot, 0, 2*Math.PI)
            ctx.stroke()
        }
    }

    </script>
  </body>
</html>