Develop Reference

Sorting coordinates

Im coding a Paint version for Minecraft with the CC Tweaked Mod
The Problem is i give my program an array and the program follows the order of the array one after the other.
That means if i draw something in the top left and then bottom right and then i fill everything else it will follow this order (which isnt very efficient)
I have an array called output
Here is how the array could look like
[
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 3 },
{ x: 2, y: 0, color: 5 },
{ x: 0, y: 1, color: 8 },
{ x: 1, y: 1, color: 10 },
{ x: 2, y: 1, color: 11 },
{ x: 0, y: 2, color: 12 },
{ x: 2, y: 2, color: 3 },
{ x: 1, y: 2, color: 14 }
]
The array comes from this "drawing"(ignore the arrows for now)
Now the question
How can i get from the first array to an array that looks like this
[
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 3 },
{ x: 2, y: 0, color: 5 },
{ x: 2, y: 1, color: 11 },
{ x: 1, y: 1, color: 10 },
{ x: 0, y: 1, color: 8 },
{ x: 0, y: 2, color: 12 },
{ x: 1, y: 2, color: 14 }
{ x: 2, y: 2, color: 3 },
]
(See how it follows the arrows?)
This would be much faster.
It is possibles that some squares are not filled with any color. Idk how important that might be
If important these are the colorcodes
const LISTOFCOLORS = {
white: 1,
orange: 2,
magenta: 3,
dodgerblue: 4,
yellow: 5,
lime: 6,
pink: 7,
gray: 8,
lightgray: 9,
cyan: 10,
purple: 11,
blue: 12,
SaddleBrown: 13,
green: 14,
red: 15,
black: 16
}

If you are only reversing the 3 - 6 entries, you could create a new array from slices of the old array using slice() and reverse the specified entries using reverse().
const rowByRow = [
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 3 },
{ x: 2, y: 0, color: 5 },
{ x: 0, y: 1, color: 8 },
{ x: 1, y: 1, color: 10 },
{ x: 2, y: 1, color: 11 },
{ x: 0, y: 2, color: 12 },
{ x: 2, y: 2, color: 3 },
{ x: 1, y: 2, color: 14 }
];
const result = [
...rowByRow.slice(0, 3),
...rowByRow.slice(3, 6).reverse(), // reverse 3 - 6 entries
...rowByRow.slice(6, 9)
];
console.log(result);

#axtck Thank you very much. I ended up not using slice but the "slicing the array in multiple arrays and work from there" part i got from your post
i ended up with this
const arr = [
{ x: 1, y: 4, color: 12 },
{ x: 2, y: 4, color: 12 },
{ x: 2, y: 3, color: 12 },
{ x: 2, y: 2, color: 12 },
{ x: 2, y: 1, color: 12 },
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 12 },
{ x: 1, y: 1, color: 12 },
{ x: 4, y: 1, color: 12 },
{ x: 3, y: 2, color: 12 },
{ x: 1, y: 3, color: 12 },
{ x: 0, y: 3, color: 12 },
{ x: 0, y: 1, color: 12 },
{ x: 0, y: 2, color: 12 },
{ x: 1, y: 2, color: 12 },
{ x: 3, y: 4, color: 12 },
{ x: 4, y: 4, color: 12 },
{ x: 4, y: 0, color: 12 },
{ x: 3, y: 0, color: 12 },
{ x: 2, y: 0, color: 12 },
{ x: 3, y: 1, color: 12 },
{ x: 4, y: 2, color: 12 },
{ x: 4, y: 3, color: 12 },
{ x: 0, y: 4, color: 12 },
{ x: 3, y: 3, color: 12 }
]
const ArrayOfArrays = []
const dimension = 5
for (let i = 0; i < dimension; i++) {
let array = []
for (let j = 0; j < arr.length; j++) {
if (i == arr[j].y) {
array.push(arr[j])
}
}
ArrayOfArrays.push(i % 2 === 0 ?
array.sort(function (a, b) {
return a.x - b.x;
}) : array.sort(function (a, b) {
return b.x - a.x;
}))
}
console.log(ArrayOfArrays)
The output would be
[
[
{ x: 0, y: 0, color: 12 },
{ x: 1, y: 0, color: 12 },
{ x: 2, y: 0, color: 12 },
{ x: 3, y: 0, color: 12 },
{ x: 4, y: 0, color: 12 }
],
[
{ x: 4, y: 1, color: 12 },
{ x: 3, y: 1, color: 12 },
{ x: 2, y: 1, color: 12 },
{ x: 1, y: 1, color: 12 },
{ x: 0, y: 1, color: 12 }
],
[
{ x: 0, y: 2, color: 12 },
{ x: 1, y: 2, color: 12 },
{ x: 2, y: 2, color: 12 },
{ x: 3, y: 2, color: 12 },
{ x: 4, y: 2, color: 12 }
],
[
{ x: 4, y: 3, color: 12 },
{ x: 3, y: 3, color: 12 },
{ x: 2, y: 3, color: 12 },
{ x: 1, y: 3, color: 12 },
{ x: 0, y: 3, color: 12 }
],
[
{ x: 0, y: 4, color: 12 },
{ x: 1, y: 4, color: 12 },
{ x: 2, y: 4, color: 12 },
{ x: 3, y: 4, color: 12 },
{ x: 4, y: 4, color: 12 }
]
]
notice how the x value goes up and down

I can't draw my figure while moving camera in Web Gl

