Skip to content

Commit

Permalink
Merge branch 'main' into feature/draw_line
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin-rizki authored Feb 24, 2021
2 parents 173ed6a + ec47c79 commit 7954dbe
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 90 deletions.
8 changes: 8 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@
<button onclick="enterMode(modes.DRAWING)">Enter Drawing Mode</button>
<div class="spaceBox"></div>
<input id="colorPicker" type="color" value="#ff0000">
<div class="spaceBox"></div>
<input type="file" name="inputfile" id="inputfile">
<div class="spaceBox"></div>
<button onclick="loadFile()">Load Canvas</button>
<div class="spaceBox"></div>
<input type="text" id="fname" name="fname">
<div class="spaceBox"></div>
<button onclick="saveFile()">Save Canvas</button>
</div>
</div>
<div class="instruction">
Expand Down
142 changes: 134 additions & 8 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,117 @@ function enterMode(mode) {
currentMode = mode;
}

function loadFile() {
console.log("Test");
let file = document.getElementById("inputfile").files[0];
let fr = new FileReader();
fr.onload = function () {
let result = fr.result.split("\n");
canvasObject = [canvasObject[0]];
let i = 0;
while (i < result.length) {
if (result[i] == "R") {
i++;
let midpointArr = result[i].split(" ");
let midPoint = {
x: parseFloat(midpointArr[0]),
y: parseFloat(midpointArr[1]),
};
i++;
let colorArr = result[i].split(" ");
let color = {
red: parseFloat(colorArr[0]),
green: parseFloat(colorArr[1]),
blue: parseFloat(colorArr[2]),
};
i++;
let width = parseFloat(result[i]);
i++;
let attr = { midPoint: midPoint, color: color, width: width };
canvasObject.push(new Rectangle(attr.midPoint, attr.color, attr.width));
} else if (result[i] == "P") {
i++;
let midpointArr = result[i].split(" ");
let midPoint = {
x: parseFloat(midpointArr[0]),
y: parseFloat(midpointArr[1]),
};
i++;
let numSides = parseInt(result[i]);
i++;
let colorArr = result[i].split(" ");
let color = {
red: parseFloat(colorArr[0]),
green: parseFloat(colorArr[1]),
blue: parseFloat(colorArr[2]),
};
i++;
let radius = parseFloat(result[i]);
i++;
let attr = {
midPoint: midPoint,
color: color,
numSides: numSides,
radius: radius,
};
canvasObject.push(
new Polygon(attr.midPoint, attr.color, attr.numSides, attr.radius)
);
} else if (result[i] == "") {
i++;
}
}
renderAll();
};
try {
fr.readAsText(file);
} catch (e) {}
}

function saveFile() {
let filename = document.getElementById("fname").value;
let text = "";
for (let i = 0; i < canvasObject.length; i++) {
if (canvasObject[i] instanceof Rectangle) {
text += "R\n";
text += `${canvasObject[i].midPoint.x} ${canvasObject[i].midPoint.y}\n`;
text += `${canvasObject[i].color.red} ${canvasObject[i].color.green} ${canvasObject[i].color.blue}\n`;
text += `${canvasObject[i].width}\n`;
} else if (canvasObject[i] instanceof Polygon) {
text += "P\n";
text += `${canvasObject[i].midPoint.x} ${canvasObject[i].midPoint.y}\n`;
text += `${canvasObject[i].numSides}\n`;
text += `${canvasObject[i].color.red} ${canvasObject[i].color.green} ${canvasObject[i].color.blue}\n`;
text += `${canvasObject[i].radius}\n`;
}
}
let blob = new Blob([text], { type: "text/plain" });
let link = document.createElement("a");
link.download = filename;
link.innerHTML = "Download File";
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);
console.log(canvasObject);
}

// function loadFile() {
// // var filename = "readme.txt";
// // var text = "Text of the file goes here.";
// // var blob = new Blob([text], { type: "text/plain" });
// // var link = document.createElement("a");
// // link.download = filename;
// // link.innerHTML = "Download File";
// // link.href = window.URL.createObjectURL(blob);
// // document.body.appendChild(link);
// // console.log("Load File Success");
// // var fr = new FileReader();
// // fr.onload = function () {
// // console.log(fr.result);
// // //document.getElementById("output").textContent = fr.result;
// // };
// // fr.readAsText(document.getElementById("inputfile").file[0]);
// }

