WebGL (Short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.

• Easy way to check whether your browser supports webgl or not. Do you see spinning cube here?
• Experiments in p5*editor: collection is available here.
• clara.io Clara.io is a full-featured cloud-based 3D modeling, animation and rendering software tool that runs in your web browser.

Dice game

This is a blog post related on WEBGL and p5 experiments. Experiments are available in a separate repository, see p5WEBGL. Throw dices on line here. Throw dices by pressing s or shake your device.

• 3 fingers on screen: move dices.
• 5 fingers on screen: throw dices (the same as shake the device).
• x-axis in the bottom of screen.. left corner: 1 dice, right corner: 9 dices.

WEBGL

It is true that 3D world on 2D canvas is very challenging to percive or figure out direction, rotation, perspective, and camera position. Drawing a box or sphere is rather easy task. However, I still try to understand what is the right way to define score, value / number for thrown dice. If it is e.g. 1 in the beginning and it is rotated randomly by rotateXYZ commands, it should be possible to define the final eye number. What is f_t(number_0, rotateX, rotateY, rotateZ)? In addition, if the dice is rotates first 125 degrees on X axis, and then 90 degrees on Z axis, is the final number the same if dice is rotated X=76 and Y=432 degrees?

In this example, all dices are magic dices, because all sides are the same as current ``random’’ number. Function show is defined in Noppa class as

	show() {

		push();

		translate(this.x, this.y, this.z);

		rotateX(this.ax);
		rotateY(this.ay);
		rotateZ(this.az);

		noStroke();
		
		texture(imgs[round(this.value - 1)]);  

		if (this.shape == 0) {
			box(this.size);
		} else {
			sphere(this.size);
		}
	
		pop();

  }

p5

Delete old objects and create a new set

In the first loop, all objects are deleted (pop). The second loop creates new objects with initial values (n = noppia). The initial values are given as arguments and more properties / features are defined in a constructor of class Noppa.

	for (var i = nopat.length - 1; i >= 0; i--) {
		nopat.pop();
	}

	for (i = 0; i < noppia; i++) {
		nopat[i] = new Noppa(i, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
		nopat[i].start();
	}

Test

• Device orientation

Other stuff

• GLSL Core Language (GLSL)) is a C-style language.

#define R rotate2D
float i,e,s;vec3 p,q,d=FC.rgb/r.y-.5;for(q.z=2.;i++<1e2;p=q+=i<50.?d*e:d-d+e*.6+.002){s=.5;p.xz*=R(t);for(e=++p.y;s>.005;s*=.77)p.x=abs(p.x),e=min(e,max(abs(p.y-s*.5)-s*.4,length(p.xz))-s*.2),p.y-=s,p.xz*=R(1.57),p.zy*=R(.5);}o+=log(e)/20.;#つぶやきGLSL pic.twitter.com/IFnLq5wLxz

— yonatan (@zozuar) January 13, 2022