Skip to content
Snippets Groups Projects
Commit 220139b5 authored by Hwanyong Lee's avatar Hwanyong Lee
Browse files

Re-arrange

parent 848a9f14
No related branches found
No related tags found
No related merge requests found
// CC-NC-BY Mingi Kim
var bayesianPointStack = [];
var bayesianPointNum = 0;
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
function initBazierEventHandler(canvas, ctx) {
canvas.onmousedown = function (ev) { //Mouse is pressed
if (bayesianPointNum > 3) {
alert("You only need to take 4 dots.");
return;
}
var loc = windowToCanvas(canvas, ev.clientX, ev.clientY);
var x = loc.x;
var y = loc.y;
if (bayesianPointNum == 0 || bayesianPointNum == 3) {
ctx.fillStyle = 'blue';
} else {
ctx.fillStyle = 'red';
}
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI); // Start point
ctx.fill();
bayesianPointNum++;
bayesianPointStack.push(x);
bayesianPointStack.push(y);
};
}
var bmouse = [250, 250];
var bmouseRadius = 10;
var bpointsClicked = [];
var bclickedPointNum = 0;
function doBayesian() {
var bayesianCanvas = document.getElementById("bayesian");
var ctx = bayesianCanvas.getContext("2d");
initBazierEventHandler(bayesianCanvas, ctx);
}
function drawCurve() {
if (bayesianPointNum < 4) {
alert("You have to take four dots.");
return;
}
var bayesianCanvas = document.getElementById("bayesian");
var ctx = bayesianCanvas.getContext("2d");
let start = { x: bayesianPointStack[0], y: bayesianPointStack[1] };
let cp1 = { x: bayesianPointStack[2], y: bayesianPointStack[3] };
let cp2 = { x: bayesianPointStack[4], y: bayesianPointStack[5] };
let end = { x: bayesianPointStack[6], y: bayesianPointStack[7] };
// Cubic Bézier curve
ctx.beginPath();
ctx.moveTo(start.x, start.y);
ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
ctx.stroke();
}
function clearCurve() {
var bayesianCanvas = document.getElementById("bayesian");
var ctx = bayesianCanvas.getContext("2d");
bayesianPointNum = 0;
bayesianPointStack = [];
ctx.clearRect(0, 0, bayesianCanvas.width, bayesianCanvas.height);
}
\ No newline at end of file
student2019/201520889/img0.png

17.1 KiB

student2019/201520889/img1.png

19.6 KiB

student2019/201520889/img2.png

137 KiB

student2019/201520889/img3.png

26.9 KiB

student2019/201520889/img4.png

79.8 KiB

student2019/201520889/img5.png

24.1 KiB

student2019/201520889/img6.png

21.9 KiB

student2019/201520889/img7.png

19.7 KiB

<!-- (CC-NC-BY) 2019 Mingi Kim -->
<html>
<head>
<title>WebGL Tutorial - Primitive Assembly Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="WebGLHelloAPI.js"></script>
<script type="text/javascript" src="bayesianCurve.js"></script>
</head>
<body onload="main();">
<canvas id="helloapicanvas" style="border: none; padding: 0%; margin: 0%;" width="500" height="500"></canvas>
<H2> WebGL - Mouse Event & Primitive Assembly </H2>
Primitive Assembly - Point/Line/Triangle
<table style="width:100%">
<tr>
<td>
<p>
<button onclick="changeModePLT()" id="butPLT"> P/L/T </button>
<button onclick="clearVertexData()" id="cvd"> clear </button>
<input type="color" name="colorInput" id="colorInput" value="#ff0000">
<p id="pointnum">0</p>
<p id="idPLT"> P/L/T </p>
</p>
</td>
<td>
<p>Points Stack(x, y)</p>
<p id="AllPoints"></p>
</td>
</tr>
</table>
<p>This is mouse click example with Primitive Assembly</p>
<p>
0. You can choose a type of Assembly with P/L/T button<br>
1. Click on the canvas with your mouse. Then you can see the cordination of the points<br>
2. You can choose color with Color Picker. Then you can see the Assembly.<br>
3. Press clear button to clear the canvas assembly.
</p>
<H3>Tutorial 1</H3>
<img src="img0.png" height="150" width="150">
<p>Click on the canvas and draw this red triangle.</p>
<H3>Tutorial 2</H3>
<img src="img1.png" height="150" width="150">
<p>Press clear button to remove. And change the color and draw a triangle.</p>
<H3>Tutorial 3</H3>
<img src="img2.png" height="150" width="150">
<p>Draw the triangles by making the colors of the points different.</p>
<H3>Tutorial 4</H3>
<img src="img3.png" height="150" width="150">
<p>Press the P / L / T button to draw the three lines.</p>
<H3>Tutorial 5</H3>
<img src="img4.png" height="150" width="150">
<p>Press the P / L / T button to change to triangle.</p>
<p></p>
<H2>WebGL - Mouse Event & Bayesian Curve</H2>
<canvas id="bayesian" style="border:1px solid #000000;" width="500" height="500""></canvas>
<button onclick="drawCurve()">bayesian</button>
<button onclick="clearCurve()">Clear Curve</button>
<p>
0. Click on the canvas with your mouse.<br>
1. Make 4 dots and Press the bayesian button. Then you can see the Curve<br>
2. Press clear button to clear the canvas.
</p>
<H3>Tutorial 1</H3>
<img src="img5.png" height="150" width="150">
<p>Let's take the four points and press the bayesian button.</p>
<H3>Tutorial 2</H3>
<img src="img6.png" height="150" width="150">
<p>To clear the curve, press the clear button and draw a curve like this.</p>
<H3>Tutorial 3</H3>
<img src="img7.png" height="150" width="150">
<p>To clear the curve, press the clear button and draw a curve like this</p>
<p> (CC-NC-BY) 2019 Mingi Kim </p>
</body>
</html>
\ No newline at end of file
student2019/201520889/tutorial0.png

167 KiB

student2019/201520889/tutorial1.png

102 KiB

webglfinalproject @ 5904e223
Subproject commit 5904e223bb6f33849f1bc3d2702f5a1d1fa95b7c
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment