heartbeat.rb

# rubocop:disable all
q=->{!sleep _1/1e2}
p=(c=0..2).map{[_1/9r,0,5**_1.i/3,1,0]}
require'socket'
puts'op'"en http://localhost:#{(w=TCPServer.new$*[0]||0).addr[1]}"
Thread.new{
  q[2]
  f=[-1]*s=3
  t=Time.now.to_f
  p.select!{0<_1[3]=[_1[3]+_1[4]/8.0,1].min}
  9.times{
    h=p.map{[2**(_1*t.i)/_4**0.5/(1+Math.sin(2*t-9*_1%2)**32/16),_2+_4*(_3-_2)]}
    r=[s*3/2,84].min
    g=->{
      x,y=(s*(1+_1+1i)/2).rect
      x<0||x>=s-1||y<0||y>=s-1?0:((l=f[y+1])[x+1]*(a=x%1)+(1-a)*l[x])*(b=y%1)+(1-b)*((l=f[y])[x+1]*a+(1-a)*l[x])
    }
    f=(1..r).map{|y|
      (1..r).map{|x|
        z=1.5+1.5i-3.0*(y.i+x)/r
        [h.sum{g[_1.*z+_2]}*0.9,1].min
      }
    }
    s=r
  }
  c=f.flatten
  redo
}
loop{
  s=w.accept
  Thread.new{
    r=s.gets
    h='HTTP/1.1 '+"200 OK\r\nContent-"'T'"ype:text/html\r\n\r\n"
    r['/ ']?
    s.<<(h+'<style>ifram''e{''opacity:0;height:0;}input{wid'+'th:252px;}</styl''e>''<form target="i"><input src="'+"g#{rand}\" type"'="im''age"><iframe name="i"></ifra'+'me></form>')
    :
    r['/g']?
    (
      h[/:.+l/]=?:'image/gif'
      s<<h+'GIF8''7a'+[84,84,246,0,*(0..383).map{15*_1./(383r)**(3-_1%3)*17}].pack('v3c*')
      loop{
        s<<[67434785,5,44,84,84,7,c.map{_1*127}.each_slice(126).map{[127,128,*_1].pack'c*'}*'',1,129].pack('V3x''v2na*c2x')
        q[5]
        q.[]1while(r==r=c)
      }
    )
    :
    (
      x,y,z=r.scan(/\d+/).map{_1.to_f/126-1}
      z&&p<<[rand-0.5,(z=x+y.i)*1.5,z/(z.abs+0.9),0,-p[-3][4]=-1]
      s.<<h
    )
    s.close
  }
}

heartbeat_formatter.rb

require 'ripper'
w=62
h=32
def line(x,y,points,w)
  idx = points.index points.min_by{(_1[0]-x).abs}
  dist = ->a,b{
    cx,cy=a
    dx,dy=b[0]-cx,b[1]-cy
    t=((x-cx)*dx+(y-cy)*dy).fdiv(dx**2+dy**2)
    [
      0<=t&&t<=1,
      ((x-cx)*dy-dx*(y-cy)).abs/Math.hypot(dx,dy)<w
    ]
  }
  left, center, right = points[idx-1, 3]
  la, lb = dist[left, center]
  ra, rb = dist[center, right]
  (la && lb) || (ra && rb) || (lb && rb)
end
template = (h+1).times.map{|iy|
  w.times.map{|ix|
    x = (2.0*(ix+0.5)-w)/w
    y = (h-2.0*(iy-[iy-h/3.0,0].max**2*0.004))/h
    heart = x**2+(1.2*y-Math.atan(2*x.abs)/2+0.1)**2<1
    up = [[-10,0],[-0.4,0],[-0.2,0.6],[0,-0.3],[0.2,0],[10,0]]
    beat = line(x,y+0.113,[[-10,0],[-0.4,0],[-0.2,0.6],[0,-0.3],[0.2,0],[10,0]],0.04)
    heart && !beat ? '#' : ' '
  }.join
}.join("\n")

template = <<TEMPLATE
           ###########                  ###########
        ##################          ##################
     ########################    ########################
   ########################################################
  ##########################################################
 ############################################################
 #######################  ###################################
########################  ####################################
#######################   ####################################
######################     ###################################
######################     ###################################
#####################   #   ##################################
####################   ###  ##################################
 ###################  ####   ################################
 ##################   ####   ################################
  #################  ######  ###############################
   ###############   ######   #############################
                    ########  #########
      ######################   #######   ###############
       #####################   #####    ###############
         ####################  ####   ###############
           ##################   #    ##############
             #################     ##############
               ###############   ##############
                 ############################
                   ########################
                      ##################
                        ##############
                          ##########
                           ########
                            ######
                              ##
