Computer Graphics Final Project: finished

Finally, an update. And just in time for the end of the course.

We made an online character creation sim. It’s so creatively called “Make Your Own Character”. As expected, it’s made using WebGL. For the characters, we used Blender. To connect the model with the browser, we used Babylon.js.

The program shows a model and 15 buttons in five groups of three. These five groups are: head, body (torso), arms, legs, and feet. Each group’s three buttons change textures. In order, they are: batik, rainbow, and polkadot. Users can then combine the button choices and create one of 200+ combinations.

As mentioned above, Blender is where the models are made. We created five simple shapes which is then shaped one by one into the body parts. As for the textures, they are taken online, then they are fitted to the body parts.

Nothing is simpler than clicking a button, and that’s how the users navigate to the program. Aside of the buttons, users can drag the browser area to see the full model shape.

For job divisions, we pretty much share everything to the point that we can’t tell who’s making what anymore, so everyone has a part in each area of the project: model, textures, coding and documentation.

Screenshot dump:

The interface:
1

The model:
2

How the fitted textures look like:
3

 

Washi Tape Factory: finished!

Yes, we’re finally finished with Washi Tape Factory! Please view this short promotional video to learn all the features in less than four minutes!

Of course, we’ll also explain about those features here.

  • Logo: go to the home page.
  • Products: go to the products page. Clicking it will expose a dropdown that lets you view all the tapes by category.
  • About: go to the about us page.
  • Right side of the bar: changes depending on whether or not you’re signed in.
    • When not signed in:
    • When signed in:
      • Welcome, [name]!: show the information of the user. Clicking it will expose a dropdown with two options:
        • Edit information: change your personal information.
        • Previous purchases: see your, well, previous purchases.
        • Super Secret Admin Pagechange admin-specific options. Only available if the logged-in user is an admin.
      • Shopping cart: go to the shopping cart page. Review your cart before checking out.
      • Log out: log out from the site, and return to the guest site display.

Home page

  • Carousel: view what’s happening in Washi Tape Factory! Use the arrows or the buttons to navigate.
  • Latest tapes: view our latest tapes on sale, right from the homepage.
  • More tapes: view the rest of the tapes for sale.

Log in / sign up page

  • Log in side: for existing users. Simply input a username and a password, then click the button.
  • Sign up side: for new users who want to shop at the site. Fill all the fields to make a new account. Automatically logged in after account creation.

Products page

    • Browse all the tapes on sale in this page.
    • Categories can be selected from the left side or the page or the drop-down menu on the navigation bar.
      • Viewing “all” shows the category a tape is in. This doesn’t appear when viewing a specific category.
    • To order a tape, simply click the price. The site will alert you upon successful addition to your shopping cart.
    • The descriptions are really short, so we think that a separate item page won’t be necessary.
    • The number of items in a row changes depending on the width of the browser, as in the case of responsive websites:

responsive-product

About us page

  • Short history of who we are.
  • Includes contact information, but it’s blurred in the video because it’s uploaded on YouTube and we don’t want to disclose our phone numbers, do we?

Shopping cart page

  • List of the things you’ve added to the shopping cart.
  • If you hover on the images, you’ll see a bigger preview of the image.

Super Secret Admin page

  • Only admins can access this section. There are five sections:
    • Add / delete admins: click the button to toggle a user’s admin status.
    • Delete users: click the button delete a user. Admins cannot be deleted.
      • Admin powers aren’t required to add users; simply use the sign up page.
    • View past transactions: look at every user’s past transactions, even the deleted ones.
    • Add a product: fill out all the fields to add a product. Pops up in the latest tapes section after creation. Pictures have to be JPG.
    • Delete a product: click the button to delete a product. Pictures are hoverable. Product ID doesn’t adjust when deleting the last product.

That’s all for the site! To see Jessy’s version of this post, click here.

Cheers,
Vincent Wonginsidi, 1801444425
and Jessy Janlie, 1801443561