index.haml

!!! 5
%html{prefix:"og: http://ogp.me/ns#"}
  %head
    %meta{charset: "utf-8"}
    %meta{property: "og:title", content:"Fajitas, the WebGL fractal renderer"}
    %meta{property: "og:type", content:"website"}
    %meta{property: "og:url", content:"https://titouanc.github.io/fajitas/"}
    %meta{property: "og:image", content:"https://raw.githubusercontent.com/titouanc/fajitas/master/screenshots/screenshot2.png"}
    %meta{property: "og:description", content:"Fajitas let you explore fractals in your web browser. Equation and color editor included !"}
    %meta{property: "og:determiner", content:"the"}
    %link{rel:"stylesheet", href:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", integrity:"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7", crossorigin:"anonymous"}
    %title iTitou's WebGL Fractal renderer
    :sass
      $barcolor: rgba(0, 0, 0, 0.7)
      html, body
        padding: 0px
        margin: 0px
        height: 100%
      .navbar-fixed-top
        background-color: $barcolor
      .footer
        position: absolute
        bottom: 0
        width: 100%
        height: 20px
        background-color: $barcolor
        p
          margin-bottom: 5px
          font-size: 15px
          color: grey
      #canvas
        cursor: move
        width: 100%
        height: 100%
      #header
        width: 100%
        height: 50px
      #formula
        width: 400px
      .hidden-template
        display: none
      th
        text-align: right
        padding-right: 1em
  %body
    %nav.navbar.navbar-inverse.navbar-fixed-top
      .container-fluid
        / Left
        .navbar-header
          %button.navbar-toggle.collapsed{type:"button", 'data-toggle'=>"collapse", 'data-target'=>'#navbar', 'aria-expanded'=>false, 'aria-controls'=>'navbar'}
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
          %a.navbar-brand{href:""} Fajitas, the WebGL Fractal renderer
        / Right
        .collapse.navbar-collapse
          %ul.nav.navbar-nav.navbar-right
            %li.dropdown
              %a.dropdown-toggle{href:"", title:"Controls...", 'data-toggle'=>'dropdown'}
                %i.glyphicon.glyphicon-cog
              %ul.dropdown-menu
                %li.dropdown-header Colors
                %li
                  %a
                    %input#color0{type:"color", value:"#8c1010"}
                    Color 1
                  %a
                    %input#color1{type:"color", value:"#ffc000"}
                    Color 2
                %li.dropdown-header
                  Iterations
                  %span#iterations-display
                %li
                  %input#iterations{type: "range", value: 0, min: 1, max: 1000}
                %li
                  %input#save{type: "button", value: "Save"}
          %form.navbar-form.navbar-right
            .input-group
              %span#formula-head.input-group-addon
                Z
                %sub n+1
                :plain
                  =
              %input#formula.form-control{type:"text", value:"C + Zn^2", autocomplete:"off"}
    %canvas#canvas
    %script{type:"text/javascript", src:"twgl-full.min.js"}
    %script{type:"text/javascript", src:"app.js"}
    %script{type:"text/javascript", src:"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js", integrity:"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS", crossorigin:"anonymous"}
    %footer.footer
      .container
        %p
          Fajitas, the WebGL fractal renderer by
          %a{target: "_blank", href: "https://twitter.com/TitouOnRails"} iTitou
          %i.glyphicon.glyphicon-menu-right
          Code on 
          %a{target: "_blank", href: "https://github.com/titouanc/fajitas"} Github
  / Templates for dynamic content
  #error-tooltip.hidden-template
    .popover{role:"tooltip"}
      .arrow
      %h3.popover-title
      %code.popover-content
  #help-tooltip.hidden-template
    %h4 This is the recurrence formula
    %ul
      %li
        %code C
        is the initial point
      %li
        %code Zn
        is the actual value of iteration
      %li
        %code
          Z
          %sub n+1
        is the next value
    %h4 Cool fractals
    %table
      - {Mandelbrot: 'C + Zn^2', BurningShip: 'C + |Zn|^2'}.each do |n, f|
        %tr
          %th
            %a.label.label-primary{onClick:"$('#formula').val('#{f}').change()"}= n
          %td
            %code= f
    %hr
    %h4 What's this ?
    %p
      Each point you see has a coordinate in the complexe plane.
      On each of them, repeat the following operation:
    %code
      Z
      %sub n+1
      :plain
        =
      formula(Zn)
    %p
      If the value becomes too large, or the operation has been repeated enough,
      stop and assign a color based on the number of times the operation was
      repeated.