Skip to content

Commit 39e941c

Browse files
openalgorithmdevelopersopenalgorithmdevelopers
committed
added UI to the scripts.
1 parent d66edd8 commit 39e941c

File tree

2 files changed

+41
-16
lines changed

2 files changed

+41
-16
lines changed

‎Computer Graphics/3D_standard_rotation.HTML

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,20 @@
44
</head>
55
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
66
<body onload="InitDemo();">
7-
<div class="main">
8-
<div class="left_pane col-lg-2">
9-
<br><br><br><br>
10-
<button type="button" id="xAxis" onclick="setXAxis()" class="btn btn-primary">X-axis</button>
11-
<br><br><br><br>
12-
<button type="button" id="yAxis" onclick="setYAxis()" class="btn btn-primary">Y-axis</button>
13-
<br><br><br><br>
14-
<button type="button" id="zAxis" onclick="setZAxis()" class="btn btn-primary">Z-axis</button>
7+
<div id="WebGL_output" class="container">
8+
<div class="row col-lg-12 h1 text-center font-weight-bold text-info">
9+
<b>Standard Rotations in Computer Graphics Fundamentals</b>
1510
</div>
16-
<div class="canvas_div col-lg-9">
17-
<canvas id="canvasId"></canvas>
11+
<div class="row">
12+
<div class="left_pane col-lg-1">
13+
<br><br><br><br>
14+
<button type="button" id="xAxis" onclick="setXAxis()" class="btn btn-primary">X-axis</button>
15+
<br><br><br><br>
16+
<button type="button" id="yAxis" onclick="setYAxis()" class="btn btn-primary">Y-axis</button>
17+
<br><br><br><br>
18+
<button type="button" id="zAxis" onclick="setZAxis()" class="btn btn-primary">Z-axis</button>
19+
</div>
20+
<canvas id="canvasId" class=" col-lg-11"></canvas>
1821
</div>
1922
</div>
2023
<script src="gl-matrix.js"></script>

‎Computer Graphics/Naive Line Algorithm.html

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,38 @@
1010
<head>
1111
<title>WebGL - Naive Line Algorithm.</title>
1212
</head>
13-
<body>
14-
<canvas id="canvas" width="1200" height="600">
15-
Your browser does not support HTML5
13+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
14+
<body onload="showOutput()">
15+
<div id="WebGL_output" class="container">
16+
<div class="row col-lg-12 h1 text-center font-weight-bold text-info">
17+
<b>Line rasterization with Naive Appraoch y = mx + c</b>
18+
</div>
19+
<div class="row col-sm-12 col-md-12 col-lg-12 col-xl-12">
20+
<form class="form-inline col-lg-2">
21+
<label class="text-info">Grid Size</label>
22+
23+
<input id="xGrid" type="number" min="10" max="1000" value="100" class="">
24+
<br><br>
25+
<button type="button" onclick="changeGrid()" class="btn btn-outline-success">Change Grid</button>
26+
</form>
27+
<canvas id="canvas" class="col-lg-10">
28+
</div>
29+
</div>
1630
</canvas>
1731
<br/>
1832
<script>
1933
//////////////////////////////// YOUR CODE SHOULD START AFTER THIS LINE //////////////////////
20-
var SCREEN_SIZE = 100;
21-
var verticesData = [];
22-
34+
var SCREEN_SIZE = 100;
35+
var verticesData = [];
2336

37+
function changeGrid(){
38+
var x = document.getElementById("xGrid").value;
39+
SCREEN_SIZE = x;
40+
showOutput();
41+
}
42+
43+
function showOutput()
44+
{
2445
var INTERCEPT = 0;
2546
var x1 = 10, y1 = 10;
2647
var x2 = 60, y2 = 50;
@@ -34,6 +55,7 @@
3455
}
3556

3657
draw(verticesData);
58+
}
3759
//////////////////////////////// YOUR CODE SHOULD END BEFORE THIS LINE //////////////////////
3860

3961
function XY_mapping(){

0 commit comments

Comments
 (0)