Tuntunan PRAKTIKUM

GRAFIKA KOMPUTER

Jurusan Ilmu Komputer

Fakultas Matematika dan Ilmu Pengetahuan Alam
Universitas Lampung
2019
Disusun oleh:

Daftar Pustaka
Lab. 1 Garis, Segiempat dan Tulisan
Lab. 2 Kurva dan Lingkaran
Lab. 3 Transformasi dan Dasar Animasi
Lab. 4 Transformasi dan Animasi Lanjut
Lab. 5 WebGL - Basic
Lab. 6 WebGL dengan P5.js - Geometri 3D
Lab. 7 WebGL dengan P5.js - Cahaya and Materi
Lab. 8 WebGL dengan P5.js - Tekstur
Lab. 9 WebGL dengan P5.js - Kamera and Perspektif
Lab. 10 WebGL dengan P5.js - OBJ Model & Membuat Bentuk 3D
Lab. 11 WebGL dengan THREE.js
Lab. 12 Fractals 1
Lab. 13 Fractals 2
Lab. 14 Fractals 3

Perangkat Lunak yang dibutuhkan:

o Web Browser
o Text Editor
o Canvasjsbin, http://o.ooli.ca/canvasjsbin
o P5.js, http://p5js.org/, https://p5js.org/download/ atau https://editor.p5js.org/,
https://p5js.org/examples/

o THREE.js,
 Lab. 1
Garis, Segiempat dan Tulisan

https://youtu.be/EO6OkltgudE

https://youtu.be/DO39gMDLLYU
https://youtu.be/38ygwI6U4K8

https://youtu.be/FmX2W2y8ZFs

Lab. 2
Kurva dan Lingkaran

https://youtu.be/83L6B13ixQ03
https://youtu.be/xe784ngfb2A

https://youtu.be/HQtIxOJj2oY

Lab. 3
Transformasi dan Dasar Animasi

https://youtu.be/IZ2rcFSaFRY
https://youtu.be/y1mCSayw2Gs

https://youtu.be/AHLRuU-mWy0

https://youtu.be/DlHKoi80K3c

https://youtu.be/MaHVucsqf8k
https://youtu.be/H5lT25I8s88

Lab. 4
Transformasi dan Animasi Lanjut

https://youtu.be/yq2au9EfeRQ4

https://youtu.be/vxljFhP2krI5

Lab. 5
WebGL - Basic
https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt

WebGL Tutorial 01 - Setup and Triangle

WebGL Tutorial 02 - Rotating 3D Cube

WebGL Tutorial 03 - Textured Cube

WebGL Tutorial 04 - Loading External Meshes and Shaders

WebGL Tutorial 05 - Phong Lighting

 Lab. 6
WebGL dengan P5.js - Geometri 3D

https://youtu.be/nqiKWXUX-o8
Introduction to WebGL in p5.js - WebGL and p5.js

https://youtu.be/6TPVoB4uQCU 2

Lab. 7
WebGL dengan P5.js - Cahaya and Materi

https://youtu.be/k2FguXvqp60

Lab. 8
WebGL dengan P5.js - Tekstur

https://youtu.be/O1mYw-3Wl_Q
 https://youtu.be/3tTZlTq4Cxs

Lab. 9
WebGL dengan P5.js - Kamera and Perspektif

https://youtu.be/BW3D9WwalQE

Lab. 10
WebGL dengan P5.js - OBJ Model & Membuat Bentuk 3D

https://youtu.be/FUI7HEEz9B0

https://youtu.be/DZlw-IS5OkI
 Lab. 11
WebGL dengan THREE.js

https://www.youtube.com/playlist?list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg

Introduction to THREE.js

1 - Setting up Libraries and WAMP Server

2 - Creating a Basic Scene

3 - XYZ Axis of Blender vs. THREE.js and Enabling Shadows and Materials

4 – Creating and Controlling an Animation with the DAT.GUI Interface

5 – Creating a Spot Light and Understanding the Properties with DAT GUI

6 – Mesh to Line Animation with the Dashed Line Material

7 - Properly Using the Geometry Class

8 – Traversing a Scene to Add and Remove Objects

9 – Lighting Properties within THREE.js

10 – Importing Blender Scenes in THREE.js

Learning THREE.js

11 -- Live Web Audio Visualizations

12 -- Basic Blender Object to JSON Import

13 -- Blender "Talking Monkey" Animation Import

14 -- Blender OSL Cycles Baking and JSON Export with UVs

15 -- Basic Blender Skeleton Rigging for Three.js

16 -- Building a Basic Clock

17 -- Creating Blender Sprite Sheets for the Web

18 -- Creating a Point Cloud Star Field with Blender

 Lab. 12
Fractals 1

https://youtu.be/-wiverLQl1Q
8.1: Fractals - The Nature of Code

https://youtu.be/s3Facu6ZVeA
8.2: Fractal Recursion - The Nature of Code

https://youtu.be/_BOtJncHCVA
8.3: Fractal Recursion with ArrayList of Objects (Koch Curve) - The Nature of Code

https://youtu.be/RWAcbV4X7C8
8.4: Recursion with Transformations - The Nature of Code
 Lab. 13
Fractals 2

https://youtu.be/0jjeOYMjmDU
Coding Challenge #14: Fractal Trees - Recursive

https://youtu.be/fcdNSZ9IzJM
Coding Challenge #15: Fractal Trees - Object Oriented

https://youtu.be/f6ra024-ASY
8.5: L-Systems - The Nature of Code
 https://youtu.be/E1B4UoSQMFw
Coding Challenge #16: Fractal Trees - L-System

https://youtu.be/kKT0v3qhIQY
Coding Challenge #17: Fractal Trees - Space Colonization

shttps://youtu.be/JcopTKXt8L8
Coding Challenge #18: 3D Fractal Trees

https://youtu.be/kFjq8PX6F7I
The Coastline Paradox Explained

Lab. 14
Fractals 3

https://youtu.be/6z7GQewK-Ks
Coding Challenge #21: Mandelbrot Set with p5.js
 https://youtu.be/fAsaSkmbF5s
Coding Challenge #22: Julia Set in Processing

https://youtu.be/2JUAojvFpCo
The Mandelbrot Set: How it Works, and Why it's Amazing!

https://youtu.be/mg4bp7G0D3s
The Julia Sets: How it Works, and Why it's Amazing!

https://www.youtube.com/watch?v=JFugGF1URNo
Coding Challenge #108: Barnsley Fern

https://www.youtube.com/watch?v=f0lkz2gSsIk
Coding Challenge #12: The Lorenz Attractor in Processing

https://www.youtube.com/watch?v=DKGodqDs9sA
7.1: Cellular Automata - The Nature of Code

https://www.youtube.com/watch?v=W1zKu3fDQR8
7.2: Wolfram Elementary Cellular Automata - The Nature of Code

https://www.youtube.com/watch?v=tENSCEO-LEc
7.3: The Game of Life - The Nature of Code
https://www.youtube.com/watch?v=FWSR_7kZuYg

https://www.youtube.com/watch?v=FLwHvhUTthc
7.4: Cellular Automata Exercises - The Nature of Code

Teka-teki

https://www.youtube.com/watch?v=oUBAi9xQ2X4
Coding Challenge #134.1: Heart Curve