1<!doctype html> 2<html lang="en-US"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 6 <!-- Begin Jekyll SEO tag v2.8.0 --> 7<title>Jasmine Otto | Ph.D. Computational Media, UC Santa Cruz</title> 8<meta name="generator" content="Jekyll v3.10.0" /> 9<meta property="og:title" content="Jasmine Otto" /> 10<meta property="og:locale" content="en_US" /> 11<meta name="description" content="Ph.D. Computational Media, UC Santa Cruz" /> 12<meta property="og:description" content="Ph.D. Computational Media, UC Santa Cruz" /> 13<link rel="canonical" href="https://jazztap.github.io/" /> 14<meta property="og:url" content="https://jazztap.github.io/" /> 15<meta property="og:site_name" content="Jasmine Otto" /> 16<meta property="og:type" content="website" /> 17<meta name="twitter:card" content="summary" /> 18<meta property="twitter:title" content="Jasmine Otto" />
19<script type="application/ld+json"> 20{"@context":"https://schema.org","@type":"WebSite","description":"Ph.D. Computational Media, UC Santa Cruz","headline":"Jasmine Otto","name":"Jasmine Otto","url":"https://jazztap.github.io/"}</script>
20 21<!-- End Jekyll SEO tag --> 22 23 24 <link rel="shortcut icon" href="/assets/cartographer.ico"> 25 <link rel="icon" sizes="16x16 32x32 64x64" href="/assets/cartographer.ico"> 26 <link rel="stylesheet" href="/assets/css/style.css?v=b52b8133fab20ac8c9945f708cc55a8f4ee2f9ae"> 27 28 <meta name="viewport" content="width=device-width"> 29 <!--[if lt IE 9]> 30
30<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
30 31 <![endif]--> 32 </head> 33 <body> 34 <div class="wrapper"> 35 <!-- https://jazztap.github.io --> 36 <a href="/"><h1 style="display:inline">Jasmine Otto</h3></a> 37 <span class="view"> 38 <a href="#cv">[CV]</a> 39 <a target="_blank" href="https://scholar.google.com/citations?user=CQyk9V8AAAAJ"><img src="/assets/GoogleScholar-black.svg" width="25" height="25" /></a> 40 <a target="_blank" href="https://github.com/JazzTap"><img src="/assets/Github-black.svg" width="25" height="25" /></a> 41 <a target="_blank" href="https://twitter.com/jatazak"><img src="/assets/Twitter-black.svg" width="25" height="25" /></a> 42 </span> 43 <p> Ph.D. Computational Media, UC Santa Cruz </p> 44 <!-- </header> <section> --> 45 46 <div class="post-content"> 47 <p>Jasmine Otto is a visualization developer who designs novel intelligent tools and interfaces, by working closely with domain experts. Her work is published in selective venues including IEEE VIS and AAAI AIIDE. She holds a PhD in Computational Media from the Design Reasoning Lab at UC Santa Cruz, and has worked for NASA JPL on robotics operations scheduling.</p> 48</div> 49 50<div style="font-size: 26px; text-align: center;"> 51 <p>projects | <a href="writes">blog</a></p> 52</div> 53 54<style> 55/* https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585 */ 56 57.container { 58 display: grid; 59 grid-template-columns: 20px 1fr 20px; 60} 61.container > * { 62 grid-column: 2 / -2; 63} 64.container > .full { 65 grid-column: 1 / -1; 66 overflow-x: scroll; 67} 68 69/* https://stackoverflow.com/a/54410301 */ 70.container > .full::-webkit-scrollbar {
71 width: 0px; 72 background: transparent; 73} 74.container > .full { 75 scrollbar-width: none; /* Firefox */ 76 -ms-overflow-style: none; /* IE 10+ */ 77} 78 79.container > h3 { 80 margin-top: 10px; 81 margin-left: -5vw; 82} 83.container > h3:after { 84 content: ''; 85 display: block; 86 border-bottom: 1px solid black; 87} 88 89.filmstrip { 90 display: grid; 91 grid-gap: 20px; 92 /* grid-auto-flow: column; 93 grid-template-rows: auto auto; */ 94 grid-template-columns: repeat(6, calc(100% - 40px) ); 95} 96@media (min-width: 480px) { 97 .filmstrip { 98 grid-template-columns: repeat(6, calc(50% - 40px) ); 99 } 100} 101@media (min-width: 880px) { 102 .filmstrip { 103 grid-template-columns: repeat(6, calc(33% - 40px) ); 104 } 105} 106@media (min-width: 1480px) { 107 .filmstrip { 108 grid-template-columns: repeat(6, calc(25% - 40px) ); 109 } 110} 111 112.filmstrip a { 113 text-align: center; 114} 115.filmstrip img { 116 height: 170px; 117 width: 400px; 118 object-fit: cover; 119} 120 121/* https://stackoverflow.com/a/19903659 */ 122 123.content ul { 124 list-style:none; 125 padding:0; 126 text-align:center; 127 overflow:auto; 128} 129.content ul > li { 130 margin-bottom:15px; 131 display: block; 132 clear: both; 133 background: #eee; 134 padding: 15px 5px; 135} 136 137/* https://codepen.io/markcaron/pen/RVvmaz */ 138 139.accordion > input[type="checkbox"] { 140 position: absolute; 141 left: -100vw; 142} 143.accordion .content { 144 overflow-y: hidden; 145 height: 0; 146} 147.accordion > input[type="checkbox"]:checked ~ .content { 148 height: auto; 149 overflow: visible; 150} 151.accordion label { 152 display: block; 153 text-align: center; 154} 155.accordion label:hover { 156 font-weight: bold; 157 cursor: pointer; 158} 159</style> 160
161<script> 162 // enable horizontal scrolling within filmstrips 163 // https://stackoverflow.com/a/61930273 164 const target = document.querySelectorAll('.filmstrip') 165 166 target.forEach((el) => { 167 el.addEventListener('wheel', event => { 168 const toLeft = event.deltaY < 0 && el.scrollLeft > 0 169 const toRight = event.deltaY > 0 && el.scrollLeft < el.scrollWidth - el.clientWidth 170 if (toLeft || toRight) { 171 event.preventDefault() 172 el.scrollLeft += event.deltaY 173 } 174 }) 175 }) 176</script>
176 177 178<div class="container"> 179 180 <h3 id="vis">data visualization</h3> 181 <div class="filmstrip full"> 182<div class="accordion"> 183 <input type="checkbox" id="schedule" /> 184 <label for="schedule"> 185 <img src="assets/blog/dashboard-thumb.png" /> 186 <p><strong>2022 |</strong> MarsIPAN</p> 187 </label> 188 <div class="content"> 189 190 <p>We created the MarsIPAN (Mars Interactive Pass Allocation Navigator) schedule, and a companion dashboard for comparing allocations. Operations planners are using these visualizations to assess both operational efficiency and staffing requirements across many possible scenarios.</p> 191 192 <ul> 193 <li><a href="/research/10950091.pdf">JT Otto, M Khurana, N Deutsch, BPS Donitz, O Elek, and S Davidoff. MarsIPAN: Optimization and Negotiations in Mars Sample Return Scheduling Coordination. IEEE Computer Graphics and Applications, 2025</a>.</li> 194 </ul> 195 196 <p>See also our <a href="https://datavis.caltech.edu/projects/marsipan/">Data to Discovery 2021 project page</a>. With thanks to the DTD team and our JPL stakeholders.</p> 197 198 </div> 199</div> 200 201<div class="accordion"> 202 <input type="checkbox" id="saddle" /> 203 <label for="saddle"> 204 <img src="assets/blog/canvas_boundary.png" /> 205 <p><strong>IEEE VISAP 2019 |</strong> intuition and saddle points</p> 206 </label> 207 <div class="content"> 208 <p><strong>Stability analysis</strong> of style transfer brushes trained on famous works of data art, in the form of a photo editor. Combines <a href="https://ml5js.org/reference/api-StyleTransfer/">p5.js style transfer</a> with <a href="https://github.com/d3/d3-brush">d3-brush selections</a>.</p> 209 210 <p><a href="https://mahikadubey.github.io/Canvas-Style-Transfer/">Runs in browser</a>. <a href="https://github.com/mahikadubey/Canvas-Style-Transfer">Open source code</a>.</p> 211 212 <ul> 213 <li>Dubey, M., Otto, J., & Forbes, A. G. (2019). Data Brushes: Interactive Style Transfer for Data Art. 2019 IEEE VIS Arts Program (VISAP), 1â9. <a href="https://doi.org/10.1109/VISAP.2019.8900858">[DOI]</a></li> 214 </ul> 215 </div> 216</div> 217<div class="accordion"> 218 <input type="checkbox" id="skewer" /> 219 <label for="skewer"> 220 <img src="assets/blog/IGM-Vis_Coherence.png" /> 221 <p><strong>EuroVis 2019 |</strong> <br />intergalactic skewers</p> 222 </label> 223 <div class="content"> 224 <p><strong>Spatial analysis</strong> of intergalactic medium absorption, juxtaposing skewer absorption data with distant stars and other emissive bodies.</p> 225 226 <p>
226<a href="https://creativecodinglab.github.io/Intergalactic/intergalactic.html">Runs in browser</a>. <a href="https://github.com/CreativeCodingLab/Intergalactic">Open source code</a>.</p> 227 228 <ul> 229 <li>Burchett, J. N., Abramov, D., Otto, J., Artanegara, C., Prochaska, J. X., & Forbes, A. G. (2019). IGM-Vis: Analyzing Intergalactic and Circumgalactic Medium Absorption Using Quasar Sightlines in a Cosmic Web Context. Computer Graphics Forum, 38(3), 491â504. <a href="https://doi.org/10.1111/cgf.13705">[DOI]</a></li> 230 </ul> 231 </div> 232</div> 233<div class="accordion"> 234 <input type="checkbox" id="kappa" /> 235 <label for="kappa"> 236 <img src="assets/blog/rulevis_teaser.png" style="object-position: 0% 0%;" /> 237 <p><strong>IEEE Vis 2019 |</strong> kappavis, 2019</p> 238 </label> 239 <div class="content"> 240 <p><strong>Visual rule editor</strong> for the KappaSim language, relating functional sites on macro-molecular agents through the formation and destruction of bonds.</p> 241 242 <p>
242<a href="https://creativecodinglab.github.io/RuleVis/">Runs in browser</a>. <a href="https://github.com/CreativeCodingLab/RuleVis">Open source code</a>.</p> 243 244 <ul> 245 <li>Abramov, D., Otto, J., Dubey, M., Artanegara, C., Boutillier, P., Fontana, W., & Forbes, A. G. (2019). RuleVis: Constructing Patterns and Rules for Rule-Based Models. 2019 IEEE Visualization Conference (VIS), 191â195. <a href="https://doi.org/10.1109/VISUAL.2019.8933596">[DOI]</a></li> 246 </ul> 247 </div> 248</div> 249 </div> <!-- end filmstrip --> 250 251 <h3 id="sci">interactive models</h3> 252 <div class="filmstrip full"> 253<div class="accordion"> 254 <input type="checkbox" id="skein" /> 255 <label for="skein"> 256 <img src="assets/blog/dendryscope-thumb.png" /> 257 <p><strong>AIIDE 2023 |</strong> DendryScope</p> 258 </label> 259 <div class="content"> 260 <p>Playtesting support via <strong>interactive static analysis</strong> of routes in quality-based narrative games. Introduces the skein, an interactive heatmap of playtraces, powered by ASP. <a href="/DendryScope">Try it online</a>.</p> 261 262 <ul> 263 <li>Otto, J., Chen, A., & Smith, A. M. (2023). DendryScope: Narrative Designer Support via Symbolic Analysis. <a href="/dendry-paper/2023_AIIDE_Dendryscope_Camera_Ready.pdf">[preprint]</a></li> 264 </ul> 265 </div> 266</div> 267 268<div class="accordion"> 269 <input type="checkbox" id="phcpy" /> 270 <label for="phcpy"> 271 <img src="assets/blog/2017-03-20 12s.gif" /> 272 <p><strong>SciPy 2019 |</strong> steady state locus of a nonlinear system</p> 273 </label> 274 <div class="content"> 275 <p>Application of phcpy to the <strong>real-time numerical solution</strong> of steady states of nonlinear dynamical systems, as found in synthetic biology, kinematics, and other design spaces. With <a href="http://homepages.math.uic.edu/~jan/">Jan Verschelde</a>.</p> 276 277 <p><a href="https://github.com/JazzTap/mcs563/tree/master/Apollonius">Open source code</a> to interactive solution of the Apollonius circle problem.</p> 278 279 <ul> 280 <li>Otto, J., Forbes, A., & Verschelde, J. (2019). Solving Polynomial Systems with phcpy. 62â68. <a href="https://doi.org/10.25080/Majora-7ddc1dd1-009">[DOI]</a></li> 281 </ul> 282 </div> 283</div> 284 285<div class="accordion"> 286 <input type="checkbox" id="isocline" /> 287 <label for="isocline"> 288 <img src="assets/blog/isocline_rps.gif" style="object-position: 50% 60%;" /> 289 <p>2018 | limit cycles and<br />lizard mating dynamics</p> 290 </label> 291 <div class="content"> 292 <p><strong>Explorable explanation</strong> of alternative mating strategies in side-blotched lizards. Evolutionary stable states are determined by physiology and local climate. With the <a href="https://web.pbsci.ucsc.edu/research/eeb/sinervo/index.php/en/home/#">Sinervo Lab</a>.</p> 293 294 <ul> 295 <li><a href="https://observablehq.com/@jazztap/rps-matrix-to-isoclines">isocline browser widget</a> on Observable</li> 296 </ul> 297 298 <p><img src="/assets/blog/isocline_lizards.gif" alt="" /></p> 299 </div> 300</div> 301<div class="accordion"> 302 <input type="checkbox" id="flocking" /> 303 <label for="flocking"> 304 <img src="assets/blog/flocking.png" /> 305 <p>2018 | collective motion as cell fate</p> 306 </label> 307 <div class="content"> 308 <p><strong>Topological data analysis</strong> of spatial effects in collective motion. Builds on prior work with agent-based systems whose population dynamics approach a dynamical system.</p> 309 310 <ul> 311 <li><a href="https://github.com/JazzTap/collective-motion">data notebook</a> on GitHub</li> 312 </ul> 313 314 <p><img src="/assets/blog/spatial_effects.png" alt="" /></p> 315 </div> 316</div> 317 </div> <!-- end filmstrip --> 318 319 <h3 id="eis">expressive computation</h3> 320 <div class="filmstrip full"> 321<div class="accordion"> 322 <input type="checkbox" id="zine" /> 323 <label for="zine"> 324 <img src="assets/blog/paints/ius_.jpg" /> 325 <p>2021 | ira et ius</p> 326 </label> 327 <div class="content"> 328 <p>âira et iusâ, 16p. self-illustrated lyrical zine. An apocalypse / unveiling, or the end(s) of history.</p> 329 330 <ul> 331 <li><a href="https://jazztap.itch.io/ira-et-ius">pdf</a> on itch.io</li> 332 </ul> 333 334 <p><img src="/assets/blog/paints/id_.png" alt="" /></p> 335 336 </div> 337</div> 338 339<div class="accordion"> 340 <input type="checkbox" id="lifeworlds" /> 341 <label for="lifeworlds"> 342 <img src="assets/blog/splot.png" /> 343 <p><strong>Roguelike Celebration 2021</strong> | druid game</p> 344 </label> 345 <div class="content"> 346 <p>In âCyclic Plot Generation in a Mixed-Initiative Narrative Instrumentâ, I compared tarot readings with filmic cuts and tech trees with cyclic dungeon generation, in order to explore (semi) autonomous plot generation.</p> 347 348 <ul> 349 <li><a href="https://www.youtube.com/watch?v=NjIDVIIg1lY">15min talk</a> archived on YouTube.</li> 350 </ul> 351 352 <p>Ultimately, this yields an approach to the narrative instrument whose substrate is an ordering of scenes. I did my best to reduce my own authorial burden, but have yet to finish the game.</p> 353 354 <p><img src="/assets/blog/druid_game.png" alt="Splot graph" /></p> 355 356 </div> 357</div> 358 359<div class="accordion"> 360 <input type="checkbox" id="ccw" /> 361 <label for="ccw"> 362 <img src="assets/blog/pipeline.png" /> 363 <p><strong>Casual Creators 2020 |</strong> avatar editors</p> 364 </label> 365 <div class="content"> 366 <p>Case study of a software instrument for avatar creation. Or, a guided tour of latent space.</p> 367 368 <p><a href="https://twitter.com/GalaxyKate/status/1303362289588936705">thread</a>, <a href="https://mkremins.github.io/casual-creators-workshop/papers/ICCC20_paper_197.pdf">paper</a>.</p> 369 370 <ul> 371 <li>Otto, J. & Forbes, A. G. (2020). Entering the Design Space of Digital Portraiture: A Case Study in Avatar Creation Tools.</li> 372 </ul> 373 </div> 374</div> 375 376<div class="accordion"> 377 <input type="checkbox" id="montage" /> 378 <label for="montage"> 379 <img src="assets/blog/card.jpg" /> 380 <p><strong>ELO 2020 |</strong> exul mater</p> 381 </label> 382 <div class="content"> 383 <p>An interactive oracle deck developed over the course of my first year as a games scholar, or something of the sort. <a href="/exul-mater">Playable online</a>.</p> 384 385 <ul> 386 <li>Otto, J. & Forbes, A. G. (2020). <a href="https://stars.library.ucf.edu/elo2020/asynchronous/proceedingspapers/12/">Procedural Montage: A Design Trace of Reflection and Refraction.</a> Proceedings of the Electronic Literature Organization Conference 2020.</li> 387 </ul> 388 389 <p><a href="/exul-mater"><img src="/assets/blog/diffraction.gif" alt="" /></a></p> 390 </div> 391</div> 392 393 </div> <!-- end filmstrip --> 394 395</div> 396 397 398 399 <div class="overlay"> 400 <div id="cv" style="text-align: center;"> 401 <a href="#_">â</a> 402 <br/> 403 <a href="/cv single.pdf">direct link</a> 404 <object data="/cv single.pdf" type="application/pdf" style="width: 80vw; height: 65vw;"> 405 <embed src="/cv single.pdf" type="application/pdf" /> 406 </object> 407 </div> 408 409 <a class="backdrop" href="#_"></a> 410 </div> 411 412 <!-- </section> <footer> --> 413 <p><small>Theme derived from <a target="_blank" href="https://github.com/pages-themes/minimal">Minimal</a> (orderedlist) for Jekyll with <a target="_blank" href="https://dribbble.com/shots/2235197-50-Free-Flat-Icons-Sketch-Illustrator">flat icons</a> (alexisdoreau).</small></p> 414 </div> 415
415<script src="/assets/js/scale.fix.js"></script>
415 416 417 </body> 418</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.