\documentclass{beamer}

\usepackage[utf8]{inputenc}
\usepackage{graphicx}
\usepackage{hyperref}
\usepackage{multirow}
\usepackage{amssymb}
\usepackage{amsmath}
\usepackage{fontspec}

\renewcommand{\thefootnote}{\fnsymbol{footnote}}

\usefonttheme{professionalfonts}
\usefonttheme{serif}
\setmainfont{garamond-regular.ttf}[
    BoldFont = garamond-bold.ttf,
    ItalicFont = garamond-italic.ttf,
]

\setbeamertemplate{caption}{\insertcaption}

\title{Rust in Arts}
\author{Akshay Oppiliappan}
\date{}

\setbeamerfont{author}{size=\fontsize{10}{10}\rmfamily}
\setbeamerfont{institute}{size=\fontsize{10}{10}\itshape}
\setbeamerfont{title}{size=\fontsize{25}{25}\bfseries}
\setbeamerfont{subtitle}{size=\Large\normalfont\slshape}
\setbeamerfont{minititle}{size=\fontsize{7}{7}\normalfont\bfseries}
\setbeamerfont{caption}{size=\scriptsize}

\definecolor{LionRed}{rgb}{0.565, 0.130, 0.305}
\usecolortheme[named=LionRed]{structure}

\setbeamertemplate{itemize items}[ball]

\begin{document}

\begin{frame}
    \begin{figure}[h]
        \includegraphics[scale=0.3,trim={0 3cm 0 0},clip]{assets/ferris}
    \end{figure}
    \titlepage
\end{frame}

\begin{frame}{\textbf{Colors and Computers}}
    \begin{block}{}
        \begin{columns}
            \column{0.5\textwidth}

            \begin{itemize}
                \item Images $\rightarrow$ Pixels
                \item Pixels $\rightarrow$ Color
                \item Color $\rightarrow$ RGB (or) CMYK
                \item R $\rightarrow$ ???, G $\rightarrow$ ???, B $\rightarrow$ ???
            \end{itemize}

            \column{0.5\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.30,trim={0 0 0 1cm},clip]{assets/locus}
                \label{fig:locus}
                \caption{\textit{``Locus''}, Akshay, 2021}
            \end{figure}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Colors and Computers}}
    \begin{block}{}
        \begin{columns}
            \column{0.6\textwidth}

            \begin{itemize}
                \item R $\rightarrow$ 0--255, G $\rightarrow$ 0--255, B $\rightarrow$ 0--255
                \item 8-bits/component, 24-bits/pixel
                \item Bit depth: bits per pixel 
            \end{itemize}
            \column{0.4\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.30,trim={0 0 0 1cm},clip]{assets/the_sect}
                \label{fig:the_sect}
                \caption{\textit{``The Sect''}, Akshay, 2021}
            \end{figure}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Colors and Computers}}
    \begin{block}{}

        \begin{columns}
            \column{0.35\textwidth}

            \begin{itemize}
                \item 1-bit/pixel
                \item 0, 1
                \item on, off
                \item black, white
                \item ...
            \end{itemize}

            \column{0.65\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.40,trim={0 2cm 0 1cm},clip]{assets/self}
                \label{fig:self}
                \caption{\textit{``Ceci n'est pas une self-reference''}, Akshay, 2021}
            \end{figure}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{File Formats}}
    \begin{block}{}

        \begin{columns}
            \column{0.65\textwidth}
            \begin{itemize}
                \item Byte-arrays
                \item Structured, for applications to read quickly
                \item PNG file format: \texttt{IHDR}, \texttt{IDAT}, \texttt{IEND}
            \end{itemize}

            \column{0.35\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.25,trim={10cm 9cm 6cm 9cm},clip]{assets/ramen_noodles}
                \label{fig:ramen}
                \caption{\textit{``Ramen Noodles''}, Akshay, 2021}
            \end{figure}

        \end{columns}
    \end{block}
    \begin{block}{}
    \end{block}
\end{frame}

\begin{frame}{\textbf{File Formats}}
    \begin{block}{}
        \begin{center}
            \begin{figure}[h]
            \begin{tabular}{ r r r r | c c c c | r }
                \hline
                0 & 0 & 0 & 0 & \multicolumn{4}{|c|}{\multirow{2}{*}{Image Header}} & \multirow{2}{*}{\texttt{0x05}} \\
                0 & 1 & 0 & 1 & & & & & \\ \hline \hline
                0 & 0 & 0 & 0 & \square      & \square      & \square      & \square & \multirow{5}{*}{\texttt{0x06 0x9F 0x87}} \\
                0 & 1 & 1 & 0 & \square      & \blacksquare & \blacksquare & \square \\
                1 & 0 & 0 & 1 & \blacksquare & \square      & \square      & \blacksquare \\
                1 & 1 & 1 & 1 & \blacksquare & \blacksquare & \blacksquare & \blacksquare \\
                1 & 0 & 0 & 0 & \blacksquare & \square      & \square      & \square \\
                0 & 1 & 1 & 1 & \square      & \blacksquare & \blacksquare & \blacksquare \\ \hline \hline
                0 & 0 & 0 & 0 & \multicolumn{4}{|c|}{\multirow{2}{*}{Image Trailer}} & \multirow{2}{*}{\texttt{0x00}} \\
                0 & 0 & 0 & 0 & & & & & \\
                \hline
            \end{tabular}
            \caption{The internals of the \textit{One Bit Image (OBI)} format}
            \end{figure}
        \end{center}
    \end{block}
\end{frame}

\begin{frame}[fragile]{\textbf{File Formats}}
    \begin{block}{}
        \begin{columns}
            \column{0.65\textwidth}
            \begin{itemize}
                \item Implementation of the spec: \href{https://git.peppe.rs/graphics/obi/about}{git.peppe.rs/graphics/obi}
                \item {
                        \begin{verbatim}
let mut img = 
    Image::new(30, 50);
img.set(2, 3, true)?;
img.set(3, 2, true)?;
            \end{verbatim}
                    }
            \end{itemize}

            \column{0.35\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.50]{assets/code}
                \label{fig:code}
                \caption{\textit{``Staple''}, Akshay, 2022}
            \end{figure}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Making Pixel Art}}
    \begin{block}{}
        \begin{itemize}
            \item SDL: Simple DirectMedia Layer is a cross-platform software development library designed to provide a hardware abstraction layer for computer multimedia hardware components
            \item SDL: draw stuff to the screen, handle mouse/keyboard events
        \end{itemize}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Making Pixel Art}}
    \begin{figure}[h]
        \includegraphics[scale=0.40]{assets/mvc}
    \end{figure}
