bees/index.html at master · ncase/bees · 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
<!--    Hello! We hope you enjoy this code.

          \   \_____/   /
            \ ()   () /
 ____________(ZZZZZZZ)____________
(  __ / _ /  )ZZZZZZZ(  \ _ \ __  )
(___/___/__/ (       ) \__\___\___)
   (_____/__/(ZZZZZZZ)\__\_____)
             (ZZZZZZZ)
            /(       )\
          /   (ZZZZZ)   \
               (ZZZ)
                 !
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- this is to render emoji :D -->
  <meta charset="utf-8">

  <!-- Schema.org markup for Google+ -->
  <meta itemprop="name" content="Beemocracy">
  <meta itemprop="description" content="a dance-based decentralised consensus model">
  <meta itemprop="image" content="http://ncase.me/bees/images/thumbnail.png">

  <!-- Twitter Card data -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@ncasenmare">
  <meta name="twitter:title" content="Beemocracy">
  <meta name="twitter:description" content="a dance-based decentralised consensus model">
  <meta name="twitter:creator" content="@ncasenmare">
  <meta name="twitter:image" content="http://ncase.me/bees/images/thumbnail.png">

  <!-- Open Graph data -->
  <meta property="og:title" content="Beemocracy">
  <meta property="og:type" content="website">
  <meta property="og:url" con_tent="http://ncase.me/bees">
  <meta property="og:image" content="http://ncase.me/bees/images/thumbnail.png">
  <meta property="og:description" content="a dance-based decentralised consensus model">
  <meta property="og:site_name" content="Beemocracy">

  <!-- CSS -->
  <link href="reset.css" rel="stylesheet" type="text/css">
  <link href="styles.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400|Roboto+Slab" rel="stylesheet">

  <title>Beemocracy – a dance-based decentralised consensus model</title>
  <meta name="description" content="a dance-based decentralised consensus model" />
  <link rel="icon" type="image/png" href="favicon.png">
</head>

<body>

  <div class="page">
    <div class="content">
      <header id="banner">
        <h1>Beemocracy</h1>
        <p class="tagline">a dance-based decentralised consensus model</p>
        <p>created by <strong><a class="link" href="https://www.patreon.com/ncase">nicky</a></strong>, <strong><a class="link" href="https://www.tessera.li/">alison</a></strong>, <strong><a class="link" href="https://daiyi.co/">daiyi</a></strong>, <strong><a class="link" href="http://gokulan.vsco.co/">goki</a></strong>, & <strong><a class="link" href="http://www.bcavello.com/">b!</a></strong></p>
        <!--<p>how a single bee can spread ideas ✨</p>-->
        <!-- It'd be nice to have some kinda ambient/slightly interactive header at the top here -->
      </header>

      <div id="intro">
        <!--<h4>Have you heard these terms?</h4>-->
        <blockquote><ul>
          <li><a class="link" href="https://www.merriam-webster.com/dictionary/queen%20bee">queen bee</a>: A woman who has a dominant or controlling position in a particular group or sphere</li>
          <li><a class="link" href="https://www.merriam-webster.com/dictionary/hive%20mind">hive mind</a>: A notional entity consisting of a large number of people who share their knowledge or opinions with one another, regarded as producing either uncritical conformity or collective intelligence.</li>
        </ul></blockquote>

        <p>Don't let these phrases fool you. Bees have been terribly misrepresented by these stereotypes. In reality, bee decision-making is much more complex than mindlessly following the wills of a singular ruler. In fact, the queen isn't much of a leader at all!</p>
      </div> <!-- closes intro div -->
      <div id="waggle">
        <h2>Dance Dance Democracy</h2>

        <p>Instead, honey bees communicate with one-another to collectively make decisions. And they do this by dancing!</p>
        <!--<h4><a class="link" href="./dance.html">Start dancing!</a></h4>-->


        <div class="inside">
          <div class="hivenote">Click and hold to waggle dance.</div>
          <img src="./images/hexwindow.png" alt="honeycomb border frame">
          <iframe class="playable" src="./dance.html" allowtransparency="true"></iframe>
        </div>

        <p>Sometimes bees have to make important decisions that affect the whole colony like where to move to build a new hive. Scouts investigate the hive site options and dance the directions to their sisters to tell them where to go check out.</p>

        <div class="inside">
          <div class="hivenote2">Direct the bees with your waggle dance.</div>
          <img src="./images/hexwindow2.png" alt="honeycomb border frame">
          <iframe class="playable" src="./dance_direct.html" allowtransparency="true"></iframe>
        </div>

        <p>The honey bee's waggle dance is contains a lot of information. The orientation and duration of the waggle communicates the direction and distance of the potential hive site.</p>

        <!-- WARNING: INSIDE-OUTSIDE VIEW NOT BUILT YET!! -->
        <div class="inside">
          <div class="hivenote">Send 6 scouts to check out the oak tree. (pending)</div>
          <img src="./images/hexwindow.png" alt="honeycomb border frame">
          <iframe class="playable" src="./dance_direct.html" allowtransparency="true"></iframe>
        </div>

      </div> <!-- closes waggle div -->
      <div id="dddemocracy">
        <h2>Dance-Off Decision-Making</h2>

        <p>Not all options are created equal. The bees use their dance-based democracy to decide which site to actually move to for their new hive.</p>

        <div class="note">note: honeybees operate in a "unitary democracy" meaning that all the bees share a common interest.</div>

        <p>Honey bee scouts advocate for specific site locations by repeating their dance for more bees to see. They indicate the quality of the sites they're dancing for with vigor and repetition. The more vigorous repetitions of a bee's dance, the better the site.</p>

        <!-- WARNING: INSIDE-OUTSIDE VIEW NOT BUILT YET!! -->
        <div class="inside">
          <div class="hivenote2">Watch the bee dance-off in action. (pending)</div>
          <img src="./images/hexwindow2.png" alt="honeycomb border frame">
          <iframe class="playable" src="./dance_direct.html" allowtransparency="true"></iframe>
        </div>
      </div> <!-- closes dddemocracy div -->
      <!--  -->
      <!--  Just for your convenience -->
      <div class="note" style="padding: 10px;"><a class="link" href="sliders.html"> >>> Find the optimal bee configuration! <<< </a></div>

    </div> <!-- closes content div -->
  </div> <!-- closes page div -->

  <footer id="footer">thank you for dancing !</footer>
</body>

<!-- Put scripts here! -->

</html>