Fakultas Ilmu Komputer UI

Commit 92902238 authored by Rachmat Ridwan's avatar Rachmat Ridwan
Browse files

Merge branch 'dark-theme' of https://gitlab.cs.ui.ac.id/grafkom-2020-a3r/ws-2 into dark-theme

parents a63f8910 f85a40aa
......@@ -236,22 +236,22 @@ main()
<div class="submenu">
<h3 class="submenu-title">Lokasi Cahaya</h3>
<div class="slider-container">
<label>Lorem<b>
<label>X<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
<input type="range" step="0.01" name="lightPositionX" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
<div class="slider-container">
<label>Ipsum<b>
<label>Y<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
<input type="range" step="0.01" name="lightPositionY" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
<div class="slider-container">
<label>Dolor<b>
<label>Z<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="speed" value="0" min="0" max="4" class="custom-range range-speed">
<input type="range" step="0.01" name="lightPositionZ" value="0" min="-10" max="10" class="custom-range range-speed">
</div>
</div>
</div>
......@@ -272,6 +272,34 @@ main()
<input type="range" step="0.1" name="arm.R.rotation.x" value="0" min="-45" max="135"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Kaki Kiri<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="leg.L.rotation.x" value="0" min="-60" max="60"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Kaki Kanan<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="leg.R.rotation.x" value="0" min="-60" max="60"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Telapak Kaki Kiri<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="boot_lower.L.rotation.x" value="0" min="-5.5" max="22.7"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Telapak Kaki Kanan<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="boot_lower.R.rotation.x" value="0" min="-5.5" max="22.7"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Pedang<b>
<div class="slider-value">0</div>
......@@ -297,7 +325,7 @@ main()
<label>Rotasi Anggukan Kepala<b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.x" value="0" min="-90" max="9 0"
<input type="range" step="0.1" name="head.rotation.x" value="0" min="-90" max="90"
class="custom-range range-animation" />
</div>
<div class="slider-container">
......@@ -318,61 +346,74 @@ main()
<!-- TODO: Change Slider Ayam-->
<div class="submenu">
<h3 class="submenu-title">Gerakan Ayam</h3>
<div class="slider-container">
<label>Rotasi Tangan Kiri: <b>
<label>Rotasi Kepala <b>
<div class="slider-value">1</div>
</b></label>
<input type="range" step="0.01" name="chicken.head.rotation.x" value="1" min="-5" max="10"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Badan <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="arm.L.rotation.x" value="0" min="-45" max="135"
<input type="range" step="0.1" name="chicken.body.rotation.x" value="0" min="-90" max="90"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Tangan Kanan: <b>
<label>Rotasi Sisir Ayam <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="arm.R.rotation.x" value="0" min="-45" max="135"
<input type="range" step="0.1" name="chicken.comb.rotation.x" value="0" min="-16" max="11"
class="custom-range range-animation" />
</div>
<div class="slider-container">
<label>Rotasi Sayap Kiri <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="chicken.wing.L.rotation.z" value="0" min="-60" max="0"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Pedang: <b>
<label>Rotasi Sayap Kanan <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="sword_grip.rotation.x" value="0" min="-90" max="90"
<input type="range" step="0.1" name="chicken.wing.R.rotation.z" value="0" min="0" max="60"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Tolehan Kepala: <b>
<label>Rotasi Kaki Kanan <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.z" value="0" min="-90" max="9 0"
class="custom-range range-animation" />
<input type="range" step="0.1" name="chicken.leg.R.rotation.x" value="0" min="-90" max="90"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Kedipan Mata: <b>
<div class="slider-value">1</div>
<label>Rotasi Kaki Kiri <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.01" name="eye.scale.z" value="1" min="0" max="1"
<input type="range" step="0.1" name="chicken.leg.L.rotation.x" value="0" min="-90" max="90"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Anggukan Kepala: <b>
<label>Rotasi Cakar Kanan <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="head.rotation.x" value="0" min="-90" max="9 0"
class="custom-range range-animation" />
<input type="range" step="0.1" name="chicken.claw.R.rotation.x" value="0" min="-12" max="25"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Loncatan: <b>
<label>Rotasi Cakar Kiri <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="body.location.z" value="0" min="0" max="0.5"
<input type="range" step="0.1" name="chicken.claw.L.rotation.x" value="0" min="-12" max="25"
class="custom-range range-animation">
</div>
<div class="slider-container">
<label>Rotasi Badan: <b>
<label>Lompatan <b>
<div class="slider-value">0</div>
</b></label>
<input type="range" step="0.1" name="body.rotation.x" value="0" min="-90" max="90"
<input type="range" step="0.1" name="chicken.body.location.z" value="0" min="-1" max="1"
class="custom-range range-animation">
</div>
</div>
......
......@@ -142,6 +142,22 @@ function connectSpeedSlider() {
speedValueDisplay.innerText = Math.round(animationManager.speed * 100) + '%';
}
function connectLightPositionSliders() {
document.querySelectorAll('input[name^=light]').forEach(lightPositionSlider => {
const valueDisplay = lightPositionSlider.parentElement.querySelector('.slider-value');
const name = lightPositionSlider.getAttribute('name');
valueDisplay.innerText = sceneGraph[name];
lightPositionSlider.value = `${sceneGraph[name]}`;
lightPositionSlider.addEventListener('input', function(event) {
let value = parseFloat(event.target.value);
valueDisplay.innerText = value;
sceneGraph[name] = value;
sceneGraph.updateLightPosition();
});
});
}
/**
* Update eye coordinate calculation from global
* variables `radius`, `theta`, and `phi`.
......@@ -343,6 +359,7 @@ window.addEventListener('load', function init() {
connectSlidersToModelData()
connectSpeedSlider()
connectLightPositionSliders()
attachListenerOnAnimationUpdate()
if (typeof initObjectSelectionMechanism !== 'undefined') {
......
......@@ -24,7 +24,10 @@ class SceneGraph {
this.materials = {}
this.lightPosition = vec4(0, -10, 10, 0.0)
this.lightPositionX = 0;
this.lightPositionY = -10;
this.lightPositionZ = 10;
this.lightParams = {
ambient: vec4(0.2, 0.2, 0.2, 1.0),
diffuse: vec4(1.0, 1.0, 1.0, 1.0),
......@@ -35,6 +38,23 @@ class SceneGraph {
this.vBuffer = []
}
get lightPosition() {
return vec4(
this.lightPositionX,
this.lightPositionY,
this.lightPositionZ,
0.0
);
}
set lightPosition(lightPosition) {
if (lightPosition.length >= 3) {
this.lightPositionX = lightPosition[0];
this.lightPositionY = lightPosition[1];
this.lightPositionZ = lightPosition[2];
}
}
initMaterialsFromConfig(materialsData) {
materialsData.forEach(material => {
this.materials[material.name] = material
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment