From 63ecdebe2c3d7ce95448fa18cfd89978f3468242 Mon Sep 17 00:00:00 2001
From: hernowoaris <hernowoarisutanto@gmail.com>
Date: Thu, 9 Mar 2023 17:22:01 +0700
Subject: [PATCH] add polygon, triangle, rectangle, and select button
---
worksheet1.html | 7 +-
worksheet1.js | 174 ++++++++++++++++++++++++++++++++++--------------
2 files changed, 127 insertions(+), 54 deletions(-)
diff --git a/worksheet1.html b/worksheet1.html
index 6066839..69e9991 100644
--- a/worksheet1.html
+++ b/worksheet1.html
@@ -39,9 +39,10 @@
</div>
<div class="box container-shape">
<div class="container-button-shape">
- <button id ="line">Line</button>
- <button id ="triangle">Triangle</button>
- <button id ="rectangle">Rectangle</button>
+ <button class="button-shape" id ="polygon" type="button">Polygon</button>
+ <button class="button-shape" id ="line" type="button">Line</button>
+ <button class="button-shape" id ="triangle" type="button">Triangle</button>
+ <button class="button-shape" id ="rectangle" type="button">Rectangle</button>
</div>
<button id ="end-polygon">End Polygon</button>
</div>
diff --git a/worksheet1.js b/worksheet1.js
index 8e424bb..3199719 100644
--- a/worksheet1.js
+++ b/worksheet1.js
@@ -6,25 +6,17 @@ var gl;
var maxNumPositions = 200;
var index = 0;
var cindex = 0;
-var t, tt;
+var t = []; //vertices
+var tt; //vec4 color
var numPolygons = 0;
var numPositions = [];
numPositions[0] = 0;
var start = [0];
-
+var first = true;
var ObjShape = "";
var drawArraysConfig = {};
-
-var colors = [
- vec4(0.0, 0.0, 0.0, 1.0), // black
- vec4(1.0, 0.0, 0.0, 1.0), // red
- vec4(1.0, 1.0, 0.0, 1.0), // yellow
- vec4(0.0, 1.0, 0.0, 1.0), // green
- vec4(0.0, 0.0, 1.0, 1.0), // blue
- vec4(1.0, 0.0, 1.0, 1.0), // magenta
- vec4(0.0, 1.0, 1.0, 1.0) // cyan
-];
-
+var SHAPES = []; // list dari gambar yang dibuat
+var speed = 100;
init();
@@ -58,12 +50,6 @@ function init() {
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLoc);
- // var m = document.getElementById("gl-canvas");
-
- // m.addEventListener("click", function() {
- // cindex = m.selectedIndex;
- // });
-
const red = document.getElementById("red");
const green = document.getElementById("green");
const blue = document.getElementById("blue");
@@ -75,50 +61,136 @@ function init() {
updateColor();
-
- var buttonShape = document.getElementsByClassName("container-button-shape");
- console.log(buttonShape);
- for (var i=0; i<buttonShape.length; i++) {
- let button = buttonShape[i]
- button.addEventListener("click", function() {
- removeClass(button);
- ObjShape = button.value
- button.classList.add("selected")
- })
- }
+ document.getElementById('polygon').addEventListener('click', function() {
+ ObjShape = 'polygon';
+ console.log("jadi polygon")
+ });
+ document.getElementById('rectangle').addEventListener('click', function() {
+ ObjShape = 'rectangle';
+ });
+ document.getElementById('triangle').addEventListener('click', function() {
+ ObjShape = 'triangle';
+ });
+
var a = document.getElementById("end-polygon")
a.addEventListener("click", function(){
- numPolygons++;
- numPositions[numPolygons] = 0;
- start[numPolygons] = index;
- render();
+ if(ObjShape == "polygon"){
+ numPolygons++;
+ numPositions[numPolygons] = 0;
+ start[numPolygons] = index;
+ drawArraysConfig = {
+ "nama": ObjShape,
+ "mode": gl.TRIANGLE_FAN,
+ "index": index - numPositions[numPolygons-1],
+ "step": numPositions[numPolygons - 1]
+ }
+ // reset vertices & menambahkan ke gambar yang dibuat
+ SHAPES.push(drawArraysConfig)
+ t = []
+ render()
+ }
});
+
- canvas.addEventListener("mousedown", function(event){
- t = getCanvasCoordinate(event, canvas)
- gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
- gl.bufferSubData(gl.ARRAY_BUFFER, 8*index, flatten(t));
-
- tt = vec4(red.value/255.0 ,green.value/255.0 , blue.value/255.0 , 1.0);
- console.log(tt)
- gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId );
- gl.bufferSubData(gl.ARRAY_BUFFER, 16*index, flatten(tt));
- numPositions[numPolygons]++;
- index++;
+ canvas.addEventListener("mousedown", function(event){
+ if(ObjShape == "polygon"){
+ t = getCanvasCoordinate(event, canvas);
+ gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
+ gl.bufferSubData(gl.ARRAY_BUFFER, 8*index, flatten(t))
+
+ tt = vec4(red.value/255.0 ,green.value/255.0 , blue.value/255.0 , 1.0);
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, cBufferId);
+ gl.bufferSubData(gl.ARRAY_BUFFER, 16*index, flatten(tt))
+
+ numPositions[numPolygons]++
+ index++
+ }
+ else if(ObjShape == "rectangle"){
+ drawArraysConfig = {
+ "nama": ObjShape,
+ "mode": gl.TRIANGLE_FAN,
+ "index": index,
+ "step": 4
+ }
+ if(first) {
+ first = false;
+ gl.bindBuffer( gl.ARRAY_BUFFER, bufferId)
+ t[0] = getCanvasCoordinate(event, canvas);
+ }
+
+ else {
+ first = true;
+ t[2] = getCanvasCoordinate(event, canvas);
+ t[1] = vec2(t[0][0], t[2][1]);
+ t[3] = vec2(t[2][0], t[0][1]);
+ for(var i=0; i<4; i++) gl.bufferSubData(gl.ARRAY_BUFFER, 8*(index+i), flatten(t[i]));
+ index += 4;
+
+ gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId);
+ var tt = vec4(red.value/255.0 ,green.value/255.0 , blue.value/255.0 , 1.0);
+ for(var i=0; i<4; i++) gl.bufferSubData(gl.ARRAY_BUFFER, 16*(index-4+i), flatten(tt));
+
+ // reset vertices & menambahkan ke gambar yang dibuat
+ t = [];
+ SHAPES.push(drawArraysConfig);
+ }
+ }
+ else if(ObjShape == "triangle") {
+ drawArraysConfig = {
+ "nama": ObjShape,
+ "mode": gl.TRIANGLE_FAN,
+ "index": index,
+ "step": 3
+ }
+ gl.bindBuffer( gl.ARRAY_BUFFER, bufferId);
+ if(first) {
+ first = false;
+ t[0] = getCanvasCoordinate(event, canvas)
+ }
+
+ else {
+ if(t.length == 1) {
+ t[1] = getCanvasCoordinate(event, canvas)
+ }
+ else {
+ first = true;
+ t[2] = getCanvasCoordinate(event, canvas)
+
+ for(var i=0; i<3; i++) gl.bufferSubData(gl.ARRAY_BUFFER, 8*(index+i), flatten(t[i]));
+ index += 3;
+
+ gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId);
+ var tt = vec4(red.value/255.0 ,green.value/255.0 , blue.value/255.0 , 1.0);
+ for(var i=0; i<3; i++) gl.bufferSubData(gl.ARRAY_BUFFER, 16*(index-3+i), flatten(tt))
+
+ // reset vertices & menambahkan ke gambar yang dibuat
+ t = [];
+ SHAPES.push(drawArraysConfig);
+ }
+ }
+ }
});
-
-
+ if(ObjShape != "polygon") {
+ render();
+ }
}
function render() {
-
gl.clear( gl.COLOR_BUFFER_BIT );
- for(var i=0; i<numPolygons; i++) {
- gl.drawArrays( gl.TRIANGLE_FAN, start[i], numPositions[i] );
+ // for(var i=0; i<numPolygons; i++) {
+ // gl.drawArrays( gl.TRIANGLE_FAN, start[i], numPositions[i] );
+ // }
+ for(var i = 0; i<SHAPES.length; i++){
+ var obj = SHAPES[i];
+ gl.drawArrays( obj["mode"], obj["index"], obj["step"] );
}
+ setTimeout(() => {
+ requestAnimationFrame(render)
+ }, speed);
}
//fungsi untuk mendapatkan koordinat pada saat mousedown event
@@ -141,4 +213,4 @@ function updateColor() {
const rgb = `rgb(${r}, ${g}, ${b})`;
color.value = rgb;
color.style.backgroundColor = rgb;
- }
+}
--
GitLab