\end{frame}

\begin{frame}{\textbf{Making Pixel Art}}
    \begin{block}{}
        \begin{columns}
            \column{0.6\textwidth}
            \begin{itemize}
                \item Model: \\
                    \texttt{zoom: u32}
                \item View: \\
                    Zoomed image
                \item Controller: \\
                    \texttt{|zoom| zoom + 1}
            \end{itemize}

            \column{0.4\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.30]{assets/ivory_tower}
                \label{fig:code}
                \caption{\textit{``Ivory Tower''}, Akshay, 2022}
            \end{figure}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Making Pixel Art}}
    \begin{block}{}
        \begin{itemize}
            \item Model: Needs to be mutated, be static
            \item Possible structure: \texttt{static mut STATE: AppState}
            \item Possible structure: \texttt{Lazy<RwLock<AppState>>}
        \end{itemize}
    \end{block}
\end{frame}

\begin{frame}[fragile]{\textbf{Making Pixel Art}}
    \begin{verbatim}
    fn main() -> Result<()> {
        let mut app = AppState::new();
        app.main()?;
        Ok(())
    }

    impl AppState {
        fn undo(&mut self) { ... }
        fn zoom(&mut self) { ... }
        fn draw(&mut self) { ... }
        ...
        fn main(&mut self) { ... }
    }
    \end{verbatim}
\end{frame}

\begin{frame}{\textbf{Ctrl-Z}}
    \begin{block}{}
        \begin{columns}
            \column{0.65\textwidth}
            \begin{itemize}
                \item Mission critical
                \item Tricky data-structure to get right
                \item Drawing the process can help!
            \end{itemize}

            \column{0.35\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.3,trim={1cm 2cm 0 4cm},clip]{assets/ember}
                \label{fig:ember}
                \caption{\textit{``Ember''}, Akshay, 2022}
            \end{figure}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Ctrl-Z}}
    \begin{figure}[h]
        \includegraphics[scale=0.35]{assets/undo}
    \end{figure}