I'm doing a project that I have to move a camera with an object in the scene. I can move the camera correctly in the scene. However there's not the object.
I don't understand which is the error because I transform the object and then I multiply that matrix with the camera matrix and I think it's the steps I have to follow.
Hope you can help me.
const {mat4} = glMatrix;
var examplePlane = { // 4 vértices, 2 triángulos
"vertices" : [-0.5, 0.0, 0.5,
0.5, 0.0, 0.5,
0.5, 0.0,-0.5,
-0.5, 0.0,-0.5],
"indices" : [0, 1, 2, 0, 2, 3]
};
var exampleCube = { // 8 vértices, 12 triángulos
"vertices" : [-0.5,-0.5, 0.5,
0.5,-0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5,-0.5, -0.5,
0.5,-0.5, -0.5,
0.5, 0.5, -0.5,
-0.5, 0.5, -0.5],
"indices" : [ 0, 1, 2, 0, 2, 3,
1, 5, 6, 1, 6, 2,
3, 2, 6, 3, 6, 7,
5, 4, 7, 5, 7, 6,
4, 0, 3, 4, 3, 7,
4, 5, 1, 4, 1, 0]
};
var exampleCover = { // 13 vértices, 12 triángulos
"vertices" : [ 1, 0, 0, 0.866, 0.5, 0, 0.5, 0.866, 0,
0, 1, 0, -0.5, 0.866, 0, -0.86, 0.5, 0,
-1, 0, 0, -0.866, -0.5, 0, -0.5, -0.866, 0,
0, -1, 0, 0.5, -0.866, 0, 0.866, -0.5, 0,
0, 0, 0],
"indices" : [ 0, 1, 12, 1, 2, 12, 2, 3, 12, 3, 4, 12, 4, 5, 12, 5, 6, 12,
6, 7, 12, 7, 8, 12, 8, 9, 12, 9, 10, 12, 10, 11, 12, 11, 0, 12]
};
var exampleCone = { // 13 vértices, 12 triángulos
"vertices" : [ 1, 0, 0, 0.866, 0.5, 0, 0.5, 0.866, 0,
0, 1, 0, -0.5, 0.866, 0, -0.86, 0.5, 0,
-1, 0, 0, -0.866, -0.5, 0, -0.5, -0.866, 0,
0, -1, 0, 0.5, -0.866, 0, 0.866, -0.5, 0,
0, 0, 1],
"indices" : [ 0, 1, 12, 1, 2, 12, 2, 3, 12, 3, 4, 12, 4, 5, 12, 5, 6, 12,
6, 7, 12, 7, 8, 12, 8, 9, 12, 9, 10, 12, 10, 11, 12, 11, 0, 12]
};
var exampleCylinder = { // 24 vértices, 24 triángulos
"vertices" : [ 1, 0, 0, 0.866, 0.5, 0, 0.5, 0.866, 0,
0, 1, 0, -0.5, 0.866, 0, -0.86, 0.5, 0,
-1, 0, 0, -0.866, -0.5, 0, -0.5, -0.866, 0,
0, -1, 0, 0.5, -0.866, 0, 0.866, -0.5, 0,
1, 0, 1, 0.866, 0.5, 1, 0.5, 0.866, 1,
0, 1, 1, -0.5, 0.866, 1, -0.86, 0.5, 1,
-1, 0, 1, -0.866, -0.5, 1, -0.5, -0.866, 1,
0, -1, 1, 0.5, -0.866, 1, 0.866, -0.5, 1],
"indices" : [ 0, 1, 12, 1, 2, 13, 2, 3, 14, 3, 4, 15, 4, 5, 16, 5, 6, 17,
6, 7, 18, 7, 8, 19, 8, 9, 20, 9, 10, 21, 10, 11, 22, 11, 0, 23,
1, 13, 12, 2, 14, 13, 3, 15, 14, 4, 16, 15, 5, 17, 16, 6, 18, 17,
7, 19, 18, 8, 20, 19, 9, 21, 20, 10, 22, 21, 11, 23, 22, 0, 12, 23]
};
var exampleSphere = { // 42 vértices, 80 triángulos
"vertices" : [ 0.000000, 0.850651, 0.525731,
-0.309017, 0.500000, 0.809017,
0.309017, 0.500000, 0.809017,
-0.525731, 0.000000, 0.850651,
0.000000, 0.000000, 1.000000,
0.525731, 0.000000, 0.850651,
-0.850651, 0.525731, 0.000000,
-0.809017, 0.309017, 0.500000,
-0.500000, 0.809017, 0.309017,
0.000000, 0.850651,-0.525731,
-0.500000, 0.809017,-0.309017,
0.000000, 1.000000, 0.000000,
0.500000, 0.809017,-0.309017,
0.500000, 0.809017, 0.309017,
0.850651, 0.525731, 0.000000,
0.809017, 0.309017, 0.500000,
0.850651,-0.525731, 0.000000,
1.000000, 0.000000, 0.000000,
0.809017,-0.309017, 0.500000,
0.525731, 0.000000,-0.850651,
0.809017, 0.309017,-0.500000,
0.809017,-0.309017,-0.500000,
0.309017, 0.500000,-0.809017,
-0.525731, 0.000000,-0.850651,
-0.309017, 0.500000,-0.809017,
0.000000, 0.000000,-1.000000,
0.000000,-0.850651,-0.525731,
-0.309017,-0.500000,-0.809017,
0.309017,-0.500000,-0.809017,
0.500000,-0.809017,-0.309017,
0.000000,-0.850651, 0.525731,
0.000000,-1.000000, 0.000000,
0.500000,-0.809017, 0.309017,
-0.850651,-0.525731, 0.000000,
-0.500000,-0.809017,-0.309017,
-0.500000,-0.809017, 0.309017,
-0.809017,-0.309017, 0.500000,
-0.309017,-0.500000, 0.809017,
0.309017,-0.500000, 0.809017,
-1.000000, 0.000000, 0.000000,
-0.809017,-0.309017,-0.500000,
-0.809017, 0.309017,-0.500000],
"indices" : [ 1, 2, 0, 4, 1, 3, 2, 4, 5, 4, 2, 1, 7, 8, 6, 1, 7, 3, 8, 1, 0, 1, 8, 7,10,11, 9, 8,10, 6,
11, 8, 0, 8,11,10,11,12, 9,13,11, 0,12,13,14,13,12,11,13,15,14, 2,13, 0,15, 2, 5, 2,15,13,
17,18,16,15,17,14,18,15, 5,15,18,17,20,21,19,17,20,14,21,17,16,17,21,20,22,20,19,12,22, 9,
20,12,14,12,20,22,24,25,23,22,24, 9,25,22,19,22,25,24,27,28,26,25,27,23,28,25,19,25,28,27,
29,21,16,28,29,26,21,28,19,28,21,29,31,32,30,29,31,26,32,29,16,29,32,31,34,35,33,31,34,26,
35,31,30,31,35,34,36,37, 3,35,36,33,37,35,30,35,37,36, 4,38, 5,37, 4, 3,38,37,30,37,38, 4,
38,18, 5,32,38,30,18,32,16,32,18,38, 7,36, 3,39, 7, 6,36,39,33,39,36, 7,39,40,33,41,39, 6,
40,41,23,41,40,39,41,24,23,10,41, 6,24,10, 9,10,24,41,27,40,23,34,27,26,40,34,33,34,40,27]
};
function makeTorus (innerRadius, outerRadius, nSides, nRings) {
var torus = {
"vertices" : [],
"indices" : []
};
if (nSides < 3 ) nSides = 3;
if (nRings < 3 ) nRings = 3;
var dpsi = 2.0 * Math.PI / nRings ;
var dphi = -2.0 * Math.PI / nSides ;
var psi = 0.0;
for (var j = 0; j < nRings; j++) {
var cpsi = Math.cos ( psi ) ;
var spsi = Math.sin ( psi ) ;
var phi = 0.0;
for (var i = 0; i < nSides; i++) {
var offset = 3 * ( j * (nSides+1) + i ) ;
var cphi = Math.cos ( phi ) ;
var sphi = Math.sin ( phi ) ;
torus.vertices[offset + 0] = cpsi * ( outerRadius + cphi * innerRadius ) ;
torus.vertices[offset + 1] = spsi * ( outerRadius + cphi * innerRadius ) ;
torus.vertices[offset + 2] = sphi * innerRadius ;
phi += dphi;
}
var offset = torus.vertices.length;
for (var i = 0; i < 3; i++)
torus.vertices[offset + i] = torus.vertices[offset-nSides*3+i];
psi += dpsi;
}
var offset = torus.vertices.length;
for (var i = 0; i < 3*(nSides+1); i++)
torus.vertices[offset+i] = torus.vertices[i];
for (var j = 0; j < nRings; j++){
var desp = j * (nSides + 1);
for (var i = 0; i < nSides; i++){
torus.indices.push(desp + i, desp + i + 1, desp + i + (nSides+1));
torus.indices.push(desp + i + 1, desp + i + (nSides+1) + 1, desp + i + (nSides+1));
}
}
return torus;
}
var gl, program;
var myTorus;
var myZeta = 0.0, myPhi = Math.PI/2.0, radius = 1.4, fovy = 1.4;
function getWebGLContext() {
var canvas = document.getElementById("myCanvas");
try {
return canvas.getContext("webgl2",{antialias:true});
}
catch(e) {
}
return null;
}
function initShaders() {
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, document.getElementById("myVertexShader").text);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(vertexShader));
return null;
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, document.getElementById("myFragmentShader").text);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(fragmentShader));
return null;
}
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
idMyColor = gl.getUniformLocation (program, "myColor" );
program.vertexPositionAttribute = gl.getAttribLocation(program, "VertexPosition");
gl.enableVertexAttribArray(program.vertexPositionAttribute);
program.modelViewMatrixIndex = gl.getUniformLocation(program,"modelViewMatrix");
program.projectionMatrixIndex = gl.getUniformLocation(program,"projectionMatrix");
}
function initRendering() {
gl.clearColor(0.95,0.95,0.95,1.0);
gl.lineWidth(1.5);
gl.enable(gl.DEPTH_TEST);
}
function initBuffers(model) {
model.idBufferVertices = gl.createBuffer ();
gl.bindBuffer (gl.ARRAY_BUFFER, model.idBufferVertices);
gl.bufferData (gl.ARRAY_BUFFER, new Float32Array(model.vertices), gl.STATIC_DRAW);
model.idBufferIndices = gl.createBuffer ();
gl.bindBuffer (gl.ELEMENT_ARRAY_BUFFER, model.idBufferIndices);
gl.bufferData (gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(model.indices), gl.STATIC_DRAW);
}
function draw(model) {
console.log(model);
gl.bindBuffer(gl.ARRAY_BUFFER, model.idBufferVertices);
gl.vertexAttribPointer(program.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.idBufferIndices);
for (var i = 0; i < model.indices.length; i += 3)
// Si paint es true vol dir que volem pintar per tant farem el triangle_fan
gl.drawElements (gl.TRIANGLE_FAN, 3, gl.UNSIGNED_SHORT, i*2);
}
// set projection (apliquem una projecció al dibuix)
function setProjection() {
// obtiene la matriz de transformación de la proyección perspectiva
var projectionMatrix = mat4.create();
// perspective
mat4.perspective(projectionMatrix, Math.PI/4.0, 1., 0.1, 100.0);
// envía la matriz de transformación de la proyección al shader de vértices
gl.uniformMatrix4fv(program.projectionMatrixIndex,false,projectionMatrix);
}
function initPrimitives() {
initBuffers(examplePlane);
initBuffers(exampleCube);
initBuffers(exampleCover);
initBuffers(exampleCone);
initBuffers(exampleCylinder);
initBuffers(exampleSphere);
myTorus = makeTorus(0.4, 1.0, 8, 12);
initBuffers(myTorus);
}
function getCameraMatrix() {
// coordenadas esféricas a rectangulares: https://en.wikipedia.org/wiki/Spherical_coordinate_system
var x = radius * Math.sin(myPhi) * Math.sin(myZeta);
var y = radius * Math.cos(myPhi);
var z = radius * Math.sin(myPhi) * Math.cos(myZeta);
return mat4.lookAt(mat4.create(), [x, y, z], [0, 0, 0], [0, 1, 0]);
}
////////////////////
// move the Eye
////////////////////
var eye = [0, 0, 1.4];
var center = [0, 0, 0];
function moveEye () {
return mat4.lookAt(mat4.create(), eye, center, [0, 1, 0]);
}
///////////////////
///////////////////
function start_draw(model, rx, ry, rz, r1x, r1y, r1z, sx, sy, sz, tx, ty, tz, c1, c2, c3, c4){
// 1. calcula la matriz de transformación
var modelMatrix = mat4.create();
var rotationmatr = mat4.create();
var rotation2 = mat4.create();
var transmatr = mat4.create();
var scalematr = mat4.create();
mat4.fromRotation (rotationmatr, Math.PI/2, [rx, ry, rz]);
mat4.fromRotation (rotation2, Math.PI/2, [r1x, r1y, r1z]);
mat4.fromScaling (scalematr, [sx, sy, sz]);
mat4.multiply (modelMatrix, rotationmatr, rotation2);
mat4.fromTranslation(transmatr,[tx, ty, tz]);
mat4.multiply(modelMatrix, transmatr, modelMatrix);
mat4.multiply(modelMatrix, modelMatrix, scalematr);
var modelMatrixM = mat4.create();
var modelViewMatrixM = mat4.create();
mat4.fromScaling(modelMatrixM, [0.5, 0.5, 0.5]);
mat4.multiply(modelViewMatrixM, moveEye(), modelMatrixM);
mat4.multiply(modelViewMatrixM, getCameraMatrix(), modelViewMatrixM);
var finalProj = mat4.create();
mat4.multiply(finalProj, modelViewMatrixM, modelMatrix);
// 2. establece la matriz modelMatrix en el shader de vértices
console.log(finalProj);
gl.uniformMatrix4fv(program.modelMatrixIndex, false, finalProj);
gl.uniform4f (idMyColor, c1, c2, c3, c4);
setProjection();
draw(model);
}
function drawall(){
start_draw(exampleCylinder, .5, 0, 0, 0, 0, 0, .1, .1, .6, -.6, .1, -3, .5, 0, .5, .7);
}
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
drawall();
}
function initHandlers() {
var mouseDown = false;
var lastMouseX;
var lastMouseY;
var canvas = document.getElementById("myCanvas");
var htmlPhi = document.getElementById("Phi");
var htmlZeta = document.getElementById("Zeta");
var htmlRadius = document.getElementById("Radius");
var htmlFovy = document.getElementById("Fovy");
htmlPhi.innerHTML = (myPhi * 180 / Math.PI).toFixed(1);
htmlZeta.innerHTML = (myZeta * 180 / Math.PI).toFixed(1);
htmlRadius.innerHTML = radius.toFixed(1);
htmlFovy.innerHTML = (fovy * 180 / Math.PI).toFixed(1);
canvas.addEventListener("wheel",
function (event) {
var delta = 0.0;
if (event.deltaMode == 0)
delta = event.deltaY * 0.001;
else if (event.deltaMode == 1)
delta = event.deltaY * 0.03;
else
delta = event.deltaY;
if (event.shiftKey == 1) { // fovy
fovy *= Math.exp(-delta)
fovy = Math.max (0.1, Math.min(3.0, fovy));
htmlFovy.innerHTML = (fovy * 180 / Math.PI).toFixed(1);
} else {
radius *= Math.exp(-delta);
radius = Math.max(Math.min(radius, 30), 0.05);
htmlRadius.innerHTML = radius.toFixed(1);
}
event.preventDefault();
requestAnimationFrame(drawScene);
}, false);
}
function handleKeyDown(event) {
console.log(event.keyCode);
switch (event.keyCode) {
//MOVEMENT
case 87: // ’w’ key
eye[2] -= 0.01;
center[2] -=0.01;
break;
// right
case 83: // ’s’ key
eye[2] += 0.01;
center[2] +=0.01;
break;
case 65: // ’a’ key
eye[0] -= 0.01;
center[0] -=0.01;
break;
// right
case 68: // ’d’ key
eye[0] += 0.01;
center[0] +=0.01;
break;
//CAMERA MOVEMENT
case 38: // ’up arrow’ key
myPhi+=0.01;
break;
// right
case 40: // ’down arrow’ key
myPhi-=0.01;
break;
case 37: // ’up arrow’ key
myZeta+=0.01;
break;
// right
case 39: // ’down arrow’ key
myZeta-=0.01;
break;
break;
}
requestAnimationFrame(drawScene);
}
function initWebGL() {
gl = getWebGLContext();
if (!gl) {
alert("WebGL 2.0 no está disponible");
return;
}
document.onkeydown = handleKeyDown;
initShaders();
initPrimitives();
initRendering();
initHandlers();
requestAnimationFrame(drawScene);
}
initWebGL();
canvas {border: 1px solid black;}
<script id="myVertexShader"
type="x-shader/x-vertex">#version 300 es
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
in vec3 VertexPosition;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(VertexPosition, 1.0);
}
</script>
<script id="myFragmentShader"
type="x-shader/x-fragment">#version 300 es
// Shader de fragmentos
precision mediump float;
uniform vec4 myColor;
out vec4 fragmentColor;
void main() {
fragmentColor = myColor;
}
</script>
<br>
<strong>Phi: </strong><span id="Phi"></span>°
<br>
<strong>Zeta: </strong><span id="Zeta"></span>°
<br>
<strong>Fovy: </strong><span id="Fovy"></span>°
<br>
<strong>Radius: </strong><span id="Radius"></span>
<br>
<canvas id="myCanvas" width="600" height="600">
El Navegador no soporta HTML5
</canvas>
<script src="https://cdn.jsdelivr.net/npm/gl-matrix#3.3.0/gl-matrix-min.js"></script>

