Computer Graphics Final Project

FLEUR HOTEL

This program offers 3D simulation which embraces interactivity and creativity, focusing on a particular company that owns several buildings/branches that are spread over the world. The objective of this project is to develop student’s programming skills and also to implement materials introduced in the lectures. The simulation contains interactivity such as zooming in, zooming out, rotating and scaling. Various designs and models are used in this project, including interior and exterior designs of buildings. During the process, we are challenged to work together as a team, deciding the designs for the project and to combine the codes and designs together to form the simulation. In the process, we distributed the tasks so that each member has their own job to do.

The simulation takes you to encounter an earth rotating, held on a hand model. If you click on the earth, it will direct you to another page, with different model shown. It is the model of a city. In the city page, if you click on the link provided, a building will appear along with its designs. This building is what we call ‘Fleur Hotel’, or the model of the company’s hotel design. And if you also click on the link provided on building page, you will be taken to see the interior of the room. This program can be used to portray 3D designs in an interactive way for construction before implemented in the real building.

For the modelling and texturing techniques, we use Three.js modelling (polygonal model, to be specific, for the Earth) and imported 3D models from Blender. For the API, we use WebGL and for the framework, we use Three.js.

There are still many things that can be improved from this simulation, for example we can add background music, animation so the program looks fluid, and manipulate the textures to appear on the models.

Video link -> https://www.youtube.com/watch?v=xeh0s2e4PGw&feature=youtu.be

First page (index.html)

First page (index.html)

View of the city

View of the city

View of hotel building

View of hotel building

View of interior design

View of interior design

CG Final Project Proposal

Background

Our group’s project for Com puter Graphics course is creating a 3D simulation on a particular company that owns several buildings/branches that are spread over the world.

Project description

The objective of this project to develop student’s programming skills and also to implement materials introduced in the lectures. Desired outcome of this project is to have an interactive 3D simulation on a particular company that owns several buildings/branches that are spread over the world. The simulation will contain effects such as zooming in, zooming out, and also interactive camera features. Designs that will be included are interior of buildings and design of exterior places. Potential pitfalls and challenges are to work together as a team, deciding the designs of the project and to combine the codes and designs together to form the simulation. In the process, our group will distribute the tasks so that each member has their own job to do. The division is Chavia and Veronica will be doing the design-related tasks and Claudia will be doing the programming-related part.

Project scope

The goal of this project is to build an interactive 3D simulation and to develop student’s programming skills and also to implement materials introduced in the lectures. Applications used are free and the deadline is by the end of the semester.

Environment (Tools and Frameworks)

JavaScript, WebGL, C, C++, OpenGL, three.js, babylon.js

Members

Chavia Zagita Karinda (1801450812)

Claudia Yohanna Haliz (1801442035)

Veronica (1801434651)

Design

OpeningInterface

CityView1

CityView2

SL Final Project

ONLINE SHOP: PEACHELLE

Peachelle is an e-commerce website for Scripting Languages final project. This website features shopping cart function and administrator page which connects with the database, making it easy for the administrator to manipulate data/products to be displayed on the website. We create it using Bootstrap template, then modify the codes using HTML, CSS, JavaScript, PHP, MySQL. Interactions are as stated in the Final Project Proposal. We’d like to apologize as at this stage the website’s display is still in disarray, but for future development, we hope we will be able to improve in making better websites (in display and in codes).

Watch the video -> CLICK HERE.

Claudia Yohanna Haliz – 1801442035
Veronica – 1801434651

Below are the screenshots of my team’s project:

2 3 5 6 8 9 10 11 12 13

SL Final Project Proposal

ONLINE SHOP: PEACHELLE

About Peachelle

Peachelle is an Indonesian online shop providing the latest trend of women’s clothing with affordable yet excellent fabrics quality. The products range from tops, bottoms, dresses, jumpsuits, outerwear, and accessories such as shawls, necklaces, rings, earrings, and bags. The name “Peachelle” came out of the founders’ abstract ideas of uniqueness, adding a touch of sweetness on it. Every piece of our product is curated and designed especially for young people who dare to explore their style with our fashionable products.

Interactions

Main page (Home)

  • In the main page, there will be a header, navigation bar and footer of the site.
  • The header will consist of:
    • Peachelle’s logo
    • Search box (to search for specific items from all of the products),
    • Log in or register button (the customer will be directed to a different page which has log in and registration from in it),
    • Confirm payment button (which will ask payment details of the customer), and
    • The shopping cart button (list of to-buy-products of the customer).
  • The navigation bar will consist of 4 links:
    • Home,
    • New arrivals,
    • Shop by categories (when this link is hovered using mouse, it will show an articles choice of box), and
    • Sale.
  • The footer will consist of several links:
    • About us,
    • How to order,
    • FAQ,
    • Terms and conditions,
    • Contact us,
    • Social media links,
    • Additional links if necessary.
  • Shopping at Peachelle: The steps
    • The customer browses the shop to find what he/she would buy.
    • Add the items to the shopping bag.
    • When the customer wants to finalize his/her buying, the customer must log in (registered member) or register (sign up as a member of the site. Add data to the database).
    • Check out after all details have been filled.

Claudia Yohanna Haliz – 1801442035
Veronica – 1801434651