Ancient Brain

Worlds Minds Users Uploads JS code Search

Intro

Introduction Features

---

Definitions Principles The AI model

---

Teaching Register a class

Learn

Getting started P5 tutorial Three.js tutorial

---

Coding course Coding course II Coding for kids WebGL course AI exercises

Browse

Starter Worlds

---

Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds

---

Advanced search

Docs

Docs API docs

Register

Register Forgot password

   Login

// ==== Starter World =================================================================================================
// This code is designed for use on the Ancient Brain site.
// This code may be freely copied and edited by anyone on the Ancient Brain site.
// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.
// ====================================================================================================================




// Starter World for canvas API (no graphics library)
// WebGL rendering 
// getContext("webgl");

	

// Adapted with many changes from: 
// "Shortest WebGL Example"
// https://sites.google.com/site/progyumming/javascript/shortest-webgl 
// (site now gone)

// steps as at:
// https://www.tutorialspoint.com/webgl/webgl_sample_application.htm


	

	
	
	

// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// The easiest things to modify are in this box.
// You should be able to change things in this box without being a JavaScript programmer.
// Go ahead and change some of these. What's the worst that could happen?


AB.clockTick       = 300;    

	// Speed of run: Step every n milliseconds. Default 100.
	
AB.maxSteps        = 100;    

	// Length of run: Maximum length of run in steps. Default 1000.

AB.screenshotStep  = 2;   
  
	// Take screenshot on this step. (All resources should have finished loading.) Default 50.


const SKYCOLOR 	= "#ffffcc";				// this usage will be of color as a string, not as a number 

const MUSIC_BACK  = '/uploads/starter/Defense.Line.mp3' ;

  
// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================


// You will need to be some sort of JavaScript programmer to change things below the tweaker's box.








function randomVertex()  	// randomly return 0, 1, or -1
{
 return ( AB.randomPick3 ( 0, 1, -1 ) );
}	




function drawShape() 
{
	
/* Step 1: Prepare the canvas and get WebGL context */
		
	var gl = ABWorld.getContext ( "webgl" );

	// set entire background or else get black background in screenshots:
	gl.clearColor( 1, 1, 0.8, 1 );			// light yellow background
	gl.clear( gl.COLOR_BUFFER_BIT );

		
/* Step 2: Define the geometry and store it in buffer objects */
		 
	var vertices;

	/*
	// draw a diamond shape:
	vertices = [
		-1,  0, 0,
		 0,  1, 0,
		 0, -1, 0,
		 1,  0, 0
		];
	*/
	
	// draw a random shape:
	// some of these don't display 
	vertices = [ 
		randomVertex(), randomVertex(), randomVertex(),
		randomVertex(), randomVertex(), randomVertex(),
		randomVertex(), randomVertex(), randomVertex(),
		randomVertex(), randomVertex(), randomVertex()
		];
		
	var buf = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, buf );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array ( vertices ), gl.STATIC_DRAW );

	

/* Step 3: Create and compile Shader programs */	
	
    var vertexShader = 	" attribute vec3 pos;					" +
						" void main()							" +
						" {										" +
						"  gl_Position = vec4 ( pos, 2.0 );		" +
						" }										";
                    
	var fragmentShader = 	" void main()							" +
							" {										" +
							"  gl_FragColor = vec4 ( 0,0,0, 1.0 );	" +				// black object
							" }										";
		
			// shader program code is written in GLSL:
			// https://en.wikipedia.org/wiki/OpenGL_Shading_Language
			
	var vs = gl.createShader ( gl.VERTEX_SHADER );
	gl.shaderSource ( vs, vertexShader );
	gl.compileShader ( vs );

	var fs = gl.createShader ( gl.FRAGMENT_SHADER );
	gl.shaderSource ( fs, fragmentShader );
	gl.compileShader ( fs );
	
	var prog = gl.createProgram();
	gl.attachShader ( prog, vs );
	gl.attachShader ( prog, fs );	
	gl.linkProgram ( prog );
	gl.useProgram ( prog );
		
		 
/* Step 4: Associate the shader programs to buffer objects */
		 
	// find location of variable "pos" in the program 
	var a = gl.getAttribLocation( prog, "pos" );
	gl.enableVertexAttribArray ( a );
	gl.vertexAttribPointer( a, 3, gl.FLOAT, false, 0, 0 );

	
/* Step 5: Drawing the required object (triangle) */
	 
	gl.drawArrays ( gl.TRIANGLE_STRIP, 0, 4 );
	
}


	

AB.world.newRun = function() 
{
  ABWorld.init (  SKYCOLOR  ); 
};



// draw new shape on every step
// each draw wipes out previous draw
 
AB.world.nextStep = function()
{
	  drawShape();
};






// --- music ----------------------------------------

 AB.backgroundMusic ( MUSIC_BACK );