So the first thing I did once I got your code to run is add in webgl-lint with
<script src="https://greggman.github.io/webgl-lint/webgl-lint.js" crossorigin></script>
That immediately brought up this error in the JavaScript console
webgl-lint.js:2163 Uncaught Error: https://greggman.github.io/webgl-lint/webgl-lint.js:2942: error in uniformMatrix4fv(undefined, false, [0.05000000074505806, 0, 0, 0, 0, -4.5621650389774436e-26, 0.05000000074505806, 0, 0, -0.30000001192092896, -7.29946406236391e-25, 0, -0.30000001192092896, 0.05000000074505806, -4.300000190734863, 1]): argument 0 is undefined
at reportError (VM9 webgl-lint.js:2163)
at reportFunctionError (VM9 webgl-lint.js:2924)
at checkArgs (VM9 webgl-lint.js:2942)
at WebGL2RenderingContext.ctx. [as uniformMatrix4fv] (VM9 webgl-lint.js:3016)
at start_draw (js:417)
at drawall (js:428)
at drawScene (js:435)\
clicking the first stack trace line related to your code brought me here
// 2. establece la matriz modelMatrix en el shader de vértices
console.log(finalProj);
---> gl.uniformMatrix4fv(program.modelViewMatrix, false, finalProj);
It's not program.modelMatrixIndex it's program.modelViewMatrixIndex
and that got something on the screen
const {mat4} = glMatrix;
var examplePlane = { // 4 vértices, 2 triángulos
"vertices" : [-0.5, 0.0, 0.5,
0.5, 0.0, 0.5,
0.5, 0.0,-0.5,
-0.5, 0.0,-0.5],
"indices" : [0, 1, 2, 0, 2, 3]
};
var exampleCube = { // 8 vértices, 12 triángulos
"vertices" : [-0.5,-0.5, 0.5,
0.5,-0.5, 0.5,
0.5, 0.5, 0.5,
-0.5, 0.5, 0.5,
-0.5,-0.5, -0.5,
0.5,-0.5, -0.5,
0.5, 0.5, -0.5,
-0.5, 0.5, -0.5],
"indices" : [ 0, 1, 2, 0, 2, 3,
1, 5, 6, 1, 6, 2,
3, 2, 6, 3, 6, 7,
5, 4, 7, 5, 7, 6,
4, 0, 3, 4, 3, 7,
4, 5, 1, 4, 1, 0]
};
var exampleCover = { // 13 vértices, 12 triángulos
"vertices" : [ 1, 0, 0, 0.866, 0.5, 0, 0.5, 0.866, 0,
0, 1, 0, -0.5, 0.866, 0, -0.86, 0.5, 0,
-1, 0, 0, -0.866, -0.5, 0, -0.5, -0.866, 0,
0, -1, 0, 0.5, -0.866, 0, 0.866, -0.5, 0,
0, 0, 0],
"indices" : [ 0, 1, 12, 1, 2, 12, 2, 3, 12, 3, 4, 12, 4, 5, 12, 5, 6, 12,
6, 7, 12, 7, 8, 12, 8, 9, 12, 9, 10, 12, 10, 11, 12, 11, 0, 12]
};
var exampleCone = { // 13 vértices, 12 triángulos
"vertices" : [ 1, 0, 0, 0.866, 0.5, 0, 0.5, 0.866, 0,
0, 1, 0, -0.5, 0.866, 0, -0.86, 0.5, 0,
-1, 0, 0, -0.866, -0.5, 0, -0.5, -0.866, 0,
0, -1, 0, 0.5, -0.866, 0, 0.866, -0.5, 0,
0, 0, 1],
"indices" : [ 0, 1, 12, 1, 2, 12, 2, 3, 12, 3, 4, 12, 4, 5, 12, 5, 6, 12,
6, 7, 12, 7, 8, 12, 8, 9, 12, 9, 10, 12, 10, 11, 12, 11, 0, 12]
};
var exampleCylinder = { // 24 vértices, 24 triángulos
"vertices" : [ 1, 0, 0, 0.866, 0.5, 0, 0.5, 0.866, 0,
0, 1, 0, -0.5, 0.866, 0, -0.86, 0.5, 0,
-1, 0, 0, -0.866, -0.5, 0, -0.5, -0.866, 0,
0, -1, 0, 0.5, -0.866, 0, 0.866, -0.5, 0,
1, 0, 1, 0.866, 0.5, 1, 0.5, 0.866, 1,
0, 1, 1, -0.5, 0.866, 1, -0.86, 0.5, 1,
-1, 0, 1, -0.866, -0.5, 1, -0.5, -0.866, 1,
0, -1, 1, 0.5, -0.866, 1, 0.866, -0.5, 1],
"indices" : [ 0, 1, 12, 1, 2, 13, 2, 3, 14, 3, 4, 15, 4, 5, 16, 5, 6, 17,
6, 7, 18, 7, 8, 19, 8, 9, 20, 9, 10, 21, 10, 11, 22, 11, 0, 23,
1, 13, 12, 2, 14, 13, 3, 15, 14, 4, 16, 15, 5, 17, 16, 6, 18, 17,
7, 19, 18, 8, 20, 19, 9, 21, 20, 10, 22, 21, 11, 23, 22, 0, 12, 23]
};
var exampleSphere = { // 42 vértices, 80 triángulos
"vertices" : [ 0.000000, 0.850651, 0.525731,
-0.309017, 0.500000, 0.809017,
0.309017, 0.500000, 0.809017,
-0.525731, 0.000000, 0.850651,
0.000000, 0.000000, 1.000000,
0.525731, 0.000000, 0.850651,
-0.850651, 0.525731, 0.000000,
-0.809017, 0.309017, 0.500000,
-0.500000, 0.809017, 0.309017,
0.000000, 0.850651,-0.525731,
-0.500000, 0.809017,-0.309017,
0.000000, 1.000000, 0.000000,
0.500000, 0.809017,-0.309017,
0.500000, 0.809017, 0.309017,
0.850651, 0.525731, 0.000000,
0.809017, 0.309017, 0.500000,
0.850651,-0.525731, 0.000000,
1.000000, 0.000000, 0.000000,
0.809017,-0.309017, 0.500000,
0.525731, 0.000000,-0.850651,
0.809017, 0.309017,-0.500000,
0.809017,-0.309017,-0.500000,
0.309017, 0.500000,-0.809017,
-0.525731, 0.000000,-0.850651,
-0.309017, 0.500000,-0.809017,
0.000000, 0.000000,-1.000000,
0.000000,-0.850651,-0.525731,
-0.309017,-0.500000,-0.809017,
0.309017,-0.500000,-0.809017,
0.500000,-0.809017,-0.309017,
0.000000,-0.850651, 0.525731,
0.000000,-1.000000, 0.000000,
0.500000,-0.809017, 0.309017,
-0.850651,-0.525731, 0.000000,
-0.500000,-0.809017,-0.309017,
-0.500000,-0.809017, 0.309017,
-0.809017,-0.309017, 0.500000,
-0.309017,-0.500000, 0.809017,
0.309017,-0.500000, 0.809017,
-1.000000, 0.000000, 0.000000,
-0.809017,-0.309017,-0.500000,
-0.809017, 0.309017,-0.500000],
"indices" : [ 1, 2, 0, 4, 1, 3, 2, 4, 5, 4, 2, 1, 7, 8, 6, 1, 7, 3, 8, 1, 0, 1, 8, 7,10,11, 9, 8,10, 6,
11, 8, 0, 8,11,10,11,12, 9,13,11, 0,12,13,14,13,12,11,13,15,14, 2,13, 0,15, 2, 5, 2,15,13,
17,18,16,15,17,14,18,15, 5,15,18,17,20,21,19,17,20,14,21,17,16,17,21,20,22,20,19,12,22, 9,
20,12,14,12,20,22,24,25,23,22,24, 9,25,22,19,22,25,24,27,28,26,25,27,23,28,25,19,25,28,27,
29,21,16,28,29,26,21,28,19,28,21,29,31,32,30,29,31,26,32,29,16,29,32,31,34,35,33,31,34,26,
35,31,30,31,35,34,36,37, 3,35,36,33,37,35,30,35,37,36, 4,38, 5,37, 4, 3,38,37,30,37,38, 4,
38,18, 5,32,38,30,18,32,16,32,18,38, 7,36, 3,39, 7, 6,36,39,33,39,36, 7,39,40,33,41,39, 6,
40,41,23,41,40,39,41,24,23,10,41, 6,24,10, 9,10,24,41,27,40,23,34,27,26,40,34,33,34,40,27]
};
function makeTorus (innerRadius, outerRadius, nSides, nRings) {
var torus = {
"vertices" : [],
"indices" : []
};
if (nSides < 3 ) nSides = 3;
if (nRings < 3 ) nRings = 3;
var dpsi = 2.0 * Math.PI / nRings ;
var dphi = -2.0 * Math.PI / nSides ;
var psi = 0.0;
for (var j = 0; j < nRings; j++) {
var cpsi = Math.cos ( psi ) ;
var spsi = Math.sin ( psi ) ;
var phi = 0.0;
for (var i = 0; i < nSides; i++) {
var offset = 3 * ( j * (nSides+1) + i ) ;
var cphi = Math.cos ( phi ) ;
var sphi = Math.sin ( phi ) ;
torus.vertices[offset + 0] = cpsi * ( outerRadius + cphi * innerRadius ) ;
torus.vertices[offset + 1] = spsi * ( outerRadius + cphi * innerRadius ) ;
torus.vertices[offset + 2] = sphi * innerRadius ;
phi += dphi;
}
var offset = torus.vertices.length;
for (var i = 0; i < 3; i++)
torus.vertices[offset + i] = torus.vertices[offset-nSides*3+i];
psi += dpsi;
}
var offset = torus.vertices.length;
for (var i = 0; i < 3*(nSides+1); i++)
torus.vertices[offset+i] = torus.vertices[i];
for (var j = 0; j < nRings; j++){
var desp = j * (nSides + 1);
for (var i = 0; i < nSides; i++){
torus.indices.push(desp + i, desp + i + 1, desp + i + (nSides+1));
torus.indices.push(desp + i + 1, desp + i + (nSides+1) + 1, desp + i + (nSides+1));
}
}
return torus;
}
var gl, program;
var myTorus;
var myZeta = 0.0, myPhi = Math.PI/2.0, radius = 1.4, fovy = 1.4;
function getWebGLContext() {
var canvas = document.getElementById("myCanvas");
try {
return canvas.getContext("webgl2",{antialias:true});
}
catch(e) {
}
return null;
}
function initShaders() {
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, document.getElementById("myVertexShader").text);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(vertexShader));
return null;
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, document.getElementById("myFragmentShader").text);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(fragmentShader));
return null;
}
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
idMyColor = gl.getUniformLocation (program, "myColor" );
program.vertexPositionAttribute = gl.getAttribLocation(program, "VertexPosition");
gl.enableVertexAttribArray(program.vertexPositionAttribute);
program.modelViewMatrixIndex = gl.getUniformLocation(program,"modelViewMatrix");
program.projectionMatrixIndex = gl.getUniformLocation(program,"projectionMatrix");
}
function initRendering() {
gl.clearColor(0.95,0.95,0.95,1.0);
gl.lineWidth(1.5);
gl.enable(gl.DEPTH_TEST);
}
function initBuffers(model) {
model.idBufferVertices = gl.createBuffer ();
gl.bindBuffer (gl.ARRAY_BUFFER, model.idBufferVertices);
gl.bufferData (gl.ARRAY_BUFFER, new Float32Array(model.vertices), gl.STATIC_DRAW);
model.idBufferIndices = gl.createBuffer ();
gl.bindBuffer (gl.ELEMENT_ARRAY_BUFFER, model.idBufferIndices);
gl.bufferData (gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(model.indices), gl.STATIC_DRAW);
}
function draw(model) {
console.log(model);
gl.bindBuffer(gl.ARRAY_BUFFER, model.idBufferVertices);
gl.vertexAttribPointer(program.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.idBufferIndices);
for (var i = 0; i < model.indices.length; i += 3)
// Si paint es true vol dir que volem pintar per tant farem el triangle_fan
gl.drawElements (gl.TRIANGLE_FAN, 3, gl.UNSIGNED_SHORT, i*2);
}
// set projection (apliquem una projecció al dibuix)
function setProjection() {
// obtiene la matriz de transformación de la proyección perspectiva
var projectionMatrix = mat4.create();
// perspective
mat4.perspective(projectionMatrix, Math.PI/4.0, 1., 0.1, 100.0);
// envía la matriz de transformación de la proyección al shader de vértices
gl.uniformMatrix4fv(program.projectionMatrixIndex,false,projectionMatrix);
}
function initPrimitives() {
initBuffers(examplePlane);
initBuffers(exampleCube);
initBuffers(exampleCover);
initBuffers(exampleCone);
initBuffers(exampleCylinder);
initBuffers(exampleSphere);
myTorus = makeTorus(0.4, 1.0, 8, 12);
initBuffers(myTorus);
}
function getCameraMatrix() {
// coordenadas esféricas a rectangulares: https://en.wikipedia.org/wiki/Spherical_coordinate_system
var x = radius * Math.sin(myPhi) * Math.sin(myZeta);
var y = radius * Math.cos(myPhi);
var z = radius * Math.sin(myPhi) * Math.cos(myZeta);
return mat4.lookAt(mat4.create(), [x, y, z], [0, 0, 0], [0, 1, 0]);
}
////////////////////
// move the Eye
////////////////////
var eye = [0, 0, 1.4];
var center = [0, 0, 0];
function moveEye () {
return mat4.lookAt(mat4.create(), eye, center, [0, 1, 0]);
}
///////////////////
///////////////////
function start_draw(model, rx, ry, rz, r1x, r1y, r1z, sx, sy, sz, tx, ty, tz, c1, c2, c3, c4){
// 1. calcula la matriz de transformación
var modelMatrix = mat4.create();
var rotationmatr = mat4.create();
var rotation2 = mat4.create();
var transmatr = mat4.create();
var scalematr = mat4.create();
mat4.fromRotation (rotationmatr, Math.PI/2, [rx, ry, rz]);
mat4.fromRotation (rotation2, Math.PI/2, [r1x, r1y, r1z]);
mat4.fromScaling (scalematr, [sx, sy, sz]);
mat4.multiply (modelMatrix, rotationmatr, rotation2);
mat4.fromTranslation(transmatr,[tx, ty, tz]);
mat4.multiply(modelMatrix, transmatr, modelMatrix);
mat4.multiply(modelMatrix, modelMatrix, scalematr);
var modelMatrixM = mat4.create();
var modelViewMatrixM = mat4.create();
mat4.fromScaling(modelMatrixM, [0.5, 0.5, 0.5]);
mat4.multiply(modelViewMatrixM, moveEye(), modelMatrixM);
mat4.multiply(modelViewMatrixM, getCameraMatrix(), modelViewMatrixM);
var finalProj = mat4.create();
mat4.multiply(finalProj, modelViewMatrixM, modelMatrix);
// 2. establece la matriz modelMatrix en el shader de vértices
console.log(finalProj);
gl.uniformMatrix4fv(program.modelViewMatrixIndex, false, finalProj);
gl.uniform4f (idMyColor, c1, c2, c3, c4);
setProjection();
draw(model);
}
function drawall(){
start_draw(exampleCylinder, .5, 0, 0, 0, 0, 0, .1, .1, .6, -.6, .1, -3, .5, 0, .5, .7);
}
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
drawall();
}
function initHandlers() {
var mouseDown = false;
var lastMouseX;
var lastMouseY;
var canvas = document.getElementById("myCanvas");
var htmlPhi = document.getElementById("Phi");
var htmlZeta = document.getElementById("Zeta");
var htmlRadius = document.getElementById("Radius");
var htmlFovy = document.getElementById("Fovy");
htmlPhi.innerHTML = (myPhi * 180 / Math.PI).toFixed(1);
htmlZeta.innerHTML = (myZeta * 180 / Math.PI).toFixed(1);
htmlRadius.innerHTML = radius.toFixed(1);
htmlFovy.innerHTML = (fovy * 180 / Math.PI).toFixed(1);
canvas.addEventListener("wheel",
function (event) {
var delta = 0.0;
if (event.deltaMode == 0)
delta = event.deltaY * 0.001;
else if (event.deltaMode == 1)
delta = event.deltaY * 0.03;
else
delta = event.deltaY;
if (event.shiftKey == 1) { // fovy
fovy *= Math.exp(-delta)
fovy = Math.max (0.1, Math.min(3.0, fovy));
htmlFovy.innerHTML = (fovy * 180 / Math.PI).toFixed(1);
} else {
radius *= Math.exp(-delta);
radius = Math.max(Math.min(radius, 30), 0.05);
htmlRadius.innerHTML = radius.toFixed(1);
}
event.preventDefault();
requestAnimationFrame(drawScene);
}, false);
}
function handleKeyDown(event) {
console.log(event.keyCode);
switch (event.keyCode) {
//MOVEMENT
case 87: // ’w’ key
eye[2] -= 0.01;
center[2] -=0.01;
break;
// right
case 83: // ’s’ key
eye[2] += 0.01;
center[2] +=0.01;
break;
case 65: // ’a’ key
eye[0] -= 0.01;
center[0] -=0.01;
break;
// right
case 68: // ’d’ key
eye[0] += 0.01;
center[0] +=0.01;
break;
//CAMERA MOVEMENT
case 38: // ’up arrow’ key
myPhi+=0.01;
break;
// right
case 40: // ’down arrow’ key
myPhi-=0.01;
break;
case 37: // ’up arrow’ key
myZeta+=0.01;
break;
// right
case 39: // ’down arrow’ key
myZeta-=0.01;
break;
break;
}
requestAnimationFrame(drawScene);
}
function initWebGL() {
gl = getWebGLContext();
if (!gl) {
alert("WebGL 2.0 no está disponible");
return;
}
document.onkeydown = handleKeyDown;
initShaders();
initPrimitives();
initRendering();
initHandlers();
requestAnimationFrame(drawScene);
}
initWebGL();
canvas {border: 1px solid black;}
<script id="myVertexShader"
type="x-shader/x-vertex">#version 300 es
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
in vec3 VertexPosition;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(VertexPosition, 1.0);
}
</script>
<script id="myFragmentShader"
type="x-shader/x-fragment">#version 300 es
// Shader de fragmentos
precision mediump float;
uniform vec4 myColor;
out vec4 fragmentColor;
void main() {
fragmentColor = myColor;
}
</script>
<br>
<strong>Phi: </strong><span id="Phi"></span>°
<br>
<strong>Zeta: </strong><span id="Zeta"></span>°
<br>
<strong>Fovy: </strong><span id="Fovy"></span>°
<br>
<strong>Radius: </strong><span id="Radius"></span>
<br>
<canvas id="myCanvas" width="600" height="600">
El Navegador no soporta HTML5
</canvas>
<script src="https://cdn.jsdelivr.net/npm/gl-matrix#3.3.0/gl-matrix-min.js"></script>
PS: Please learn how to use snippets and CDNs for libraries
Also, just FYI, getContext never throws so this code
function getWebGLContext() {
var canvas = document.getElementById("myCanvas");
try {
return canvas.getContext("webgl2",{antialias:true});
}
catch(e) {
}
return null;
}
makes no sense. It should just be
function getWebGLContext() {
var canvas = document.getElementById("myCanvas");
return canvas.getContext("webgl2",{antialias:true});
}
and further, antialias: true is the default so
function getWebGLContext() {
var canvas = document.getElementById("myCanvas");
return canvas.getContext("webgl2");
}

