Projects

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

 

Computer Graphics Final Project

COMPUTER GRAPHICS
FINAL PROJECT

Members and responsibilities:

Member Responsibility
Giovanni Ryan M Modelling and coding
Muhammad Arifazan Modelling and coding
Vincent Wonginsidi Modelling and coding

Title: Make Your Own Character

Description:

Make Your Own Character is a WebGL-based interactive application that allows users to create their own character and to change its appearance based on the choices that the user selected. The choices available are pre-determined in the application, like most character selection features. The user will be able to customise several aspects of the character’s appearance, like their eyes, nose, and mouth, among others.

The reason behind this project is because we are interested in the making of a character, as the users can make characters for their in-game representation. In a digital world, there’s no stopping anyone to wish to look like anyone else.

Sketch:

small

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

Washi Tape Factory – Proposal

SCRIPTING LANGUAGES
FINAL PROJECT

JESSY AND VINCENT’S
washi1

Washi Tape Factory (WTF for short) is a washi tape supplier. Washi tape is a type of Japanese tape that is popular for decorating books, pens, pencils, mugs, vases… basically everything. Here at WTF, we sell imported washi tapes, as well as local ones.

There are not many washi tape suppliers here, so our job is to assist our customers pick the best tapes. Ultimately, we want to spread the love for washi tapes in our town.

To better reach our customers, we decided to stick with an online shop model. This is the early draft for our web design:

S__12664863

As you can see from the beautifully hand-drawn design above, the website will contain these things:

  • Title bar, with date.
  • Navigation bar, making it easier for the visitors to check out the page.
  • Sign up and login buttons, with a shopping cart below it.
    • These buttons redirect the visitors to the sign up and login page.
  • Image objects, representing the new items for the month.

Not displayed in this design are:

  • Admin page.
  • A database containing customer information, product information, and past transactions.
  • Several JavaScript actions.
  • Framework (if possible).

Thank you for reading! We hope you’ll have a wonderful time visiting our shop!

Jessy Janlie 1801443561
Vincent Wonginsidi 1801444425