How to remove texture from webgl code?

There is an interesting code that is executed using webgl, dWwGKa

Code:

var canvas;
var gl;
var realToCSSPixels = window.devicePixelRatio;
var displayWidth;
var displayHeight;
var rings;
var createdMetaballs = [];
var assetsIndexToLoad = 0;
var assetsToLoad = [
 {path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-183/', src: 'noise3.png', name: 'noise3', type: 'texture'}
];
var assets = {};

window.onload = preloadAssets;

preloadAssets function() {


 checkIfAllAssetsAreLoaded function() {
 if (assetsIndexToLoad < assetsToLoad.length) {
loadAssetIndex(assetsIndexToLoad);
}
 else {
initialize();
}
}

 loadAssetIndex function(index) {
 var objectToLoad = assetsToLoad[index];

 switch (objectToLoad.type) {
 case 'texture':
 var image = new Image();
 image.onload = function(event) {
 assets[objectToLoad.name] = this;
assetsIndexToLoad++;
checkIfAllAssetsAreLoaded();
};
 image.by adding crossorigin = ";
 image.src = objectToLoad.path + objectToLoad.src;
break;
}
}

loadAssetIndex(assetsIndexToLoad);
}

function initialize(){

 canvas = document.getElementById('metaball-canvas');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var glConfig = {
 premultipliedAlpha: true,
 antialias: true,
depth:true,
 alpha: true
}

 gl = canvas.getContext('webgl', glConfig) || canvas.getContext('experimental-webgl', glConfig);

if(!gl){
 console.error('cannot find gl', gl);
return;
}
 displayWidth = Math.floor(gl.canvas.clientWidth * realToCSSPixels);
 displayHeight = Math.floor(gl.canvas.clientHeight * realToCSSPixels);

 var minSpeed = 0.2;
 var maxSpeed = 2.5;
 var minMultiplierArcX = -.25;
 var maxMultiplierArcX = .75;
 var minMultiplierArcY = -.25;
 var maxMultiplierArcY = .25;
 var scale = 1.0;

 var metaballsGroup1 = {
metaballs:[
 { centerOffsetX:26 * scale, centerOffsetY:155 * scale, radius: 70 * scale speed: getRandomFloat(minSpeed, maxSpeed), t:Math.random() * 200, arcMultiplierX:getRandomFloat(minMultiplierArcX, maxMultiplierArcX), arcMultiplierY:getRandomFloat(minMultiplierArcY, maxMultiplierArcY) },
 { centerOffsetX:-110 * scale, centerOffsetY:10 * scale, radius: 60 * scale speed: getRandomFloat(minSpeed, maxSpeed), t:Math.random() * 200, arcMultiplierX:getRandomFloat(minMultiplierArcX, maxMultiplierArcX), arcMultiplierY:getRandomFloat(minMultiplierArcY, maxMultiplierArcY) },
 { centerOffsetX:12 * scale, centerOffsetY:-114 * scale, radius: 48 * scale speed: getRandomFloat(minSpeed, maxSpeed), t:Math.random() * 200, arcMultiplierX:getRandomFloat(minMultiplierArcX, maxMultiplierArcX), arcMultiplierY:getRandomFloat(minMultiplierArcY, maxMultiplierArcY) },
 { centerOffsetX:-300 * scale, centerOffsetY:20 * scale, radius: 160 * scale speed: getRandomFloat(minSpeed, maxSpeed), t:Math.random() * 200, arcMultiplierX:getRandomFloat(minMultiplierArcX, maxMultiplierArcX), arcMultiplierY:getRandomFloat(minMultiplierArcY, maxMultiplierArcY) },
 { centerOffsetX:-570 * scale, centerOffsetY:-20 * scale, radius: 50 * scale speed: getRandomFloat(minSpeed, maxSpeed), t:Math.random() * 200, arcMultiplierX:getRandomFloat(minMultiplierArcX, maxMultiplierArcX), arcMultiplierY:getRandomFloat(minMultiplierArcY, maxMultiplierArcY) },
],
 texture:generateGradientTexture([{color:'#e24926', 'stop': 0.2}, {color:'#c8246c', stop:.35}, {color:'#40204c', stop:.55}, {color:'#e24926', stop:.75}, {color:'#40204c', stop:1.0}], false, false)
};

 createdMetaballs.push(new Metaballs(gl, metaballsGroup1));

 for (var i = 0; i < createdMetaballs.length; i++) {
 setTimeout(createdMetaballs[i].fadeIn, i * 200);
};
 window.addEventListener('resize', onWindowResize);
 window.addEventListener('mousemove', onWindowMouseMove);

resizeGL(gl);

step();
}

generateGradientTexture function(colors, vertical, debug) {

 colors = colors || [{color:'#000000', stop:0.0}, {color:'#FFF000', stop:.5}, {color:'#642054', stop:1.0}];
 vertical = vertical !== undefined ? vertical : false;

 var size = 512;

 // create canvas
 var textureCanvas = document.createElement( 'canvas' );
 textureCanvas.width = size;
 textureCanvas.height = size;

 if(debug == true){
 textureCanvas.style.position = 'absolute';
 textureCanvas.style.top = '0px';
 textureCanvas.style.left = '0px';
document.body.appendChild(textureCanvas);
}

 // get context
 var context = textureCanvas.getContext( '2d' );

 // draw gradient
 context.rect( 0, 0, size, size );

 var grd = vertical ? context.createLinearGradient(0, size, 0, 0) : context.createLinearGradient(0, 0, size, 0);
 for(var i = 0; i < colors.length; i++){
 grd.addColorStop(colors[i].stop, colors[i].color);
}
 context.fillStyle = grd;
 context.fillRect(0, 0, size, size);

 return textureCanvas;
}



function getRandomFloat(min, max) {
 return Math.random() * (max - min) + min;
}

function onWindowResize(event){
 canvas.width = canvas.clientWidth;
 canvas.height = canvas.clientHeight;


resizeGL(gl);
 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
}

onWindowMouseMove function(event){
createdMetaballs.forEach(function(metaball){
 metaball.handleMouseMove(event.clientX, event.clientY);
});
}

resizeGL function(gl) {
 realToCSSPixels = window.devicePixelRatio;

 // Lookup the size the browser is displaying the canvas in CSS pixels
 // and compute a size needed to make our drawingbuffer match it in
 // device pixels.
 displayWidth = Math.floor(gl.canvas.clientWidth * realToCSSPixels);
 displayHeight = Math.floor(gl.canvas.clientHeight * realToCSSPixels);

 // Check if the canvas is not the same size.
 if (gl.canvas.width !== displayWidth ||
 gl.canvas.height !== displayHeight) {

 // Make the canvas the same size
 gl.canvas.width = displayWidth;
 gl.canvas.height = displayHeight;
}

 gl.viewport(0, 0, displayWidth, displayHeight);

createdMetaballs.forEach(function(metaball){
 metaball.handleResize(displayWidth, displayHeight);
});
}

var step = function() {

createdMetaballs.forEach(function(metaball){
metaball.updateSimulation();
});
requestAnimationFrame(step);
};


Question: how can I run this same code, but without using a texture ? -
var assetsIndexToLoad = 0;
var assetsToLoad = [
 {path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-183/', src: 'noise3.png', name: 'noise3', type: 'texture'}
];
var assets = {};


I would like this whole code to use locally, but throws the error:

Access to Image at 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-183...' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://s.codepen.io' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.


Is it possible to do without the texture?
June 8th 19 at 17:17
0 answer

Find more questions by tags WebGLJavaScript