lmmx/2020-viz

2020-viz

From 2020, collecting interesting case studies in graphics and/or problems to be solved, in particular replicating examples found "in the wild".

Graphics (as opposed to plots) are not my strong point, but the more I've read the more it seems amenable and complementary to skillsets like matrix algebra, and Python is a perfectly well-suited language (i.e. I will not be branching out to learn Processing, nor fiddling with JavaScript or C).

For now comments are in the issues.

2020-viz's Issues

Christmas tree Mathematica remake

There's one here and an incredible on here (direct link)

The description is as follows:

---

I noticed that a Reddit post about programming a lighted Christmas Tree from a simple equation

t * Sin(t)

became very popular on Reddit. It is connected to a program a programmer developed. I thought how fast we can make it with Wolfram language ? Here is the result with slight flickering ;-) Note a very special care needs to be paid to the dimming of the lights at a larger distances, and pretty shadowing.

• Function f(t, f) is rescaling sampling rate of driving parameter t of parametric curve so points are distributed uniformly. f is basically phase shift.

• Parameter PD is just average distance between points

This .GIF file has 100 frames. Enjoy!

PD = .5; s[t_, f_] := t^.6 - f;
dt[cl_, ps_, sg_, hf_, dp_, f_] := {PointSize, Hue[cl, 1, .6 + sg .4 Sin[hf s[t, f]]], 
Point[{-sg s[t, f] Sin[s[t, f]], -sg s[t, f] Cos[s[t, f]], dp + s[t, f]}]};
frames = ParallelTable[
 
Graphics3D[Table[{dt[1, .01, -1, 1, 0, f], dt[.45, .01, 1, 1, 0, f], 
dt[1, .005, -1, 4, .2, f], dt[.45, .005, 1, 4, .2, f]}, {t, 0, 200, PD}],
 
ViewPoint -> Left, BoxRatios -> {1, 1, 1.3}, ViewVertical -> {0, 0, -1}, 
ViewCenter -> {{0.5, 0.5, 0.5}, {0.5, 0.55}}, Boxed -> False, 
PlotRange -> {{-20, 20}, {-20, 20}, {0, 20}}, Background -> Black],
 
{f, 0, 1, .01}];

Export["tree.gif", frames]

Sega Saturn eye

Sega Saturn promo featured an eye logo with a sphere with a single line wrapped around it: want to recreate this either with a 3D scatter or ideally single continuous line, similarly to the manner z-ordering was used with the tree

Animated idents

Consider animating spin systems idents after building out rest of site

