clopen/patch.html at main · atorresen/clopen · 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
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="images/icon.ico">

  <script src="p5/p5.js"></script>

  <title>patch</title>
</head>

<body>

  <div class="graphic" id="patchGraphic"></div>

  <div class="pageButton">
    <form id="patchForm" action="/action_page.php">
      <input type="text" id="expr" value="annemarie"><br>
    </form>
    <h1 id="makePatch" onclick="makePatch()">go</h1>
  </div>

  <div class="backButton"><a href="index.html">back</a></div>

  <script>
    var charToDigit = {
      "a": 1,
      "b": 2,
      "c": 3,
      "d": 4,
      "e": 5,
      "f": 6,
      "g": 7,
      "h": 8,
      "i": 9,
      "j": 10,
      "k": 11,
      "l": 12,
      "m": 13,
      "n": 14,
      "o": 15,
      "p": 16,
      "q": 17,
      "r": 18,
      "s": 19,
      "t": 20,
      "u": 21,
      "v": 22,
      "w": 23,
      "x": 24,
      "y": 25,
      "z": 26
    };

    function setup() {
      var myCanvas = createCanvas(Math.min(windowWidth, 800), Math.min(windowHeight, 600));
      myCanvas.parent("patchGraphic");
    };

    function makePatch() {
      clear();

      var inputs = document.getElementById("patchForm");

      // convert each inputted characeter into its corresponding digit
      var word = inputs.elements[0].value;
      word = word.toLowerCase().replace(/[^a-z]+/g, '');
      var chars = word.split("").reverse();

      var charVals = [];
      for (var i = 0; i < chars.length; i++) {
        charVals[i] = charToDigit[chars[i]];
      };

      var angle = (2 * PI)/(charVals.length);
      var scale = 14;

      for (var i = 0; i < charVals.length; i++) {
        for (var j = charVals[i]; j > 0; j -= 1) {
          if (i % 2 == 1) {
              if (j % 2 == 1) {
              fill("black");
            } else {
              fill("lightblue");
            }
          } else {
            if (j % 2 == 1) {
            fill("lightblue");
          } else {
            fill("black");
          }
          };
          noStroke();
          var d = j * Math.floor(scale * 26/charVals[i]);
          arc(
            width / 2,
            height / 2,
            d,
            d,
            angle * i,
            angle * (i + 1)
          );
        }
      }
    }
  </script>


</body>

</html>