-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgraphics5.html
More file actions
130 lines (96 loc) · 9.6 KB
/
Copy pathgraphics5.html
File metadata and controls
130 lines (96 loc) · 9.6 KB
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
<!DOCTYPE html>
<html >
<head>
<!-- Site made with Mobirise Website Builder v5.6.11, https://mobirise.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v5.6.11, mobirise.com">
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image:src" content="">
<meta property="og:image" content="">
<meta name="twitter:title" content="Assignment 4">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/logo2-1.png" type="image/x-icon">
<meta name="description" content="Website Builder Description">
<title>Assignment 4</title>
<link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/dropdown/css/style.css">
<link rel="stylesheet" href="assets/socicon/css/styles.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"></noscript>
<link rel="preload" as="style" href="assets/mobirise/css/mbr-additional.css"><link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
</head>
<body>
<section class="menu cid-tbFDK3AbCF" once="menu" id="menu1-78">
<nav class="navbar navbar-expand beta-menu navbar-dropdown align-items-center navbar-fixed-top navbar-toggleable-sm">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
<div class="menu-logo">
<div class="navbar-brand">
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-dropdown nav-right navbar-nav-top-padding" data-app-modern-menu="true"><li class="nav-item">
<a class="nav-link link text-white text-primary display-4" href="index.html">Work</a>
</li><li class="nav-item"><a class="nav-link link text-white text-primary display-4" href="about-me.html">About Me</a></li>
<li class="nav-item">
<a class="nav-link link text-white text-primary display-4" href="assets/files/Tyler-SprowlResume.pdf">Resume</a>
</li></ul>
</div>
</nav>
</section>
<section class="mbr-section content4 cid-t4Jotje2uh" id="content4-6v">
<div class="container">
<div class="media-container-row">
<div class="title col-12 col-md-8">
<h2 class="align-center pb-3 mbr-fonts-style display-5">
Assignment 4</h2>
</div>
</div>
</div>
</section>
<section class="mbr-section article content12 cid-t4Jpn4ncQy" id="content12-70">
<div class="container">
<div class="media-container-row">
<div class="mbr-text counter-container col-12 col-md-8 mbr-fonts-style display-7">
<div><br></div><div><strong>Preset 1: Pointillism</strong><span style="font-size: 1rem;"> </span></div><div><span style="font-size: 1rem;">-------------------------------</span></div><div><span style="font-size: 1rem;">Preset 1 was just the result of me messing with the variables, when I found something that started turning all the agents into single dots. After that I kept experimenting, resulting in Pointillism. Essentially it freezes any current design in place, shattering it into clusters of individual agents. The best part is that, while it looks static, looking closer you can still see microcosms of agents shifting, clustering into larger trails, which gives the whole simulation this weird shaky feeling.</span></div><div><span style="font-size: 1rem;"><br></span></div><div><span style="font-size: 1rem;"><strong>Preset 2: Madness</strong></span></div><div><span style="font-size: 1rem;"><strong>-------------------------------</strong></span></div><div><span style="font-size: 1rem;">I've been into reading a lot of cosmic horror recently, and Madness is a reflection of that. The dark red helps keep it more hidden in the dark, and the slow languid trails of agents help add a somewhat fascinating display. My favorite part of this preset is how the simulation moves along just slow enough that you're never quite sure how much stuff is changing until you look away and look back and see the completely different shapes.</span></div><div><span style="font-size: 1rem;"><strong><br></strong></span></div><div><span style="font-size: 1rem;"><strong>Preset 3: Spiderweb</strong></span></div><div><span style="font-size: 1rem;"><strong>-------------------------------
</strong></span></div><div>Spiderweb is a simpler one, I had been playing around with large sensor distances and low decay and i noticed a lot of paths beginning to form and linger. Applying this to a larger field resulted in these beautiful long crisscrossing strands forming before slowly condensing into a fewer ones that were more interesting, sweeping and branching, trading agents between them, constantly shifting and moving between these solid paths that themselves were ever so slowly shifting.</div><div><span style="font-size: 1rem;"><strong><br></strong></span></div><div><span style="font-size: 1rem;"><strong>Preset 4: Flesh</strong></span></div><div><span style="font-size: 1rem;"><strong>-------------------------------</strong></span></div><div>This preset stems again from the cosmic horror interest, combined with my natural desire to try and make things as chaotic as possible. By increasing transparency, allowing more rotation, and making each agent larger, the result is a screen filled with agents, only small gaps of black poking through. Making it tan just realized its full potential: if you look at the piece as a whole, let your eyes slide out of focus, it almost looks like the pulsing, writhing flesh of some massive creature.</div><div><br></div><div> - <a href="https://tsprowl.github.io/project4.html" class="text-secondary text-primary" target="_blank">Project link</a></div><div> - <a href="https://github.com/tsprowl/tsprowl.github.io/blob/master/project4.html" class="text-secondary text-primary" target="_blank">Repo link</a></div>
</div>
</div>
</div>
</section>
<section class="cid-t4JotjB2uY" id="social-buttons2-6x">
<div class="container">
<div class="media-container-row">
<div class="col-md-8 align-center">
<div class="social-list pl-0 mb-0">
<a href="https://twitter.com/SprylerOwl" target="_blank">
<span class="px-2 mbr-iconfont mbr-iconfont-social socicon-twitter socicon" style="color: rgb(255, 51, 102); fill: rgb(255, 51, 102);"></span>
</a>
<a href="mailto:tsprowl25@hotmail.com">
<span class="px-2 mbr-iconfont mbr-iconfont-social socicon-mail socicon" style="color: rgb(255, 51, 102); fill: rgb(255, 51, 102);"></span>
</a>
<a href="https://instagram.com/mobirise" target="_blank">
</a>
<a href="https://www.youtube.com/c/mobirise" target="_blank">
</a>
<a href="https://www.behance.net/Mobirise" target="_blank">
</a>
</div>
</div>
</div>
</div>
</section><section class="display-7" style="padding: 0;align-items: center;justify-content: center;flex-wrap: wrap; align-content: center;display: flex;position: relative;height: 4rem;"><a href="https://mobiri.se/2608318" style="flex: 1 1;height: 4rem;position: absolute;width: 100%;z-index: 1;"><img alt="" style="height: 4rem;" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></a><p style="margin: 0;text-align: center;" class="display-7">Designed with Mobirise ‌</p><a style="z-index:1" href="https://mobirise.com/html-builder.html">HTML Builder</a></section><script src="assets/popper/popper.min.js"></script> <script src="assets/web/assets/jquery/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script> <script src="assets/tether/tether.min.js"></script> <script src="assets/smoothscroll/smooth-scroll.js"></script> <script src="assets/sociallikes/social-likes.js"></script> <script src="assets/dropdown/js/nav-dropdown.js"></script> <script src="assets/dropdown/js/navbar-dropdown.js"></script> <script src="assets/touchswipe/jquery.touch-swipe.min.js"></script> <script src="assets/theme/js/script.js"></script>
</body>
</html>