-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg_api.html
160 lines (141 loc) · 8.66 KB
/
svg_api.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
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>SVG API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans+Condensed:300" rel="stylesheet">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<a class="hidden" href="">Skip to Main Content</a>
<nav>
<li><a href="/">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</nav>
<a class='h1-link' href="/"><h1>Abby Starnes</h1></a>
<p class="tagline">front-end developer</p>
<ul class="links">
<li><a class="" href="https://jsfiddle.net/user/ordette/fiddles"><i class="fa fa-jsfiddle "></i> JSFiddle</a></li>
<li><a class="" href="https://github.com/abbystarnes"><i class="fa fa-github "></i> GitHub</a></li>
<li><a href="https://medium.com/@abbymstarnes/" class=""><i class="fa fa-medium "></i> Blog Posts</a></li>
<li><a href="https://www.linkedin.com/in/abbystarnes" class=""><i class="fa fa-linkedin "></i> LinkedIn</a></li>
</ul>
</div>
</header>
<main>
<div class="wrapper wrapper-max-width">
<h2>SVG Image Generation API</h2>
<article class="project">
<!-- <img class="logo" src="" alt="IBM Analytics Platform Style Guide"> -->
<h3>Technologies</h3>
<ul class='tech-list'>
<li><img class='tech' src="img/technologies/nodejs.png" alt="">
<p>NodeJS</p>
</li>
<li><img class='tech tech-express' src="img/technologies/express.svg" alt="">
<p>Express</p>
</li>
<li><img class='tech' src="img/technologies/heroku.png" alt="">
<p>Heroku</p>
</li>
</ul>
</article>
<article class="project">
<h3>Overview</h3>
<p>This is a Node Express application API deployed to Heroku. It allows users to generate randomized SVG Images based on a given seed value. This is an individual project. I submitted it as my final project for <a href="https://www.edx.org/course/introduction-computer-science-harvardx-cs50x">cs50x Introduction to Computer Science</a>.</p>
<a class='code-link' target="_blank" href="https://frogger-api.herokuapp.com/creature/seed">Try It Out <i class="fa fa-external-link" aria-hidden="true"></i></a>
<p class='link-caption'>(change the 'seed_value' at the end of the url to generate a new image)</p>
<a class='code-link' target="_blank" href="https://github.com/abbystarnes/frogger-api">View Code <i class="fa fa-external-link" aria-hidden="true"></i></a>
</article>
<article class="project">
<h3>Creating SVG Image Components</h3>
<p>I chose to generate SVG images because they are rescalable (vector), support transparency, and are composed of XML, which makes them easy to modify within the API.</p>
<p class="list-title">Steps to Create Components:</p>
<ol class="numbered-list">
<li>Hand-draw 4 sets of eyes, mouths and bodies seperately (confine all drawings to same dimension)</li>
<li>Scan/Photograph drawings & upload</li>
<li>Open Image with Adobe Illustrator (place on same-size canvas for every image)</li>
<li>Live Trace Image in 16 colors</li>
<li>Expand</li>
<li>Ungroup</li>
<li>Clean up Image, deleting background & unwanted paths</li>
<li>Export Image as SVG (check include art board)</li>
<li>Open SVG file in text editor. Remove outer SVG header and footer so that only the image paths and styles remain. Change each style class to be unique to the project directory (or else there will be conflicts when you merge the images
together.)
</li>
</ol>
<div class="screenshots">
<div class="screenshot screenshot-svg">
<img src="img/screenshots/lip1.svg" alt="SVG lip component">
<img src="img/screenshots/lip2.svg" alt="SVG lip component">
<img src="img/screenshots/lip3.svg" alt="SVG lip component">
<img src="img/screenshots/lip4.svg" alt="SVG lip component">
<p class="caption">SVG mouth components.</p>
</div>
<div class="screenshot screenshot-svg">
<img src="img/screenshots/eye1.svg" alt="SVG lip component">
<img src="img/screenshots/eye2.svg" alt="SVG lip component">
<img src="img/screenshots/eye3.svg" alt="SVG lip component">
<img src="img/screenshots/eye4.svg" alt="SVG lip component">
<p class="caption">SVG eye components.</p>
</div>
<div class="screenshot screenshot-svg">
<img src="img/screenshots/body1.svg" alt="SVG lip component">
<img src="img/screenshots/body2.svg" alt="SVG lip component">
<img src="img/screenshots/body3.svg" alt="SVG lip component">
<img src="img/screenshots/body4.svg" alt="SVG lip component">
<p class="caption">SVG body components.</p>
</div>
</div>
</article>
<article class="project">
<h3>Generating SVG Composite Image with Seed Value</h3>
<p class="text">The user can input any seed as a get request parameter. I used seedrandom, a seeded random number generator for JS, to choose SVG component parts based on the user's chosen seed.</p>
<script src="https://gist.github.com/abbystarnes/8e0001e6ef8cf565b2de3e75514ef748.js"></script>
<p class="text">pickAPart() takes a number 1-10 and a part type (mouth, eye or body) and returns the corresponding part version (eg. 'mouth2.svg'). The route '/creature/:seed' takes any seed value as a get request parameter. It then uses seedrandom to
generate 3 numbers based on the given seed. pickAPart() is then called with each number and corresponding part type. The resulting parts are concatenated into one long string. This string is written to a temporary SVG file. Then the
request responds, returning the SVG string to the user.</p>
</article>
<article class="project">
<h3>Walk Through Screencast for cs50x</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/3pybnqueeVg" frameborder="0" allowfullscreen></iframe>
</article>
</div>
</main>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function() {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = 'https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>