Sam Lee HW2 Submission

README.md

@@ -1,81 +1,20 @@
 # CIS 566 Homework 2: Implicit Surfaces
+Name : Samantha Lee
+PennKey : smlee18
 
-## Objective
-- Gain experience with signed distance functions
-- Experiment with animation curves
+Inspiration: https://www.youtube.com/watch?t=596&fbclid=IwAR1bL0yg79VJTeRl3MopTtCPIDUA2mSWdGRWKI08Wkx3qX8kYcUEaylCWIo&v=zlZR8nePEOY&feature=youtu.be&ab_channel=PratulDesigns
 
-## Base Code
+Live Demo: https://18smlee.github.io/hw02-raymarching-sdfs/
 
-Please feel free to use this code as a base (https://www.shadertoy.com/view/fsdXzM)
+## Cylinders
+- Performed opRepLim on a block of cylinders and smooth subtracted them from the floor plane
+- Did the same function on a block of cylinders with a slightly smaller radius to give the illusion that they are coming in and out of the floor
+- Applied a cosine function to the cylinder heights and floored the input in order to keep the cylinder tops unwarped
 
-The code we have provided for this assignment features the following:
-- A square that spans the range [-1, 1] in X and Y that is rendered with a
-shader that does not apply a projection matrix to it, thus rendering it as the
-entirety of your screen
-- TypeScript code just like the code in homework 1 to set up a WebGL framework
-- Code that passes certain camera attributes (listed in the next section),
-the screen dimensions, and a time counter to the shader program.
 
-## Assignment Requirements
-- __(10 points)__ Modify the provided `flat-frag.glsl` to cast rays from a
-virtual camera. We have set up uniform variables in your shader that take in
-the eye position, reference point position, and up vector of the `Camera` in
-the provided TypeScript code, along with a uniform that stores the screen width
-and height. Using these uniform variables, and only these uniform variables,
-you must write a function that uses the NDC coordinates of the current fragment
-(i.e. its fs_Pos value) and projects a ray from that pixel. Refer to the [slides
-on ray casting](https://docs.google.com/presentation/d/e/2PACX-1vSN5ntJISgdOXOSNyoHimSVKblnPnL-Nywd6aRPI-XPucX9CeqzIEGTjFTwvmjYUgCglTqgvyP1CpxZ/pub?start=false&loop=false&delayms=60000&slide=id.g27215b64c6_0_107)
-from CIS 560 for reference on how to cast a ray without an explicit
-view-projection matrix. You'll have to compute your camera's Right vector based
-on the provided Up vector, Eye point, and Ref point. You can test your ray
-casting function by converting your ray directions to colors using the formula
-`color = 0.5 * (dir + vec3(1.0, 1.0, 1.0))`. If your screen looks like the
-following image, your rays are being cast correctly:
-![](rayDir.png)
-- __(70 points)__ Create a scene using raymarched signed distance functions.
-The subject of your scene should be based on some reference image, such as a
-shot from a movie or a piece of artwork. Your scene should incorporate the
-following elements:
-  - The SDF combination operation Smooth Blend.
-  - Basic Lambertian reflection using a hard-coded light source and SDF surface normals.
-  - Animation of at least one element of the scene, with at least two Toolbox Functions
-  used to control the animation(s).
-  - Hard-edged shadows cast by shapes in the scene onto one another using a shadow-feeler ray.
+## Pendulum
+- Smooth blended a sphere and a rod together to create a pendulum
+- Applied a smoothstep pulsing function to the y coordinate of the pendulum and a cos to the z coordinate to create a swinging motion
 
-For the next assignment you will build upon this scene with procedural textures and more
-advanced lighting and reflection models, so don't worry if your scene looks a bit drab
-given the requirements listed above.
-
-- __(10 points)__ Following the specifications listed
-[here](https://github.com/pjcozzi/Articles/blob/master/CIS565/GitHubRepo/README.md),
-create your own README.md, renaming this file to INSTRUCTIONS.md. Don't worry
-about discussing runtime optimization for this project. Make sure your
-README contains the following information:
-  - Your name and PennKey
-  - Citation of any external resources you found helpful when implementing this
-  assignment.
-  - A link to your live github.io demo (refer to the pinned Piazza post on
-    how to make a live demo through github.io)
-  - An explanation of the techniques you used to model and animate your scene.
-
-## Useful Links
-- [IQ's Article on SDFs](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm)
-- [IQ's Article on Smooth Blending](http://www.iquilezles.org/www/articles/smin/smin.htm)
-- [IQ's Article on Useful Functions](http://www.iquilezles.org/www/articles/functions/functions.htm)
-- [Breakdown of Rendering an SDF Scene](http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf)
-
-
-## Submission
-Commit and push to Github, then submit a link to your commit on Canvas. Remember
-to make your own README!
-
-## Inspiration
-- [Alien Corridor](https://www.shadertoy.com/view/4slyRs)
-- [The Evolution of Motion](https://www.shadertoy.com/view/XlfGzH)
-- [Fractal Land](https://www.shadertoy.com/view/XsBXWt)
-- [Voxel Edges](https://www.shadertoy.com/view/4dfGzs)
-- [Snail](https://www.shadertoy.com/view/ld3Gz2)
-- [Cubescape](https://www.shadertoy.com/view/Msl3Rr)
-- [Journey Tribute](https://www.shadertoy.com/view/ldlcRf)
-- [Stormy Landscape](https://www.shadertoy.com/view/4ts3z2)
-- [Generators](https://www.shadertoy.com/view/Xtf3Rn)
+## Notes
+I really liked the look of the 3D rendered satisfying videos - so I took inspiration from one I found online! In the future I will be timing the swing of the pendulum to follow exactly the wave of the cylinders. I would also like to add more balls to scene to make it a bit more complex looking. 

src/main.ts

@@ -61,8 +61,8 @@ function main() {
   // Initial call to load scene
   loadScene();
 
-  const camera = new Camera(vec3.fromValues(0, 0, -10), vec3.fromValues(0, 0, 0));
-
+  const camera = new Camera(vec3.fromValues(-6 * 0.8, 7 * 0.8, 10 * 0.8), vec3.fromValues(0, 0, 0));
+  
   const renderer = new OpenGLRenderer(canvas);
   renderer.setClearColor(164.0 / 255.0, 233.0 / 255.0, 1.0, 1);
   gl.enable(gl.DEPTH_TEST);