Chart.js Dynamically Updating Chart with X Axis Time

I'm using Chart.js version 2.7.1 and I am dynamically updating my Line chart when temperature data comes in.
The problem is that the lines never pass the halfway mark of the x axis in time. Every time I update, the chart auto scales the right side ( max time ) of the x axis to be further out, so my data never approaches the right side of the chart. What I want is for the line to approach the right side, and only a small margin of time is extended into the future for the x-axis each time I update. How can I accomplish this?
Here is how I configure the chart:
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: [],
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: [],
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
Here is the chart:

as you can see in the following snippet and thanks also to Daniel W Strimpel for creating the initial snippet, you problem is in the hot and cold temperature data.
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
both of those arrays have n number of entries in the end missing the y coordinate including the temperature value. I recreated your scenario by deleting the y for the 5 last entries of the cold and hot temperatures data.
The chart will add the date to the x axis, but it will not add a temperature value and the line will not show up.
{x: new Data(2019, 0, 14, 1, 26, 0) }
The code snippet recreates your scenario, you can run it to understand the problem and fix it by adding the y value to the last 5 entries in the getHotTempData and getColdTempData
var ctx = document.getElementById('tempChart').getContext('2d');
ctx.canvas.width = 320;
ctx.canvas.height = 240;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
legend: {
display: true
},
datasets: [{
fill: false,
data: getHotTempData(),
label: 'Hot Temperature',
backgroundColor: "#FF2D00",
borderColor: "#FF2D00",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
},
{
fill: false,
data: getColdTempData(),
label: 'Cold Temperature',
backgroundColor: "#0027FF",
borderColor: "#0027FF",
type: 'line',
pointRadius: 1,
lineTension: 2,
borderWidth: 2
}]
},
options: {
animation: false,
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time ( UTC )'
},
type: 'time',
time: {
tooltipFormat: "hh:mm:ss",
displayFormats: {
hour: 'MMM D, hh:mm:ss'
}
},
ticks: {
maxRotation: 90,
minRotation: 90
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Temperature ( Celcius )'
},
}]
}
}
});
function getHotTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 35 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
function getColdTempData() {
return [
{ x: new Date(2019, 0, 1, 14, 1, 19, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 20, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 21, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 22, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 23, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 24, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 25, 0), y: Math.random() * 0.5 + 23.5 },
{ x: new Date(2019, 0, 1, 14, 1, 26, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 27, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 28, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 29, 0) },
{ x: new Date(2019, 0, 1, 14, 1, 30, 0) }
];
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="tempChart"></canvas>

Customize labels gauge.js

I have an issue with displaying the unit '%' with the labels, around the gauge. I use the gauge.js library for drawing gauges.
I want to add a % next to the numbers
E.g: 5, 10, 15, 20 -> 5%, 10%, 15%, 20%...
/* - main.js - */
var gauge_credit_bail = new Gauge(document.getElementById('gauge_credit_bail')).setOptions({
angle: 0,
lineWidth: 0.2,
radiusScale: .9,
pointer: {
length: 0.56,
strokeWidth: 0.035,
color: '#111111'
},
limitMax: true,
limitMin: true,
strokeColor: '#aaa',
generateGradient: false,
highDpiSupport: true,
staticZones: [
{strokeStyle: "#d30000", min: 1, max: 5},
{strokeStyle: "#f6db2d", min: 5, max: 10},
{strokeStyle: "#f6db2d", min: 10, max: 15},
{strokeStyle: "#f6db2d", min: 15, max: 20},
{strokeStyle: "#f6db2d", min: 20, max: 25},
{strokeStyle: "#f6db2d", min: 25, max: 40},
{strokeStyle: "#3eea34", min: 40, max: 45},
{strokeStyle: "#3eea34", min: 45, max: 50},
{strokeStyle: "#3eea34", min: 50, max: 55},
{strokeStyle: "#3eea34", min: 55, max: 60},
{strokeStyle: "#45caff", min: 60, max: 65},
{strokeStyle: "#45caff", min: 65, max: 70}
],
staticLabels: {
font: "11px sans-serif",
labels: [1, 5, 10,15, 20, 25,30,35,40,45,50,55,60,65,70],
color: "#000000",
fractionDigits: 0
}
});
gauge_credit_bail.setMinValue(1);
gauge_credit_bail.maxValue = 70;
gauge_credit_bail.animationSpeed = 10;
....
var index = arr.indexOf(parseFloat(obj.val()));
if ($(this).data('event') === 'max') {
if (index < arr.length - 1) {
obj.val(arr[index + 1]);
}
} else if ($(this).data('event') === 'min') {
if (index > 0) {
obj.val(arr[index - 1]);
}
}
.....
if (target === 'input_cb_oa') {
gauge_credit_bail.set(parseFloat(obj.val()));
This is my code for the gauge labels,
thank you.

How to create a shiny logo like Google Chromebooks website

http://www.google.com/chromebook/#features
When you hover the logo, you can see a shiny animation.
I have looked into the source code but it doesn't look like done with :hover
any idea about how they do it?
Thank you very much

It's using the CHEDDAR Canvas Animation Framework by Eric Lee. Cheddar is based off of Cake.js by Ilmari Heikkinen http://code.google.com/p/cakejs/
This file : http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js

Look at the HTML source. It's done using a <canvas>.
<div id="header-logo">
<noscript>
<a data-g-label="MAIN-NAV-HOME" href="index.html" id="header-logo-noscript">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</noscript>
<canvas height="40" id="canvas-logo" width="123">
<a data-g-label="MAIN-NAV-HOME" href="index.html">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</canvas>
</div>
The relevant script appears to be chromeicons-main.min.js.

It's done with a canvas element.

Firebug says it's a canvas, which means HTML5.
The script http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js appears to contain a "canvas animation framework" that does the job.

If you look sources, you will see they use CHEDDAR Canvas Animation Framework to animate this logo.

looks like some canvas stuff to me. (nice beginner tutorial here)

This appears to be the relevant portion of chromeicons-main.min.js. for the chrome logo itself.
ChromeLogo = CClass(CanvasNode, {
center_gradient: new Gradient({
type: "radial",
startX: 7,
startY: -7,
endRadius: 14,
colorStops: [
[1, "#005791"],
[0.62, "#2284DC"],
[0, "#86B9E2"]
]
}),
center_back: new Gradient({
type: "radial",
endRadius: 14,
colorStops: [
[0, "#D2D2D2"],
[1, "#FFFFFF"]
]
}),
top_gradient: new Gradient({
type: "radial",
endRadius: 16,
colorStops: [
[0.15, "#F37C65"],
[1, [243, 124, 90, 0]]
]
}),
highlight_gradient3: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 40,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.4)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient4: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.5)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient5: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.5, "rgba(255,255,255,.9)"],
[0, "rgba(255,255,255,0)"]
]
}),
initialize: function () {
CanvasNode.initialize.call(this);
this.scale = 0.78;
this.catchMouse = false;
this.textGlow = new Circle(30, {
fill: this.highlight_gradient5,
x: 22,
y: 23,
zIndex: 2
});
this.append(this.textGlow);
this.center = new Circle(7.5, {
fill: this.center_gradient,
x: 22,
y: 23,
zIndex: 4,
clip: true
});
this.centerBack = new Circle(9, {
fill: this.center_back,
x: 22,
y: 23,
zIndex: 3
});
this.border = new CanvasNode({
zIndex: 2
});
this.mask = new CanvasNode({
x: 22,
y: 23
});
this.ch3 = new Circle(8, {
fill: this.highlight_gradient4,
scale: 0.1,
opacity: 0,
compositeOperation: "lighter"
});
this.center.append(this.ch3);
this.red = _iconController.asset("logo_red");
this.red.childNodes[0].clip = true;
this.red.setProps({
x: -17,
y: -20,
clip: true
});
this.redShadow = _iconController.asset("shadow_red");
this.redShadow.setProps({
x: -17,
y: -13,
zIndex: 2
});
this.rh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 17,
y: 20,
zIndex: 4
});
this.red.childNodes[0].append(this.rh3);
this.yellow = _iconController.asset("logo_yellow");
this.yellow.setProps({
x: -1.5,
y: -9
});
this.yellow.childNodes[0].clip = true;
this.yellowShadow = _iconController.asset("shadow_yellow");
this.yellowShadow.setProps({
zIndex: 2,
x: 1,
y: -9
});
this.yh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 1.5,
y: 9,
zIndex: 4
});
this.yellow.childNodes[0].append(this.yh3);
this.green = _iconController.asset("logo_green");
this.green.setProps({
x: -20,
y: -11
});
this.green.childNodes[0].clip = true;
this.greenShadow = _iconController.asset("shadow_green");
this.greenShadow.setProps({
x: -2,
y: 5,
zIndex: 2
});
this.gh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 20,
y: 11.5,
zIndex: 4
});
this.green.childNodes[0].append(this.gh3);
this.top = new Circle(19, {
fill: false,
clip: true,
x: 24,
y: 23,
zIndex: 5
});
this.topGrad = new Circle(19, {
fill: this.top_gradient,
x: -2,
y: -24
});
this.mask.append(this.red, this.redShadow, this.yellow, this.yellowShadow, this.green, this.greenShadow);
this.border.append(this.mask);
this.top.append(this.topGrad);
this.append(this.border, this.centerBack, this.center, this.top);
this.text = _iconController.asset("logo_text");
this.text.setProps({
x: 49,
y: 8
});
for (var a = 0; a < this.text.childNodes[0].childNodes.length; a++) {
this.text.childNodes[0].childNodes[a].opacity = 1
}
this.append(this.text)
},
mouseOver: function () {
this.canvas.play();
_tw.removeTweensOf([this.textGlow, this.rh3, this.yh3, this.gh3, this.ch3]);
this.textGlow.scale = this.ch3.scale = this.rh3.scale = this.gh3.scale = this.yh3.scale = 0.1;
this.textGlow.opacity = this.rh3.opacity = this.gh3.opacity = this.yh3.opacity = 1;
var a = new Array(0, 0.1, 0.2, 0.3);
var b = shuffle(a);
_tw.addTween(this.center, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.centerBack, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.mask, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad",
onComplete: function (c) {
_tw.addTween(c.center, {
time: 0.5,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.centerBack, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.mask, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
})
},
onCompleteParams: [this]
});
_tw.addTween(this.rh3, {
time: 2,
delay: b[0],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.yh3, {
time: 2,
delay: b[1],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.gh3, {
time: 2,
delay: b[2],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.ch3, {
time: 0.2,
delay: b[3],
scale: 10,
opacity: 1,
transition: "linear",
onComplete: function (c) {
_tw.addTween(c.ch3, {
time: 0.25,
opacity: 0
})
},
onCompleteParams: [this]
});
_tw.addTween(this.textGlow, {
time: 10,
delay: 0.5,
scale: 120,
opacity: 0.2,
onComplete: function (c) {
c.canvas.stop()
},
onCompleteParams: [this]
})
},
mouseOut: function () {}
});
_iconController.initializeIcon("canvas-logo", ChromeLogo);