\end{frame}

\begin{frame}[fragile]{\textbf{Ctrl-Z}}
    \begin{itemize}
        \item Operations form an undo tree
        \item Redos are overwritten by new operations
        \item Simplified to a cursor over a timeline (two stacks!)
        \item  {
        \begin{verbatim}
struct UndoStack<T> {
    sacred_timeline: Vec<T>,
    now: Option<u32>,
}
        \end{verbatim}
            }
    \end{itemize}
\end{frame}

\begin{frame}[fragile]{\textbf{Ctrl-Z}}
    \begin{block}{}
        \begin{columns}
            \begin{column}{0.5\textwidth}{\textbf{Tests}}

                \begin{verbatim}
let ops: UndoStack<u32> = 
    UndoStack::new();
ops.push(1u32);
ops.push(2u32);
ops.push(3u32);

ops.undo();

assert_eq!(ops, [1, 2]);
                \end{verbatim}
            \end{column}

            \vrule{}

            \begin{column}{0.5\textwidth}{\textbf{Binary}}
                \begin{verbatim}


struct AppState {
    ...
    ops: UndoStack<PaintRec>,
    ...
}


                \end{verbatim}
            \end{column}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}[fragile]{\textbf{Ctrl-Z}}
    \begin{block}{}
        \begin{columns}
            \begin{column}{0.5\textwidth}{\textbf{Tests}}
                \begin{verbatim}
struct UndoStackU32 {
    sacred_timeline:
        Vec<u32>,
    now: Option<u32>
}

let ops: UndoStackU32 = 
    UndoStackU32::new();

...

                \end{verbatim}
            \end{column}

            \vrule{}

            \begin{column}{0.5\textwidth}{\textbf{Binary}}
                \begin{verbatim}
struct UndoStackPaintRec {
    sacred_timeline: 
        Vec<PaintRec>,
    now: Option<u32>
}

struct AppState {
    ...
    ops: UndoStackPaintRec,
    ...
}
                \end{verbatim}
            \end{column}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Dithering}}
    \begin{block}{}
        \begin{columns}
            \begin{column}{0.5\textwidth}
                \begin{itemize}
                    \item Stuck with black and white
                    \item Diffuse to produce shades
                    \item Ordered dithering
                \end{itemize}
            \end{column}

            \begin{column}{0.5\textwidth}
            \begin{figure}[h]
                \includegraphics[scale=0.30]{assets/b8}
                \label{fig:b8}
                \caption{\textit{``B8''}, Akshay, 2022}
            \end{figure}
            \end{column}

        \end{columns}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Dithering}}
    \begin{block}{}
        \begin{center}
            \includegraphics[scale=0.30]{assets/memory}
            \label{fig:memory}
            \\
            \caption{\textit{``Scenes from a Memory''}, Akshay, 2022}
        \end{center}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Dithering}}
    \begin{block}{}
        \begin{center}
            \includegraphics[scale=0.75,trim={11cm 5cm 5cm 9cm},clip]{assets/memory}
            \label{fig:memory}
            \\
            \caption{A closer look at \textit{``Scenes from a Memory''}}
        \end{center}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Sixteen Shades}}
    \begin{block}{}
        \begin{center}
            \includegraphics[scale=0.6]{assets/bayer}
            \label{fig:bayers}
            \\
            \caption{Bayers' matrices}
        \end{center}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Sixteen Shades}}
    \begin{block}{}
        \begin{center}
            \includegraphics[scale=0.6]{assets/rylander}
            \label{fig:rylander}
            \\
            \caption{Rylanders' matrices}
        \end{center}
    \end{block}
\end{frame}

\begin{frame}{\textbf{Warm Regards}}
    \begin{itemize}
        \item Akshay Oppiliappan, Language Engineer (Rust), DeepSource
        \item E-mail: \texttt{nerdy@peppe.rs}
        \item Made with \LaTeX~and beamer
        \item Slides: \url{https://u.peppe.rs/ria.pdf}
    \end{itemize}
\end{frame}

\end{document}