readme.html

<meta charset="utf-8" lang="en">  <!-- this line allows UTF-8 characters in the .html file -->

                    **P04_Raytrace**


<!--

General
========

For each of your team's implementations, explain the following (where appropriate and applicable):

- details on calling conventions, input and output data formats, limitations, bugs, and special features.
- negative aspects of your program (limitations, known bugs)
- positive aspects (extensions, special features)
- describe your choice of modularization (abstractions), data structures, and algorithms
- explain anything you did that is likely to be different from what other students may have done
- justify any design decisions for which the rationale isn't immediately clear

Feel free to modify the structure of this `readme.html` file to fit the current assignment and to fit how you wish to present your findings.


!!! note: Math Typesetting
    Surround your math with double dollar signs to have [MathJax](https://www.mathjax.org/) typeset it beautifully.
    To add a tilde in math mode (using dollar signs), use the `\sim` command.
    If an exponent has more than one character, you must surround it with curly braces.
    In the example below, the exponent for $T$ must use curly braces, but they aren't required for $N$.

    $$ \sim T^{1.2} N^2 $$

    Note: Typesetting like this is optional; feel free to use plain text if you'd like.


Submission
-----------

Use any zip utility to create a zip file containing all your code, this `readme.html` document, and any additional files of evidence (ex: generated images, screenshots).
Be sure to include all of the files, so that we can reproduce all of your images by running the ray tracer.

-->



Author
=============


<!-- fill out the following table with your information -->
<!-- Note: wrapping table in div.noheader will hide the table's header -->
<!-- Note: wrapping table in div.firstcol will style the first column different from other columns -->
<div class="noheader firstcol">
                  |             
------------------|-------------
name              | David Deng
computer + OS     | Linux Ubuntu
time to complete  | 20 hours
partner           | None
additional help   | Dr. Denning
</div>


# Ray Tracing Project

## Category 1: Performance via parallelization

### Sample output
As shown below, the rendering is taking place in parallel.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~bash
...
Scene: scenes/moving_camera/scene_data/0187.json...
Scene: scenes/moving_camera/scene_data/0920.json...
(97/1000) scenes/moving_camera/scene_images/0995.ppm done!
(98/1000) scenes/moving_camera/scene_images/0287.ppm done!
(99/1000) scenes/moving_camera/scene_images/0659.ppm done!
Scene: scenes/moving_camera/scene_data/0613.json...
Scene: scenes/moving_camera/scene_data/0623.json...
(100/1000) scenes/moving_camera/scene_images/0521.ppm done!
(101/1000) scenes/moving_camera/scene_images/0610.ppm done!
Scene: scenes/moving_camera/scene_data/0894.json...
Scene: scenes/moving_camera/scene_data/0463.json...
Scene: scenes/moving_camera/scene_data/0131.json...
(102/1000) scenes/moving_camera/scene_images/0229.ppm done!
Scene: scenes/moving_camera/scene_data/0237.json...
(103/1000) scenes/moving_camera/scene_images/0919.ppm done!
(104/1000) scenes/moving_camera/scene_images/0988.ppm done!
Scene: scenes/moving_camera/scene_data/0461.json...
(105/1000) scenes/moving_camera/scene_images/0004.ppm done!
Scene: scenes/moving_camera/scene_data/0729.json...
(106/1000) scenes/moving_camera/scene_images/0060.ppm done!
(107/1000) scenes/moving_camera/scene_images/0343.ppm done!
Scene: scenes/moving_camera/scene_data/0881.json...
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~bash
$ top
...
  PID USER      PR  NI    VIRT    RES    SHR S  %CPU  %MEM     TIME+ COMMAND
10436 hdeng     20   0  446852 380220 335856 S 466.9   0.3  19:13.38 dart
...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

## Animator-Driven / Key-Frame Motion

### Moving Camera

Code fragment
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~python
self.register_child_property('cameraEye', LerpPoint.from_interval(
			start=Point(22, 0, 50), end=Point(22, 20, 0), num_frames=500))
self.append_child_property('cameraEye', LerpPoint.from_interval(
			start=Point(22, 20, 0), end=Point(22, 0, -50), num_frames=500))
self.register_child_property('cameraTarget', LerpPoint.from_interval(
			start=Point(-20, 0, 0), end=Point(40, 0, 0), num_frames=1000))
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To generate the video
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~bash
./build.sh animations/moving_camera.json
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
![moving_camera](assets/moving_camera.gif)


## Implementation details

The `AnimatedProperty` class is the main entrance to defining an animation.
It largely relies on Python's iterator/iterable interface, and the design is that once an `AnimatedProperty` object is set up properly, it can be iterated using a `for` loop to obtain the scene data for each frame.


## Evaluation

I spent most of the time designing the framework that would make it possible to create various types of animations with clear and direct syntax.

Currently the only ones implemented successfully is the `LerpPoint` class, which can linearly interpolate between two given points. This is demonstrated in the `moving_camera` scene, where several `LerpPoint`s are evaluated in parallel or stringed together to represent some interesting movements of camera location and target.

Future works include but are not limited to: a redesign of the nesting pattern for multiple `AnimatedProperty` so that child properties are more transparent to the parent property; implement a rotation animation, and have a scene with nested rotations to represent planet/moon movement; implement a bouncing ball animation with a global update hook to check whether balls collide with the floor and reverses its velocity upon such event.

## Team Evaluation

I worked with Christian for most of the first week, where we talked about possible directions and ways of collaboration. But later we thought since both of us had some demonstrable works done, and some of them are overlapping, it didn't seem to hurt if we simply submit our own assignments.

## Github

More issues are documented at https://github.com/PROgram52bc/COS350_P04_Animation



<!--   Feel free to modify the following to fit a theme of your choosing   -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> <!-- a sans-serif font -->
<style>  /* A TAYLOR-INSPIRED THEME */
    body {font-family:'Open Sans',sans-serif;}
    .md a:link, .md a:visited {color:hsl(252,23.0%,44.3%); font-family:'Open Sans',sans-serif;}
    .md table.table th {background-color:hsl(252,23.0%,44.3%);}
    .md .noheader th {display:none;}
    .md .firstcol td:first-child {white-space:pre;color:white;vertical-align:top;font-weight:bold;border-color:black;background:hsl(252,23.0%,54.3%);}
    .md .firstcol tr:nth-child(even) td:first-child {background:hsl(252,23.0%,44.3%);}
</style>


<!-- ****************************** -->
<!--    Leave the content below     -->
<!-- ****************************** -->

<!-- The script and style below are added for clarity and to workaround a bug -->
<script>
    // this is a hack to workaround a bug in Markdeep+Mathjax, where
    // `&#36;`` is automatically converted to `\(`` and `\)`` too soon.
    // the following code will replace the innerHTML of all elements
    // with class "dollar" with a dollar sign.
    setTimeout(function() {
        var dollars = document.getElementsByClassName('dollar');
        for(var i = 0; i < dollars.length; i++) {
            dollars[i].innerHTML = '&#' + '36;'; // split to prevent conversion to $
        }
    }, 1000);
</script>
<style>
    /* adding some styling to <code> tags (but not <pre><code> coding blocks!) */
    :not(pre) > code {
        background-color: rgba(0,0,0,0.05);
        outline: 1px solid rgba(0,0,0,0.15);
        margin-left: 0.25em;
        margin-right: 0.25em;
    }
    /* fixes table of contents of medium-length document from looking weird if admonitions are behind */
    .md div.mediumTOC { background: white; }
    .md div.admonition { position: initial !important; }
</style>

<!--   Leave the following Markdeep formatting code, as this will format your text above to look nice in a wed browser   -->
<style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}</style>
<script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script>
<script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible");</script>