function canvasClick(e) {
//detect user click on canvas
let midPoint = { x: e.clientX, y: e.clientY };
Expand Down Expand Up @@ -45,23 +156,38 @@ function createLine(firstPoint, secondPoint) {
renderAll();
}

function createRectangle() {
function createRectangle(attr) {
//create new triangle
let hexColor = document.getElementById("colorPicker").value;
let midPoint =
attr && attr.midPoint
? attr.midPoint
: { x: controlPoint.vertices[0], y: controlPoint.vertices[1] };
let color =
attr && attr.color
? attr.color
: hexToRgb(document.getElementById("colorPicker").value);
let width = attr && attr.width ? attr.width : 0.4;
if (currentMode == modes.DRAWING) {
let midPoint = { x: controlPoint.vertices[0], y: controlPoint.vertices[1] };
let rect = new Rectangle(midPoint, hexToRgb(hexColor));
let rect = new Rectangle(midPoint, color, width);
canvasObject.push(rect);
renderAll();
}
}

function createPolygon() {
function createPolygon(attr) {
//create new triangle
let hexColor = document.getElementById("colorPicker").value;
let midPoint =
attr && attr.midPoint
? attr.midPoint
: { x: controlPoint.vertices[0], y: controlPoint.vertices[1] };
let color =
attr && attr.color
? attr.color
: hexToRgb(document.getElementById("colorPicker").value);
let numSides = attr && attr.numSides ? attr.numSides : 6;
let radius = attr && attr.radius ? attr.radius : 0.4;
if (currentMode == modes.DRAWING) {
let midPoint = { x: controlPoint.vertices[0], y: controlPoint.vertices[1] };
let rect = new Polygon(midPoint, hexToRgb(hexColor), 6);
let rect = new Polygon(midPoint, color, numSides, radius);
canvasObject.push(rect);
renderAll();
}
Expand Down
159 changes: 79 additions & 80 deletions polygon.js
Original file line number Diff line number Diff line change
@@ -1,85 +1,84 @@
class Polygon {
constructor(midPoint, color, numSides) {
this.midPoint = midPoint;
this.numSides = numSides;
this.color = color;
this.radius = 0.4;
this.vertices = this.computePolygonVertices();
this.indices = this.computePolygonIndices();
this.xformMatrix = new Float32Array([
1.0,
0.0,
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
0.0,
0.0,
1.0,
]);
}
computePolygonVertices() {
let vertices = []

for (let i=1; i<=this.numSides; i++)
{
let theta = 2.0 * Math.PI * i / this.numSides;

let x = this.radius * Math.cos(theta) + this.midPoint.x;
let y = this.radius * Math.sin(theta) + this.midPoint.y;

vertices.push(x);
vertices.push(y);
vertices.push(0);
}
vertices.push(this.midPoint.x);
vertices.push(this.midPoint.y);
vertices.push(0);
return vertices;
}

computePolygonIndices() {
let indices = []
for (let i=0; i < this.numSides; i++) {
indices.push(i);
indices.push((i+1)%this.numSides);
indices.push(this.numSides);
}
return indices;
}
constructor(midPoint, color, numSides, radius) {
this.midPoint = midPoint;
this.numSides = numSides;
this.color = color;
this.radius = radius;
this.vertices = this.computePolygonVertices();
this.indices = this.computePolygonIndices();
this.xformMatrix = new Float32Array([
1.0,
0.0,
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
0.0,
0.0,
1.0,
]);
}
computePolygonVertices() {
let vertices = [];

drawOnCanvas() {
let vertex_buffer = getVerticesBuffer(this.vertices);
let index_buffer = getIndicesBuffer(this.indices);
let vertShader = getVertexShader();
let fragShader = getFragmentShader(this.color);
let shaderProgram = getShaderProgram(vertShader, fragShader);
transformObject(shaderProgram, this.xformMatrix);
bindVertexBuffer(shaderProgram, vertex_buffer, index_buffer);
gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
}
for (let i = 1; i <= this.numSides; i++) {
let theta = (2.0 * Math.PI * i) / this.numSides;

changeColor(newColor) {
this.color = newColor;
renderAll();
}

movePolygon(newMidPoint) {
this.midPoint = newMidPoint;
this.vertices = this.computePolygonVertices();
renderAll();
let x = this.radius * Math.cos(theta) + this.midPoint.x;
let y = this.radius * Math.sin(theta) + this.midPoint.y;

vertices.push(x);
vertices.push(y);
vertices.push(0);
}

resizePolygon(xCursor) {
this.radius = Math.abs(xCursor - this.midPoint.x);
this.vertices = this.computePolygonVertices();
renderAll();
vertices.push(this.midPoint.x);
vertices.push(this.midPoint.y);
vertices.push(0);
return vertices;
}

computePolygonIndices() {
let indices = [];
for (let i = 0; i < this.numSides; i++) {
indices.push(i);
indices.push((i + 1) % this.numSides);
indices.push(this.numSides);
}
}
return indices;
}

drawOnCanvas() {
let vertex_buffer = getVerticesBuffer(this.vertices);
let index_buffer = getIndicesBuffer(this.indices);
let vertShader = getVertexShader();
let fragShader = getFragmentShader(this.color);
let shaderProgram = getShaderProgram(vertShader, fragShader);
transformObject(shaderProgram, this.xformMatrix);
bindVertexBuffer(shaderProgram, vertex_buffer, index_buffer);
gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_SHORT, 0);
}

changeColor(newColor) {
this.color = newColor;
renderAll();
}

movePolygon(newMidPoint) {
this.midPoint = newMidPoint;
this.vertices = this.computePolygonVertices();
renderAll();
}

resizePolygon(xCursor) {
this.radius = Math.abs(xCursor - this.midPoint.x);
this.vertices = this.computePolygonVertices();
renderAll();
}
}
4 changes: 2 additions & 2 deletions rectangle.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
class Rectangle {
constructor(midPoint, color) {
constructor(midPoint, color, width) {
this.midPoint = midPoint;
this.color = color;
this.width = 0.4;
this.width = width;
this.left = midPoint.x - this.width / 2;
this.top = midPoint.y + this.width / 2;
this.right = midPoint.x + this.width / 2;
Expand Down

0 comments on commit 7954dbe

Please sign in to comment.