Scribd
Upload
2 views6 pages

Lab1 Introduction to Computer Graphics Using WebGL

The document provides an introduction to computer graphics using WebGL, covering essential JavaScript concepts such as variables, functions, the Document Object Model (DOM), and event listeners. It explains the HTML5 canvas element, its attributes, and how to create and manipulate graphics using JavaScript and WebGL contexts. Additionally, it includes code examples to illustrate the discussed concepts and references for further learning.

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views6 pages

Lab1 Introduction to Computer Graphics Using WebGL

The document provides an introduction to computer graphics using WebGL, covering essential JavaScript concepts such as variables, functions, the Document Object Model (DOM), and event listeners. It explains the HTML5 canvas element, its attributes, and how to create and manipulate graphics using JavaScript and WebGL contexts. Additionally, it includes code examples to illustrate the discussed concepts and references for further learning.

Uploaded by

kwllaSa21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Lab-1: Introduction to Computer Graphics Using WebGL

1. JavaScript essentials for WebGL


1.1 Define Variables
1.2 Defining and calling a function
1.3 Document Object Model (DOM)
1.4 Event Listener
2. What is Canvas
2.1 Rendering Context
2.2 WebGL Context
----------------------------------------------------------------------------------------------------
1. JavaScript Essentials for WebGL
1.1. Define Variables
Like many other programming languages, JavaScript has variables. Variables can
be thought of as named containers. You can place data into these containers and
then refer to the data simply by naming the container.

<script type = "text/javascript">


<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>

1.2 Define Function


A function is a group of reusable code which can be called anywhere in your
program. This eliminates the need of writing the same code again and again. It
helps programmers in writing modular codes. Functions allow a programmer to
divide a big program into a number of small and manageable functions.

Example: function creation

<script type = "text/javascript">


<!--
function sayHello() {
alert("Hello there");
}
//-->
</script>
To invoke a function somewhere later in the script, you would simply need to
write the name of that function as shown in the following code.
Example: Calling Function

<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!");
}
</script>

</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value
= "Say Hello">
</form>
<p>Use different text in write method and then
try...</p>
</body>
</html>

1.3Document Object Model (DOM)


A Document object represents the HTML document that is displayed in that
window. The Document object has various properties that refer to other objects
which allow access to and modification of document content.

The getElementById() is a DOM method used to return the element that has the
ID attribute with the specified value. This is one of the most common methods in
the HTML DOM and is used almost every time we want to manipulate an
element on our document. This method returns null if no elements with the
specified ID exists. The ID should be unique within a page. However, if more
than one element with the specified ID exists, it returns the last element in the
javascript code.

Example

<html>
<body>
<p id="element">GetElementById</p>
<script>
var s = document.getElementById("element").innerHTML;

document.write(s);
</script>
</body>
</html>

1.4Event Listener
The event listeners are just like event handlers, except that you can assign as
many event listeners as you like to a particular event on particular element.
To understand how event listeners actually works let's check out a simple
example. Suppose that you've created two functions and you try to execute both
of them on click of the button using the onclick event handler, as shown in the
following example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Assigning Multiple Event Handlers on a
Single Event</title>
</head>
<body>
<button id="myBtn">Click Me</button>

<script>
// Defining custom functions
function firstFunction() {
alert("The first function executed successfully!");
}

function secondFunction() {
alert("The second function executed successfully");
}

// Selecting button element


var btn = document.getElementById("myBtn");

// Assigning event handlers to the button


btn.onclick = firstFunction;
btn.onclick = secondFunction; // This one overwrite the
first
</script>
</body>
</html>
2. What is Canvas
To create graphical applications on the web, HTML-5 provides a rich set of features such
as 2D Canvas, WebGL, and 3D CSS transforms. To write WebGL applications, we use
the existing canvas element of HTML5.

HTML5 <canvas> provides an easy and powerful option to draw graphics using
JavaScript. It can be used to draw graphs, make photo compositions, or do simple (and
not so simple) animations.

The syntax of HTML canvas tag is given below. You have to mention the name of the
canvas inside double quotations (“ ”).
<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Canvas Attributes
The canvas tag has three attributes namely, id, width, and height.
 Id − Id represents the identifier of the canvas element in the Document Object
Model (DOM).
 Width − Width represents the width of the canvas.
 Height − Height represents the height of the canvas.
These attributes determine the size of the canvas. If a programmer is not specifying them
under the canvas tag, then browsers such as Firefox, Chrome, and Web Kit, by default,
provide a canvas element of size 300 × 150.

The following code shows how to create a canvas. We have used CSS to give a colored
border to the canvas.

<html>
<head>
<style>
#mycanvas{border:1px solid red;}
</style>
</head>
<body>
<canvas id = "mycanvas" width = "100" height =
"100"></canvas>
</body>
</html>
2.1 Rendering Context
The <canvas> is initially blank. To display something on the canvas element, we have to
use a scripting language. This scripting language should access the rendering context and
draw on it.
The canvas element has a DOM method called getContext(), which is used to obtain the
rendering context and its drawing functions. This method takes one parameter, the type of
context 2d.
The following code is to be written to get the required context. You can write this script
inside the body tag as shown below.

<!DOCTYPE HTML>
<html>
<body>
<canvas id = "mycanvas" width = "600" height =
"200"></canvas>

<script>
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');

context.font = '20pt Calibri';


context.fillStyle = 'green';
context.fillText('Hello World From Canvas', 70, 70);
</script>
</body>
</html>

2.2 WebGL Context


HTML5 Canvas is also used to write WebGL applications. To create a WebGL rendering
context on the canvas element, you should pass the string experimental-webgl, to
the canvas.getContext() method. Some browsers support only 'webgl'.

<!DOCTYPE html>
<html>
<canvas id = 'my_canvas'></canvas>

<script>
var canvas = document.getElementById('my_canvas');
var gl = canvas.getContext('experimental-webgl');
gl.clearColor(0.9,0.9,0.8,1);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</html>
References

W3schools.com. 2020. Javascript Tutorial. [online] Available at: <https://www.w3schools.com/js/> [Accessed 4


August 2020].
Tutorialrepublic.com. 2020. Javascript Event Listeners - Tutorial Republic. [online] Available at:
<https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-listeners.php> [Accessed 4 August 2020].
JavaScript Event Listeners - Tutorial Republic. (2020). Retrieved 4 August 2020, from
https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-listeners.php

You might also like