<HTML> <Head> </HEAD> <BODY> </BODY> <CANVAS ID ="MyScreen" width="780" Height="640" alt="Your browser does not support...

</HEAD>
<BODY>

</BODY>

   <CANVAS ID ="MyScreen" width="780" Height="640" alt="Your browser does not support canvas"></CANVAS>


   <SCRIPT>

   var vertexShaderText =
   [
   'precision mediump float;',
   '',
   'attribute vec2 vertPosition;',
   'attribute vec3 vertColor;',
   'varying vec3 fragColor;',
   'void main()',
   '{',
   'gl_pointsize = 10.0;',
   'fragColor = vertColor;',
   'gl_Position = vec4(vertPosition,0.0,1.0);',
   '}'
   ].join("\n");

   var fragmentShaderText =
   [
   'precision mediump float;',
   'varying vec3 fragColor;',
   'void main()',
   '{',
   'gl_FragColor = vec4(fragColor,1.0);',
   '}'
   ].join('\n');

   var c = document.getElementById("MyScreen");
   //var ctx = c.getContext("2d");
   //ctx.beginPath();
   //ctx.arc(95,50,40,0,2*Math.PI);
   //ctx.stroke();

   var gl = c.getContext("webgl")||c.getContext("experimental-webgl");
   if(!gl)
   {
       alert("WEBGL IS NOT AVAILABLE");
   }
   gl.viewport(0,0,c.width, c.height);
   gl.clearColor(.5,.5,1.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);

   //Setup shaders
   var vertexShader = gl.createShader(gl.VERTEX_SHADER);
   var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

   gl.shaderSource(vertexShader,vertexShaderText);
   gl.shaderSource(fragmentShader,fragmentShaderText);
   gl.compileShader(vertexShader);
   if(!gl.getShaderParameter(vertexShader,gl.COMPILE_STATUS))
   {
       console.log("ERROR: ",gl.getShaderInfoLog(vertexShader));
   }
   gl.compileShader(fragmentShader);
   if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS))
   {
       console.log("ERROR: ",gl.getShaderInfoLog(fragmentShader));
   }

   //Setup program
   var program = gl.createProgram();
   gl.attachShader(program, vertexShader);
   gl.attachShader(program, fragmentShader);
   gl.linkProgram(program);
   if(!gl.getProgramParameter(program,gl.LINK_STATUS))
   {
       console.error('ERROR', gl.getShaderInfoLog(program));
   }
   gl.validateProgram(program);
   if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS))
   {
       console.error('ERROR', gl.getShaderInfoLog(program));
   }

   //Create Buffer
   var triangleVertices =
   [//x and y       R, G, B
       0.0,0.5, 1.0,0.0,0.0,
       -0.5,-0.5, 0.0,1.0,0.0,
       0.5,-0.5, 0.0,0.0,1.0
   ];

   var triagnleVertexBufferObject = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER,triagnleVertexBufferObject);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),gl.STATIC_DRAW);

   var positionAttributeLcoation = gl.getAttribLocation(program,'vertPosition');
   var colorAttributeLcoation = gl.getAttribLocation(program,'vertColor');
   gl.vertexAttribPointer(
   positionAttributeLcoation, //ATTRIBUTE LOCATION
   2, //NUMBER of elements per attribute
   gl.FLOAT, //TYPES OF ELEMENTS
   gl.FALSE,
   5*Float32Array.BYTES_PER_ELEMENT, //SIZE OF AN INDIVIDUAL VERTEX
   0 //OFFSET
   );


   gl.vertexAttribPointer(
   colorAttributeLcoation, //ATTRIBUTE LOCATION
   3, //NUMBER of elements per attribute
   gl.FLOAT, //TYPES OF ELEMENTS
   gl.FALSE,
   5*Float32Array.BYTES_PER_ELEMENT, //SIZE OF AN INDIVIDUAL VERTEX
   2*Float32Array.BYTES_PER_ELEMENT //OFFSET
   );

   gl.enableVertexAttribArray(positionAttributeLcoation);
   gl.enableVertexAttribArray(colorAttributeLcoation);
   //Main Loop
   gl.useProgram(program);
   gl.drawArrays(gl.TRIANGLES,0,3);
   </SCRIPT>


</HTML>

2.3At the lowest level of processing, we manipulate bits in the framebuffer. In WebGL, we can create a virtual framebuffer in our application as a two- dimensional array. You can experiment with simple raster algorithms, such as drawing lines or circles, through a function that generates a single value in the array. Write a small library that will allow you to work in a virtual frame- buffer that you create in memory. The core functions should be WritePixel and ReadPixel. Your library should allow you to set up and display your vir- tual framebuffer and to run a user program that reads and writes pixels using gl.POINTS in gl.drawArrays.

2.4 Turtle graphics is an alternative positioning system that is based on the concept of a turtle moving around the screen with a pen attached to the bottom of its shell. The turtle’s position can be described by a triplet (x, y, θ), giving the location of the center and the orientation of the turtle. A typical API for such a system includes functions such as the following: init(x,y,theta); // initialize position and orientation of turtle forward(distance); right(angle); left(angle); pen(up_down); Implement a turtle graphics library using WebGL. All this using Html file below and editing it

Solutions

Expert Solution

This module sets the stage, getting you used to essential ideas and punctuation, taking a gander at applying HTML to content, how to make hyperlinks, and how to utilize HTML to structure a site page.

Sight and sound and implanting

This module investigates how to utilize HTML to incorporate sight and sound in your site pages, including the diverse ways that pictures can be incorporated, and how to install video, sound, and even whole different pages.

HTML Forms

Structures are an imperative part of the Web — these give a great part of the usefulness you requirement for communicating with sites, e.g. enlisting and signing in, sending input, purchasing items, and that's only the tip of the iceberg. This module kicks you off with making the customer side parts of structures.

Tables (TBD)

Speaking to forbidden information on a site page in a justifiable, open way can be a test. This module covers essential table markup, alongside more perplexing components, for example, executing subtitles and outlines.

venereology answered 3 months ago

Next > < Previous

Question

<HTML> <Head> </HEAD> <BODY> </BODY> <CANVAS ID ="MyScreen" width="780" Height="640" alt="Your browser does not support...

Solutions

Expert Solution

Related Solutions