SnowflakeGenerator/snowflake.html at master · paulkaplan/SnowflakeGenerator · 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
<!DOCTYPE html>
<html>
<head>
  <script src="processing.js
"></script>
<script src="filesaver.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>

<style>
  .canvas-wrapper {
    width:680px;
    height:680px;
    margin:auto auto;
    outline: none;
  }
  canvas {
      outline: none;

  user-select: none;
-webkit-user-select: none;
-moz-user-select: none;}
  body, html, h1, a { font-family: 'Wellfleet' !important; color: #fff !important;}
  h1, h2, h3, h4, h5, div, p { font-family: 'Wellfleet';}


  body {
    background-image: url(stripe44.png);
    /*background-size: 22px;*/
  }
.container { background-color:#68A0B6; height:5000px; overflow: hidden;}
html { overflow: hidden;     background-color:#F27E71;
}
  a.button-row {
    display: inline-block;
    padding:10px;
    border-radius: 10px;
    border: 1px solid #fff;
    text-align: center;
    margin:10px;
  }
  a.button-row:hover {
    background-color:#F27E71;
  }
  /*.button-row { text-align: center;}*/
</style>

</head>

<body>
  <div class="container">
    <h1> Snowflake Generator </h1>
    <div class="row">
        <a class="button-row" id="clear" href="#">Restart</a>
        <a class="button-row" id='save' href="#">Save as SVG</a>
    </div>
    <div class="canvas-wrapper">
      <canvas id="c" data-processing-sources="snowflake2.pde"></canvas>
    </div>

    <div class="row">
      <div class="button-row col-md-6">
        <a href="#">Restart</a>
      </div>
      <div class="button-row col-md-6">
        <a href="#">Save as SVG</a>
      </div>
    </div>
  </div>
</body>


<script>
document.getElementById('save').addEventListener('click', function(){
  Processing.getInstanceById('c').record();
});
document.getElementById('clear').addEventListener('click', function(){
  Processing.getInstanceById('c').ClearShape();
});
</script>
<html>