forked from in3rsha/bitcoinrain
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (128 loc) · 7.54 KB
/
index.html
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
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bitcoin Rain | Live Transaction Rate Visualisation</title>
<style>
@font-face {
font-family: 'whitrabt';
src: url('assets/whitrabt.ttf') format('truetype');
}
body {margin:0; font-family: Sans; background-color:#ddd; line-height:1.5em;}
div#warning-message {display: none; margin:8px; font-size:36px;}
@media only screen and (orientation:portrait){
div#sketch { display:none; }
div#warning-message { display:block; }
}
@media only screen and (orientation:landscape){
div#warning-message { display:none; }
}
div#about {display: none; margin:8px;}
div#about h1 {margin-top:56px;}
div#about h2 {margin-top:1.8em;}
div#about h3 {margin-top:1.6em;}
button {
background-color: #222;
border: 1px solid #555;
color: #999;
padding: 4px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
outline: 0px;
}
button:hover { background-color:#111; color:#aaa; outline: 0px; }
button:focus { outline: 0px; }
button:active { background-color: #222; color:#999; outline: 0px; }
button::-moz-focus-inner {
border: 0;
}
img.twitter {
position: absolute;
top: 12px;
right: 12px;
}
div#donate {text-align:center; font-size:16px; font-family:'whitrabt', monospace; line-height:22px; width:400px; display:none;}
div#donate::selection {color: gold; background-color:#555;}
</style>
<script src="assets/js/p5.min.js"></script>
<script src="assets/js/p5.dom.min.js"></script>
<script src="Mempool.js"></script>
<script src="Blockchain.js"></script>
<script src="Ball.js"></script>
<script src="Block.js"></script>
<script src="Donations.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="sketch"></div>
<div id="warning-message">
Rotate me! This website works best in landscape mode.
</div>
<button id="button">about</button>
<a href="https://twitter.com/in3rsha" target="_blank"><img src="twitter.png" class="twitter" /></a>
<div id="about">
<h1>BitcoinRain.io</h1>
<p>This website is a live visualisation of the transactions and blocks received by a node on the bitcoin network.</p>
<!--
<p>The <a href="http://learnmeabitcoin.com/guide/nodes">node</a> is connected to other nodes on the <a href="http://learnmeabitcoin.com/guide/network">bitcoin network</a> and is receiving transactions from them:</p>
-->
<ul>
<li><strong style="color:#00729C;">Blue Raindrop</strong> = Transaction</li>
<li><strong style="color:#B700FF;">Purple Raindrop</strong> = <a href="http://learnmeabitcoin.com/faq/segregated-witness">Segwit</a> Transaction</li>
</ul>
<p>New transactions this node receives enter its <strong>memory pool</strong>. They are held in the node's memory for up to 72 hours.</p>
<p>The node also recevies <strong>blocks</strong> (every 10 minutes on average). A <a href="http://learnmeabitcoin.com/guide/blocks">block</a> takes transactions from the <a href="http://learnmeabitcoin.com/glossary/memory-pool">memory pool</a> and adds them them to the <a href="http://learnmeabitcoin.com/guide/blockchain">blockchain</a>.</p>
<h3>Keyboard</h3>
<ul>
<li><strong>Left/Right Arrow</strong> = Change Raindrop Size (between Bytes and Transaction Value)</li>
<li><strong>Up/Down Arrow</strong> = Change Currency</li>
<li><strong>Enter</strong> = Show/Hide Labels <em>(visualisation is a bit faster without labels)</em></li>
</ul>
<h2 id="about-me">About Me</h2>
<p>My name is Greg Walker, an this is my first attempt at real-time visualisation. I'm also currently working on <a href="http://learnmeabitcoin.com">learnmeabitcoin.com</a>, which is a website with <em>simple documentation</em> for bitcoin, including a rudimentary <a href="http://learnmeabitcoin.com/browser/">blockchain explorer</a>. I occassionally like to <a href="https://www.thepokerbank.com/bitcoin/">play poker with bitcoin</a> in my spare time.</p>
<p>Two things I like:</p>
<ul>
<li>Comments for improvements: <code style="font-size:16px; font-weight:bold; color:darkblue;">greg[at]learnmeabitcoin[dot]com</code> or <a href="https://twitter.com/in3rsha">Twitter</a></li>
<li>Donations for beer: <code style="font-size:16px; font-weight:bold; color:darkgreen;">1RainRzqJtJxHTngafpCejDLfYq2y4KBc</code> (donations are highlighted in the visualisation)</li>
</ul>
<h2 id="faq">FAQ:</h2>
<h3 id="whats-the-use-of-this">What's the use of this?</h3>
<p>It's cool to watch bitcoin transactions as they're happening. You can see the current transaction rate, as well as how much money is being moved per second.</p>
<p>Personally, I use it to watch and wait for the next block to get mined.</p>
<h3>Are these transactions really live?</h3>
<p>Yes. I do add a tiny delay between transactions to create a smoother rain effect, but aside from that this website is showing every new transaction on the bitcoin network as my node receives it.
<h3 id="why-do-transactions-bounce-off-the-memory-pool">Why do transactions bounce off the memory pool?</h3>
<p>Because I thought it would look cool, so it doesn't symbolise anything. However, I did make transactions <em>bouncier</em> if they're moving a high quantity of bitcoins in a small number of bytes of <a href="http://learnmeabitcoin.com/glossary/transaction-data">transaction data</a> (i.e. more "efficient").</p>
<h3 id="wheres-the-code-for-this-website">Where's the code for this website?</h3>
<ul>
<li><a href="https://github.com/in3rsha/bitcoinrain">https://github.com/in3rsha/bitcoinrain</a></li>
</ul>
<p>To summarize how this website works:</p>
<ul>
<li>I'm using <a href="https://www.ruby-lang.org/en/">Ruby</a> to connect to my node so I can receive all the transactions and blocks it is relaying.</li>
<ul>
<li>I also send the node <a href="https://en.bitcoin.it/wiki/API_reference_%28JSON-RPC%29">RPC requests</a> to get extra information from it.</li>
</ul>
<li>I'm using <a href="https://github.com/joewalnes/websocketd">websocketd</a> turn this stream of data in to a WebSocket server.</li>
<li>I use Javascript in the browser to read from the websocket, and <a href="https://p5js.org/">p5.js</a> to create the visualisation.</li>
</ul>
<h3>And where's that live websocket feed?</h3>
<p>Here: <a href="http://bitcoinrain.io:8082">http://bitcoinrain.io:8082</a></p>
<p>Don't use it for anything serious though as I'm likely to change it.</p>
<h2 id="credits">Credits</h2>
<ul>
<li>Thanks to <a href="https://www.youtube.com/user/shiffman">Daniel Shiffman</a> for the p5.js tutorials.</li>
<li>The font is <a href="https://www.dafont.com/white-rabbit.font">White Rabbit</a> by Matthew Welch.
<li>I found this simple <a href="https://www.webpagefx.com/web-design/color-picker/">color picker</a> particularly handy.</li>
<li><a href="http://www.bitlisten.com/">BitListen.com</a> was an inspiration for working with live bitcoin data in the browser.</li>
</ul>
<h2 id="links">Links</h2>
<ul>
<li>To see the size of the memory pool over time, check out <a href="https://jochen-hoenicke.de/queue/">Johoe's Bitcoin Mempool Size Statistics</a>.
<li>Jameson Lopp has a list of other cool <a href="https://lopp.net/bitcoin.html">bitcoin resources</a> that's worth checking out.</li>
</ul>
</div>
<div id="donate">1RainRzqJtJxHTngafpCejDLfYq2y4KBc</div>
</body>
</html>