!! PSEUDOFRACTALS !!

class: titleslide
<div style="position:absolute; width: 908px; height: 681px; top: 0px; left: 0px; transform: scale(1); z-index:-1;"><canvas id="titlecanvas" width="908" height="681"></canvas></div> 
# PSEUDOFRACTALS!

## accidental aesthetics where math meets pixels

---
class: interestingslide
<div style="position:absolute; width: 908px; height: 681px; top: 0px; left: 0px; transform: scale(1); z-index:-1;"><canvas id="interestingcanvas" width="908" height="681"></canvas></div>

<br>
# “more interesting
# than what
# I meant
# to be doing”
---
class: nameslide

---
class: lastyearslide

# 2017, jes, bangbangCon

## images ⇒ sound

hey maybe you want to read my notes about that talk that I published super belated
https://github.com/jes5199/synthesizing-video-and-turning-it-into-music-bang
---
class: spectrogramslide

# 2012, jes, Spectrogram

<img style="float:left" src="images/31.wav.png"> <img style="float:right" src="images/inacurrate.png">
<div style="clear:both"></div>
## sound ⇒ images
---
class: filigreeslide

<img src="images/spectrogram-filigree.png">
---
class: filigreeshrugslide

<img src="images/spectrogram-filigree.png" style="">
# 2012, jes, completely mystified

<span style="font-size:80pt">🤷🏻‍♀</style>
---
# 2014, math<i>overflow</i>, a Soft Question

---
class: joroall4slide

# 2014, math<i>overflow</i>, “joro”

<table><tr><td><code>(x*y) % 1961</code><img src="images/joro 1.png"></td><td><code>(x^2 + y^2) % 503</code><img src="images/joro 2.png"></td></tr><tr><td><code>(4*x^2 + 503)</code><img src="images/joro 3.png"></td><td><code>(x^3 + x - y^2) % 503</code><img src="images/joro 4.png"></td></tr></table>
---
class: joroall1slide

# 2014, math<i>overflow</i>, “joro”

<code>color = (x*y) % 1961</code>

<img src="images/joro 1.png">
---
class: joroall1slide

# 2014, math<i>overflow</i>, “joro”

<code>color = (x^2 + y^2) % 503</code>

---
# 1987, <span style="color:magenta">U.S.S.R.</span>, "Quantum" magazine

<img src="images/kvant.gif" style="height:500px">
---
class: kaplan1imgslide
# 2005, Craig Kaplan, Voronoi diagrams

<img src="images/kaplanpaper1.png">
---
class: voronoislide
# 2005, Craig Kaplan, Voronoi diagrams

(kinda like this except in C and not animated)
<canvas id="voronoicanvas" width="700" height="400"></canvas>
<small>Thanks to Inigo Quilez for an MIT licensed WebGL Voronoi demo</small>

---
# 2005, Craig Kaplan, “Voronoi” patterns

<img src="images/kaplan-voronoi.png" style="height:500px">
---
class: kaplan1imgslide2
# 2005, Craig Kaplan, “Voronoi” patterns

<img src="images/kaplancitations.png">
---
class: toposlide
# <span style="color:yellow">1986</span>!!, Brian Hayes, Topographic maps

“Chris Johnston of the NASA Lewis Research Center described a particularly clever [program] in ‘Contour Plots of Large Data Sets’”
 (COMPUTER LANGUAGE, May 1986, pp. 63-67)

---
class: toposlide2
# 1986, Brian Hayes, Topographic maps

Idea for "the Bathtub Algorithm"
---
class: parabolicfuncslide
# 1986, Brian Hayes, Topographic maps

a parabolic surface, cross section view

---
class: parabolictoposlide
# 1986, Brian Hayes, Topographic maps

a parabolic surface, via the Bathtub Algorithm

---
class: dotmatrixjokeslide
# 1986, Brian Hayes, Topographic maps

<div class="container">
<div class="printer"><div class="printerflex"><span class="lmargin"></span><span class="printed" id="jokeprinted"></span><span class="head"> </span><span class="blank"></span><span class="rmargin"></span></div></div>
<div class="paper" id="jokepaper"><div class="paperflex"><span class="left"> </span><img src="images/bathtub1.png"><span class="right"></span></div></div>
</div>
---
class: hayesbeyondslide
# 1986, Brian Hayes, Topographic maps

---
class: nyquistlimitwavesslide
# the Nyquist limit

digitization only works correctly on waveforms with frequencies<br>lower than half of your sampling rate

