CSE 160 S21 PA5

Carl Erez: cerez@ucsc.edu

Honey Bear 3D, due 6/6/21

Code:
  • - driver.html
  • - asg3.js
  • - cylinder.js


  • Description:

    In addition to working on this assignment these past two weeks, I have also been working on
    my capstone game for CMPM 172, entitled Honey Bear (https://team-bbbees.itch.io/honey-bear),
    and decided to take inspiration from it and build a small, 3 dimensional gardening environment.
    Thus, the player is able to move around the small world (WASD and arrow keys). The goal of the
    program is to give the player a little sandbox to shape, so they can pick up the beehive and the
    various flowers by pressing SPACE or ENTER when near the item in question, picking the first placed
    in the case of a tie. The player can also give themselves new flowers of various colors by pressing
    either the buttons below the game view, or by pressing the H,J,K,L keys. To bring extra joy to the
    sandbox, there is also a swarm of bees that go from flower to flower collecting pollen before
    eventually returning to the hive. To ensure that they player can properly look around their garden
    and watch the bees do their work, the player can also use the move to look around the scene, as the
    camera rotates when the mouse pointer is near the sides of the screen.

    The ai used by the bees was based off of code provided by Ben Rowland, Mark Medved, et. al., but did
    require a large number of adjustments to change its environment from a 2D Phaser3 game to a THREE JS
    3D environment. Note that the code does require a reasonable amount of computation for each bee, so
    the program may start to slow down with the addition of new bees.



    Reflection:

    This project really showed me the importance of testing out library functions and figuring out exactly
    what they output before trying to use them extensively. For example, getting the sideways camera rotation
    to work properly with the vertical rotation took far longer than it really should have, as I kept on trying
    to rotate around a local up vector, which ended up rotating with the cube, when I needed to rotate around a
    world axis, which still only rotates objects in place rather than adjusting the position like one might
    expect from rotation around a non-internal body. As well, figuring out why my objects were disappearing when
    being made children of the camera, as well as why they would disappear when being removed from it was quite
    frustrating. The former somewhat makes sense, as the camera apparently wasn't associated with the scene by
    default, but the removeChildFromParent method listed in the documentation was not accepted by the library,
    and I was unable to merely remove an object from being the camera's child, instead having to set its parent
    to the scene and thus automatically popping it from the camera. Also, due to weirdnesses between world vs local
    coordinates, getting the sideways vector for side to side movement works perfectly, but when trying to use the
    same sideways vector for up/down camera rotation, it would cause rotation in spiral patterns rather than just
    vertically.

    As well, adapting the ai code from one environment to another was easier than I expected, but still quite time
    time consuming. Realizing that I could just swap from one vector class to another rather than redoing all of the
    math saved a lot of time, but making all of the scale adjustments (1 THREE JS unit is so much larger than 1 pixel)
    not only took some work, but also led to some very weird bugs, such as the bees, not wanting to get too close to
    the player, fleeing beyond the bounds of the world to get away. One other challenge was getting the models to look
    decent. I eventually decided that I needed to make a temporary tool that gave me more direct control of the attributes
    of a given model while shaping it for a flower, but that was after wasting far too much time trying to create the
    model only through my code in asg5.js. I really would have liked to have had multiple flowers, but I will have to
    accept just having recolors.

    Overall, while I am happy with my final result, I wish I had more experience with THREE.js, or just another few days,
    as I had finally overcome most of my technical hurdles and could have started to make more assets for the player to
    place in their garden.



    Sample Output:
    Video Submission

    A small garden