complex-function-plot/index.html at master · PeterEFrancis/complex-function-plot · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Complex Function Plot</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <!-- Mathjax -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>


  <link rel="stylesheet" href="style.css">


  <style>


    body {
      min-width: 220px;
    }

    td {
      width: 50%;
    }

  </style>

</head>
<body>


  <div class="container-fluid">
    <div class="jumbotron" id="header" style="margin: -15px; border-radius: 0px;">
      <h1>Complex Function Plot</h1>
      <p>Fun and colorful transformations of the complex plane!</p>
      <iframe src="https://ghbtns.com/github-btn.html?user=peterefrancis&repo=complex-function-plot&type=star&count=false&size=large"
              frameborder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
    </div>

    <div class="row" style="padding: 100px 0px 100px 0px;">
      <div class="col-md-4"></div>
      <div class="col-md-4">
        <button type="button" style="font-size: 30px;" id="start-plotting"
                class="btn center-block btn-block btn-lg btn-primary button-primary"
                onclick="window.location.href='plotter.html'">
          Start Plotting!
        </button>
        <!-- <br>
        <p id="device-no" class="text-center" style="display:none">It seems your device won't support plotting.</p> -->
      </div>
      <div class="col-md-4"></div>

    </div>

    <div class="row">
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <h2 class="text-center" style="margin-bottom: 60px;">About</h2>
        <p>Transformations from the complex plane \(\mathbb{C}\) to itself can create beautifiul patterns and images in a simple way. First let \(S\) be the set of all colors, and define two functions:</p>
          <ul>
            <li>a complex transformation \(f:\mathbb{C}\to\mathbb{C}\), and</li>
            <li>a domain coloring scheme \(g:\mathbb{C}\to S\).</li>
          </ul>
          <p>Then, color the plane with the new coloring map \(g\circ f\).</p>
          <p>Different domain coloring schemes can drastically change the resulting image.
             Many use some combination of increments in phase, modulus, real, and imaginary coordinates. However, you can upload any image to use as a domain coloring scheme!</p>
      </div>
      <div class="col-md-3"></div>


    </div>
  </div>
  <div class="container"  style="margin-top: 150px;">
    <h2 class="text-center" style="margin-bottom: 60px;">Gallery</h2>
    <div class="row">
      <div class="col-sm-6">
        <img src="img/gallery/continued-fraction.png" class="img-responsive img-rounded center-block">
      </div>
      <div class="col-sm-6">
        <h1 class="text-center math-lg">\(f(z)=\frac{1}{z+\frac{1}{z^2+\frac{1}{\ddots+\frac{1}{z^{10}+\frac{1}{z^{11}}}}}}\)</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <h1 class="text-center math-lg">\(f(z)=z^5\)</h1>
      </div>
      <div class="col-sm-6">
        <img src="img/gallery/treeline-1.png" class="img-responsive img-rounded center-block">
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-sm-push-6">
        <h1 class="text-center math-lg">\(f(z)=z^{4z^{3z^{2z^{z}}}}\)</h1>
      </div>
      <div class="col-sm-6 col-sm-pull-6">
        <img src="img/gallery/late-night.png" class="img-responsive img-rounded center-block">
      </div>
    </div>
    <div class="row">
          <div class="col-sm-6">
            <h1 class="text-center math-lg">\(f(z)=\frac{i}{z}-\frac{z}{i}\)</h1>
          </div>
          <div class="col-sm-6">
            <img src="img/gallery/S.png" class="img-responsive img-rounded center-block">
          </div>
        </div>


    <div class="row" style="margin:100px 0px 50px 0px;">
      <div class="col-md-12">
        <p class="text-center" style="color: grey">Copyright &copy; 2020 <a style="color:grey; text-decoration: underline;" href="https://PeterEFrancis.com">Peter E. Francis</a></p>
      </div>
    </div>

</div>

<script>
  //
  // if (/Android|Mobile|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
  //   document.getElementById('start-plotting').disabled = true;
  //   document.getElementById('device-no').style.display = "block";
  // }

</script>


</body>
</html>