---
class: nyquistlimitpixelsslide
# Nyquist limit, square waves vs pixels
<canvas id="nyquistlimitpixelscanvas" width="700" height="400"></canvas>

(btw, a pixel is not actually a little square, see SMITH 1995 "A Pixel Is Not A Little Square")
---
class: circlespixelsslide0

# parabolic surface, below Nyquist limit
<canvas id="circlespixelscanvas0" width="700" height="400"></canvas>
<code>value = (x^2 + y^2) % 2</code>

---
class: circlespixelsslide

# parabolic surface, zooming out
<canvas id="circlespixelscanvas" width="700" height="400"></canvas>
<code>value = (x^2 + y^2) % 2</code>

---
class: circlespixelsslide2

# parabolic surface, sinusoidal waves
<canvas id="circlespixelscanvas2" width="700" height="400"></canvas>
<code>value = sin(x^2 + y^2)</code>

---
class: hyperbolicpixelsslide

# hyperbolic surfaces
<canvas id="hyperbolicpixelscanvas" width="700" height="400"></canvas>
<code>value = sin(x * y)</code>

---
class: jsdemoslide
```javascript
let canvas = document.getElementById("js-demo-canvas");
let ctx = canvas.getContext("2d");
for(let y = 0; y < canvas.height; y++) {
  for(let x = 0; x < canvas.width; x++) {
    let zoom = 5;
    let value = Math.floor(x/zoom * y/zoom) % 2;
    ctx.fillStyle = value ? "white" : "black";
    ctx.fillRect(x,y,1,1);/*okay pixels are actually 1x1 squares*/
  }
}
```
<canvas id="js-demo-canvas" style="border:1px solid black; width:300px" width="100" height="100"></canvas>

---
class: shadertoyslide

186 chars of WebGL, not bad, right?

---
class: dwitterslide
<img src="images/dwitterheader.png" style="width:500px" style="margin:0"><iframe width=500 height=600 frameBorder="0" src="https://www.dwitter.net/e/1857" allowFullScreen="true"></iframe>

---
class: dwittercommentslide

# donbright drops some knowledge

maybe this is where I got the word "pseudofractal" ?

---
# Chromogeometries??

<img src="images/chromo0b.png" style="width:100%">
---
class: chromosslide

# Chromogeometries??

<div class="chromos">
<span class="chromo">
<span>“blue” geometry</span>
<img src="images/chromo1.png" style="width:95%">
<code>x^2 + y^2</code>
<img src="images/bluechromosmall.png" style="width:95%">
</span>

<span class="chromo">
<span>“red” geometry</span>
<img src="images/chromo2.png" style="width:95%">
<code>x^2 - y^2</code>
<img src="images/redchromosmall.png" style="width:95%">
</span>

<span class="chromo">
<span>“green” geometry</span>
<img src="images/chromo3.png" style="width:95%">
<code>2 * x * y</code>
<img src="images/greenchromosmall.png" style="width:95%">
</span>
</div>

"relativistic conics"? this may or may not be mainstream math, idk

---
class: gradienteyeslide

# awkward segue: okay what about colors like regular colors for your eyes

---
class: sciamslide

# also 1986!?, John E. Connett, <span>CIRCLE<sup>2</sup></span></span><br>

<code style="font-size:18pt;">color = (x^2 + y^2) % N</code>

and choose whatever palette you want arbitrarily

I got no explanation of how John stumbled across these but apparently he told his friend at Scientific American "something something fractals" and got these published as WALLPAPER FOR THE MIND

---
 hey now we can talk about stuff I did

<code style="font-size:18pt;">color = sin(x^2 + y^2)</code>

---

<code>value = (x + y) × sin(x) × sin(y)</code>

It reminds me of Donut Blocks in mario 3 :

---
class: finaleslide
<div style="position:absolute; width: 908px; height: 681px; top: 0px; left: 0px; transform: scale(1); z-index:-1;"><canvas id="finalecanvas" width="908" height="681"></canvas></div>

---
class: finaleslide2
<div style="position:absolute; width: 908px; height: 681px; top: 0px; left: 0px; transform: scale(1); z-index:-1;"><canvas id="finale2canvas" width="908" height="681"></canvas></div>

---
class: finaleslide3
<div style="position:absolute; width: 908px; height: 681px; top: 0px; left: 0px; transform: scale(1); z-index:-1;"><canvas id="finale3canvas" width="908" height="681"></canvas></div>