If you read the source for this rotating football from here you can see how to animate particular paths by their group ID, it's pretty simple:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg>
<svg width="150" height="150" viewBox="-105 -105 210 210" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- 
animated soccer ball
from
http://en.wikipedia.org/wiki/File:Soccer_ball_animated.svg
accessed on 2010-12-22
 -->
   <defs>
      <clipPath id="ball">
         <circle r="100" stroke-width="0"/>
      </clipPath>
      <radialGradient id="shadow1" cx=".4" cy=".3" r=".8">
        <stop offset="0" stop-color="white" stop-opacity="1"/>
        <stop offset=".4" stop-color="white" stop-opacity="1"/>
        <stop offset=".8" stop-color="#EEEEEE" stop-opacity="1"/>
      </radialGradient>
      <radialGradient id="shadow2" cx=".5" cy=".5" r=".5">
        <stop offset="0" stop-color="white" stop-opacity="0"/>
        <stop offset=".8" stop-color="white" stop-opacity="0"/>
        <stop offset=".99" stop-color="black" stop-opacity=".3"/>
        <stop offset="1" stop-color="black" stop-opacity="1"/>
      </radialGradient>
      <g id="black_stuff" stroke-linejoin="round" clip-path="url(#ball)">
         <g fill="black">
            <path d="M 6,-32 Q 26,-28 46,-19 Q 57,-35 64,-47 Q 50,-68 37,-76 Q 17,-75 1,-68 Q 4,-51 6,-32"/>
            <path d="M -26,-2 Q -45,-8 -62,-11 Q -74,5 -76,22 Q -69,40 -50,54 Q -32,47 -17,39 Q -23,15 -26,-2"/>
            <path d="M -95,22 Q -102,12 -102,-8 V 80 H -85 Q -95,45 -95,22"/>
            <path d="M 55,24 Q 41,41 24,52 Q 28,65 31,79 Q 55,78 68,67 Q 78,50 80,35 Q 65,28 55,24"/>
            <path d="M 0,120 L -3,95 Q -25,93 -42,82 Q -50,84 -60,81"/>
            <path d="M -90,-48 Q -80,-52 -68,-49 Q -52,-71 -35,-77 Q -35,-100 -40,-100 H -100"/>
            <path d="M 100,-55 L 87,-37 Q 98,-10 97,5 L 100,6"/>
         </g>
         <g fill="none">
            <path d="M 6,-32 Q -18,-12 -26,-2
                     M 46,-19 Q 54,5 55,24
                     M 64,-47 Q 77,-44 87,-37
                     M 37,-76 Q 39,-90 36,-100
                     M 1,-68 Q -13,-77 -35,-77
                     M -62,-11 Q -67,-25 -68,-49
                     M -76,22 Q -85,24 -95,22
                     M -50,54 Q -49,70 -42,82
                     M -17,39 Q 0,48 24,52
                     M 31,79 Q 20,92 -3,95
                     M 68,67 L 80,80
                     M 80,35 Q 90,25 97,5
            "/>
         </g>
      </g>
   </defs>
   <circle r="100" fill="white" stroke="none"/>
   <circle r="100" fill="url(#shadow1)" stroke="none"/>
   <g><animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="3s" repeatCount="indefinite"/>
      <use xlink:href="#black_stuff" stroke="#EEE" stroke-width="7"/>
      <use xlink:href="#black_stuff" stroke="#DDD" stroke-width="4"/>
      <use xlink:href="#black_stuff" stroke="#999" stroke-width="2"/>
      <use xlink:href="#black_stuff" stroke="black" stroke-width="1"/>
   </g>
   <circle r="100" fill="url(#shadow2)" stroke="none"/>
</svg>

• Maybe also useful: http://xahlee.info/js/svg_circle_arc.html

spin systems wheel

Project root: ~/dev/testing/spinwheel

• file:///home/louis/dev/testing/spinwheel/javascript-winwheel/examples/two_part_wheel/index.html

---

• Spin wheel is HTML5 canvas
• HTML5 canvas can use text objects per segment instead of a single image for all segments
• Instead of text objects can use image object
• Path2D is supported in all major browsers
  • can use on HTML5 canvas (via)
• Idents can be converted to SVG via potrace (from PNG photo edit exports)
• Alt. ident can be specified for mouseover event

CLIP and DALL-E experimentation

Notebook with Text2Image workflow: https://github.com/tg-bomze/collection-of-notebooks/blob/master/Text2Image_v3.ipynb

• via

(No particular ideas just convert to library rather than Colab and explore)

Ditto for the StyleGAN2-CLIP notebook here (actually this came from a repo: https://github.com/l4rz/stylegan2-clip-approach)

• via

NeRF for typography

• Make 3D model from artistic typography (not necessarily text) e.g. chrometype
  • Simplest possible approach: calculate depth map as preprocessing to get 3D from 2D making it relightable?

Retry emo

I paused work on emo after failing to figure out how to do a smooth gradient and perhaps I could figure it out this time...

Also fit splines/Bezier curves and then make SVG components out of that?

emoji-liif progressive face sr

https://gist.github.com/JonathanFly/80b669a72bf624d17b56a1cfec742588#file-progressivefacesuperresolutiondemo-ipynb
https://arxiv.org/abs/1908.08239

p.s. new emoji

Bertin Semiology of Graphics remake

https://twitter.com/story645/status/1337142678006403076

You’d start by choosing your reference elevation (WGS84 is the standard) retrieve a GeoTiff from the NASA API (there are multiple ways to measure it https://www.usgs.gov/faqs/where-can-i-get-global-elevation-data?qt-news_science_products=0#qt-news_science_products) then for the levelsets/contours numpy.digitize/linspace... PyGMT was made for this kinda viz too

Permutohedron viz

Permutohedron viz I wanted to do last year could be something like these lovely SVG circle packing diagrams (vaguely):

• https://octo.github.com/projects/repo-visualization
• https://github.com/githubocto/repo-visualizer-demo
• https://github.com/githubocto/repo-visualizer

Would be a neat excuse to try React