-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
148 lines (124 loc) · 5.89 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
148
<!doctype html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6YTG4SPZ6V"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-6YTG4SPZ6V');
</script>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Space colonization (2D) experiments in JavaScript</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Facebook OG -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://jasonwebb.github.io/2d-space-colonization-experiments">
<meta property="og:title" content="Space colonization (2D) experiments in JavaScript">
<meta property="og:image" content="https://jasonwebb.github.io/2d-space-colonization-experiments/images/social-media-preview.png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="640">
<meta property="og:description" content="Series of visual experiments in JavaScript exploring the topic of space colonization as a method for generating interesting 2D forms.">
<meta property="og:locale" content="en_US">
<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@jasonwebb">
<meta name="twitter:title" content="Space colonization (2D) experiments in JavaScript">
<meta name="twitter:description" content="Series of visual experiments in JavaScript exploring the topic of space colonization as a method for generating interesting 2D forms.">
<meta name="twitter:image" content="https://jasonwebb.github.io/2d-space-colonization-experiments/images/social-media-preview.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<link rel="stylesheet" href="bulma.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Space colonization (2D) experiments in JavaScript</h1>
<div class="by-line">
by Jason Webb
<a href="https://jasonwebb.io" target="_blank">
<span class="fas fa-link" aria-hidden="true"></span>
<span class="sr-only">Portfolio</span>
</a>
<a href="https://github.com/jasonwebb" target="_blank">
<span class="fab fa-github" aria-hidden="true"></span>
<span class="sr-only">Github profile</span>
</a>
<a href="https://twitter.com/jasonwebb" target="_blank">
<span class="fab fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter profile</span>
</a>
<a href="https://www.instagram.com/zenwebb/" target="_blank">
<span class="fab fa-instagram" aria-hidden="true"></span>
<span class="sr-only">Instagram profile</span>
</a>
</div>
<div class="content">
<p>Space colonization is a process for iteratively growing networks of organic branches based on the distribution of attractors to which the branches are attracted. <a href="http://algorithmicbotany.org/papers/venation.sig2005.pdf">Originally described</a> (PDF) by <a href="http://adam.runions.net/" target="_blank">Adam Runions</a> and collaborators at the <a href="http://algorithmicbotany.org/" target="_blank">Algorithmic Botany group</a> at the University of Calgary, this system can be used to simulate the growth of leaf venation patterns and tree-like structures, as well as many other vein-like systems like Gorgonian sea fans, circulatory systems, root systems, and more.</p>
<div class="buttons">
<a href="https://medium.com/@jason.webb/space-colonization-algorithm-in-javascript-6f683b743dc5" class="button is-info" target="_blank">
<span class="fab fa-medium-m" aria-hidden="true"></span>
Medium article
</a>
<a href="https://github.com/jasonwebb/2d-space-colonization-experiments" class="button is-light" target="_blank">
<span class="fab fa-github" aria-hidden="true"></span>
Github repository
</a>
</div>
<p style="font-style: italic">Check out the <a href="https://github.com/jasonwebb/2d-space-colonization-experiments" target="_blank">Github repository</a> for a more in-depth explanation of the algorithm along with a comprehensive list of both creative and technical references on the topic.</p>
</div>
</div>
<ul class="experiments-list">
<li>
<a href="experiments/basic/" class="has-border">
<img src="images/basic-screenshot.png" alt="">
<div class="overlay">
<div class="title">Basic</div>
</div>
</a>
</li>
<li>
<a href="experiments/bounds/">
<img src="images/bounds-screenshot.png" alt="">
<div class="overlay">
<div class="title">Bounds</div>
</div>
</a>
</li>
<li>
<a href="experiments/obstacles/" class="is-inverted">
<img src="images/obstacles-screenshot.png" alt="">
<div class="overlay">
<div class="title">Obstacles</div>
</div>
</a>
</li>
<li>
<a href="experiments/marginal-growth/" class="is-inverted">
<img src="images/marginal-growth-screenshot.png" alt="">
<div class="overlay">
<div class="title">Marginal Growth</div>
</div>
</a>
</li>
<li>
<a href="experiments/painting/" class="is-inverted">
<img src="images/painting-screenshot.png" alt="">
<div class="overlay">
<div class="title">Painting</div>
</div>
</a>
</li>
<li>
<a href="experiments/from-images/" class="is-inverted">
<img src="images/from-images-screenshot.png" alt="">
<div class="overlay">
<div class="title">Images</div>
</div>
</a>
</li>
</ul>
</body>
</html>