Scribd
Upload
23 views13 pages

Introduction To Computer Graphics

This document provides an introduction and syllabus for an intro to computer graphics class. It includes: - Contact information and research interests for the instructor, Sulaeman Santoso - Classroom rules regarding attendance, cheating, use of AI/other learning sources - An outline of topics to be covered before and after midterm, including 2D/3D graphics, transformations, image processing, and a final project - An introduction explaining that computer graphics is used widely in apps, websites, and games, and the class will cover how to display and manipulate images - Details on using tools like VS Code, HTML, CSS, JavaScript, and Node.js for assignments - An initial

Uploaded by

willyandie saputra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views13 pages

Introduction To Computer Graphics

This document provides an introduction and syllabus for an intro to computer graphics class. It includes: - Contact information and research interests for the instructor, Sulaeman Santoso - Classroom rules regarding attendance, cheating, use of AI/other learning sources - An outline of topics to be covered before and after midterm, including 2D/3D graphics, transformations, image processing, and a final project - An introduction explaining that computer graphics is used widely in apps, websites, and games, and the class will cover how to display and manipulate images - Details on using tools like VS Code, HTML, CSS, JavaScript, and Node.js for assignments - An initial

Uploaded by

willyandie saputra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Intro to

Computer
Graphics
Sulaeman santoso, S.Kom. M.T.
Introducing
myself
Sulaeman Santoso
Research interest :
Game Dev, Computer Graphic, AR, VR, etc
Hobbies :
Culinary, Games, Animals, Music, etc
Contact me :
Tele : @sulaemansantoso
Group tele (plz join) : https://t.me/+Bsl4fDYsG-IwNzNl
01
Our classroom
rulez
Please read them carefully
Classroom rulez
Don’t be late, if you are late you can still enter class but your attendance will not be
Attendance recorded
Any cheating behaviour will result in you and your partner in crime to be expelled from my
Cheating class

Classroom Please pay attention in class and dont disturb your friend when they are studying.
The use of chatGPT or other AI is not permissible until final project. You may use ai on
your final project but you have to explicitly state that this part of your code is ai
generated.

AI related Ai might help you in project but when you’re learning fundamental it usually confused
beginner, and prevent you from actually learning the thought process of what you’re
learning.

You may use other learning sources to learn the material such as other youtube channel
Other learning
or websites outside of the class . But do so at your own risk. Make sure you understand
sources and not just copy and paste
Our Syllabus
Before Mid After mid
01 Term 02 term
- 2D graphics - 3D graphics
primitives primitives
- 2D transformation - 3D transformation
- Image processing - Final project
basic
Introduction
Computer Graphics is all around you.
Every app you use, every website you
visit, every game you play.

But how does it work ? how do you


display and image on the screen ?
How do you manipulate those image ?

That is what we’re going to learn in this


class
Tool of the trade
We will be using :
- Vs code
- html , css , javascript
- Nodejs (npm)
Please install node on your computer
Your task for today
- Watch the video given in morning.
- Answer this questions :
1. Can you translate the code given on the video to a modular javascript ? (see next slides)
2. Can you create a box function using the draw dot method ?
3. Can you draw a chess board using box function from no 2 ?
4. Can you draw a triangle using draw dot method ?
5. What happen when you use draw dot method on an already drawn canvas (you can try to
draw image on canvas using other command you can google on the web ) ?
6. Can you get the color from the canvas ? can you change the color ?
Modular javascript
Modern javascript uses module to organize its code, you need to learn them as well. To compile
javascript using module you will need to use type=module on your script tag. There are other way
to do this but this is the easiest.
You can split your code to a different file
Usually with the old javascript we can include another javascript using <script src=””> </script>
But with modern javascript we can use the import keyword

The old approach :

The new approach :


Export
In order to import the method / variable or anything else from a code we need to first exported it first
on the source code. To do so we have the export keyword. This approach is called named export.
There are several ways to do this, you can look at the detail on the web. (left is index.js right is how to
call it). You can also do an export default. Please browse on web for how to do so
Other Functionality that can help
Array/ Object destructuring

You might also like