TEMPLATE

def normalize_sexp(sexp)
  case sexp
  in [Integer, Integer]
    :CODE_LOCATION
  in Array
    sexp.map { normalize_sexp _1 }
  else
    sexp
  end
end

def ast(code)
  normalize_sexp Ripper.sexp code
end

original_code = File.read('heartbeat.rb').gsub(/# ?rubocop.+\n+/, '')
code = original_code
original_ast = ast original_code
while code.match? /\n/
  a = code.sub(/\n */, '')
  b = code.sub(/\n */, ';')
  if ast(a) == original_ast
    code = a
  elsif ast(b) == original_ast
    code = b
  else
    raise "Error at #{code[/.{0,10}\n.{0,10}/].inspect}"
  end
end

chars = code.chars
output = template.lines.map do |line|
  chars.shift if chars.first == ';'
  line.chars.map do
    if _1.match? /\s/
      chars.shift while chars.first&.match? /\s/
      _1
    else
      chars.shift || '#'
    end
  end.join
end.join
puts output
puts ast(original_code) == ast(output)
File.write 'output.rb', output

output.rb

           q=->{!sleep                  _1/1e2};p=(
        c=0..2).map{[_1/9r          ,0,5**_1.i/3,1,0]}
     require'socket';puts'op'    "en http://localhost:#{(
   w=TCPServer.new$*[0]||0).addr[1]}";Thread.new{q[2];f=[-1
  ]*s=3;t=Time.now.to_f;p.select!{0<_1[3]=[_1[3]+_1[4]/8.0,1
 ].min};9.times{h=p.map{[2**(_1*t.i)/_4**0.5/(1+Math.sin(2*t-
 9*_1%2)**32/16),_2+_4*(  _3-_2)]};r=[s*3/2,84].min;g=->{x,y=
(s*(1+_1+1i)/2).rect;x<0  ||x>=s-1||y<0||y>=s-1?0:((l=f[y+1])[
x+1]*(a=x%1)+(1-a)*l[x]   )*(b=y%1)+(1-b)*((l=f[y])[x+1]*a+(1-
a)*l[x])};f=(1..r).map     {|y|(1..r).map{|x|z=1.5+1.5i-3.0*(y
.i+x)/r;[h.sum{g[_1.*z     +_2]}*0.9,1].min}};s=r};c=f.flatten
redo};loop{s=w.accept   ;   Thread.new{r=s.gets;h='HTTP/1.1 '+
"200 OK\r\nContent-"   'T'  "ype:text/html\r\n\r\n";r['/ ']?s.
 <<(h+'<style>ifram'  'e{'   'opacity:0;height:0;}input{wid'+
 'th:252px;}</styl'   'e>'   '<form target="i"><input src="'+
  "g#{rand}\" type"  '="im'  'age"><iframe name="i"></ifra'+
   'me></form>'):r   ['/g']   ?(h[/:.+l/]=?:'image/gif';s<<
                    h+'GIF8'  '7a'+[84,
      84,246,0,*(0..383).map   {15*_1.   /(383r)**(3-_1%
       3)*17}].pack('v3c*');   loop{    s<<[67434785,5,
         44,84,84,7,c.map{_1*  127}   .each_slice(126
           ).map{[127,128,*_1   ]    .pack'c*'}*'',
             1,129].pack('V3x'     'v2na*c2x');q[
               5];q.[]1while(r   ==r=c)}):(x,y,
                 z=r.scan(/\d+/).map{_1.to_f/
                   126-1};z&&p<<[rand-0.5,(
                      z=x+y.i)*1.5,z/(z.
                        abs+0.9),0,-p[
                          -3][4]=-1]
                           s.<<h);s
                            .close
                              }}

remarks.markdown

Remarks

1. Run it with ruby entry.rb 8080

2. Open "http://localhost:8080"

3. Click on the screen and interact with it

I confirmed the following implementations/platforms:

• Ruby Version
  • ruby 3.1.0p0 (2021-12-25 revision fb4df44d16) [x86_64-darwin20]
• Browser
  • Chrome(macOS, Android)
  • Firefox(macOS)
  • Edge(macOS)

Description

This program is an HTTP server that provides a fractal creature playground. You can see the heartbeat of a mysterious fractal creature. Clicking on the screen will change the shape of the creature. Surprisingly, this interactive webpage is built without JavaScript.

Internals

Fractal: Iterated function system Rendering from server: Streaming animated GIF Sending click event to server: <input type="image" src="streaming.gif"> with <form target="invisible_iframe">

Limitations

Does not work on Safari and iOS.