How to create random array from perlin noise

Questions
, ,
1

Hello,

I have been using the CodePen https://codepen.io/vcomics/pen/RwQgXzv to make a perlin noise shape.

I have chosen some parameters that created two different looking perlin noise shapes. What I would like to do is make it so that every time someone loads the home page with the threejs on it , you get one or the other shapes. I want an array because I may make more shapes and will want to add them to the choices. My problem is I don’t know how to code a random array with these parameters. Anyone know how???

Here’s the parameters I have made.

        shader: {
	time: 1.00,
	u_noise: 0.74,
	decay: 0.46,
	turb: 0.10,
	scale: 5.0,
	waves: 10.00,
	size: 1.0,
	displ: 0.0,
	broken: true,
	invert: true,
           Color: 0,
	complex: 0.1,


        shader: {time: 0.12,
	u_noise: 1.00,
	decay: 1.00,
	turb: 0.23,
	scale: 3.78,
	waves: 2.20,
	size: 1.0,
	displ: 0.0,
	broken: true,
	invert: true,
            color: 0,
	complex: 0.1,
2

Hey also here is my full javascript if this helps. Just looking to make one set of parameters play at random.

const config = {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
		time: 0.12,
		u_noise: 1.00,
		decay: 1.00,
		turb: 0.23,
		scale: 3.78,
		waves: 2.20,
		size: 1.0,
		displ: 0.0,
		broken: true,
		invert: true,
		complex: 0.1,
	}
};

const uniforms = {
	turb: {
		type: "f",
		value: 0.0
	},
	time: {
		type: "f",
		value: 0.0
	},
	u_noise: {
		type: "f",
		value: 0.0
	},
	decay: {
		type: "f",
		value: 0.0
	},
	complex: {
		type: "f",
		value: 0.0
	},
	waves: {
		type: "f",
		value: 0.0
	},
	eqcolor: {
		type: "f",
		value: 0.0
	},
	pointscale: {
		type: "f",
		value: 0.0
	},
	scale: {
		type: "f",
		value: 0.0
	},
	displ: {
		type: "f",
		value: 0.0
	},
	fragment: {
		type: "i",
		value: true
	},
	redhell: {
		type: "i",
		value: true
	}
};



class Control {
	constructor(props) {
		this.controls = new OrbitControls(props.camera, props.canvas);
		this.init();
	}
	init() {
		this.controls.target.set(0, 0, 0);
		this.controls.rotateSpeed = 1;
		this.controls.enableZoom = true;
    this.controls.minDistance = 1;
    this.controls.maxDistance = 7;
		this.controls.enableDamping = true;
		
		this.update();
	}
	update() {
		this.controls.update();
	}
}

class Particles {
	constructor(props) {
		this.scene = props.scene ? props.scene : null;
		this.clock = new THREE.Clock();
		this.init();
	}
	init() {
		this.p_grp = new THREE.Object3D();
		this.p_mat = new THREE.ShaderMaterial({
			uniforms: uniforms,
			vertexShader: document.getElementById("vertexShader").textContent,
			fragmentShader: document.getElementById("fragmentShader").textContent
		});
		this.p_geo = new THREE.IcosahedronBufferGeometry(0.5, 80);
		this.p_mes = new THREE.Points(this.p_geo, this.p_mat);
		this.scene.add(this.p_mes);
	}
	render() {
		this.p_mat.uniforms["time"].value =
			this.clock.getElapsedTime() * config.shader.time;
		this.p_mat.uniforms["turb"].value = config.shader.turb;
		this.p_mat.uniforms["u_noise"].value = config.shader.u_noise * 0.1;
		this.p_mat.uniforms["decay"].value = config.shader.decay * 0.01;
		this.p_mat.uniforms["complex"].value = config.shader.complex;
		this.p_mat.uniforms["waves"].value = config.shader.waves * 3;
		this.p_mat.uniforms["pointscale"].value = config.shader.size;
		this.p_mat.uniforms["eqcolor"].value = config.shader.color;
		this.p_mat.uniforms["fragment"].value = config.shader.broken;
		this.p_mat.uniforms["scale"].value = config.shader.scale;
		this.p_mat.uniforms["displ"].value = config.shader.displ * 0.01;
		this.p_mat.uniforms["redhell"].value = config.shader.invert;
	}
}

class Space {
	constructor(props) {
		this.name = props.name ? props.name : "Null";
		this.canvas = props.canvas ? props.canvas : null;
		this.main();
	}
	main() {
		this.renderer = new THREE.WebGLRenderer({
			canvas: this.canvas,
			antialias: true,
			alpha: true
		});
		this.clock = new THREE.Clock();
		this.scene = new THREE.Scene();
		this.camera = new THREE.PerspectiveCamera(45);
		this.camera.position.set(0, 0.5, 3);
		this.control = new Control({ camera: this.camera, canvas: this.canvas });
		//--
		this.axesHelper = new THREE.AxesHelper(2);
		this.axesHelper.position.y = -1.5;
		//this.scene.add(this.axesHelper);
		this.renderer.shadowMap.enabled = true;
		this.renderer.shadowMap.type = THREE.PCFShoftSHadowMap;
		this.init();
	}
	init() {
		const scene = this.scene;
		this.particle = new Particles({ scene });
		//--
		this.render();
		this.loop();
		this.resize();
	}
resize() {
		this.camera.aspect = window.innerWidth / window.innerHeight;
		this.camera.updateProjectionMatrix();
		this.renderer.setSize(window.innerWidth, window.innerHeight);

}

	render() {
		this.scene.rotation.y = this.clock.getElapsedTime() * config.scene.speed;
		this.camera.lookAt(this.scene.position);
		this.camera.updateMatrixWorld();
		this.renderer.render(this.scene, this.camera);
		this.control.update();
		this.particle.render();
	}
	loop() {
		this.render();
		requestAnimationFrame(this.loop.bind(this));
	}
}

const canvas = document.querySelector("canvas");
const world = new Space({ canvas });
const panel = new Panel();
window.addEventListener("resize", () => world.resize());
window.addEventListener("load", () => world.resize());


</script>
3

I have written this out. I know it doesn’t work but am I at least in the ball park? really struggling with this and can’t find any info on how to do this anywhere.

shader: {
		$(document).ready(function(){
  var array1 = ["time: 1.00”, “u_noise: 0.74”, “decay: 0.46”, “turb: 0.10”, “scale: 5.0”, “waves: 10.00”, “size: 1.0”, “displ: 0.0”, “broken: true”, “invert: true”, “Color: 0”, “complex: 0.1”];
	
var array2 = ["time: 0.12”, “u_noise: 1.00”, “decay: 1.00”, “turb: 0.23”, “scale: 3.78”, “waves: 2.20”, “size: 1.0”, “displ: 0.0”, “broken: true”, “invert: true”, “Color: 0”, “complex: 0.1”];
	
  const rndInt = Math.floor(Math.random() * array1 + (Math.random() * array2);
  $('canvas').each(function(){
      if($(this).index() == rndInt){
          $(this).show();
      } else {
          $(this).hide();
      }
  })
})
4

I’m not sure you have already tried this but you essentially only need a random index. So maybe you can do just this:

const index = THREE.MathUtils.randInt( 0, array.length - 1 );
const shader = array[ index ];

The array variable holds the configuration objects for the shader.

5

Thank you so much for your response! I have figured out how to do what I was looking for. I had to make a few full presets as well as add a math.floor. Ill paste what I did below to help anyone else out hopefully in the future…

let config =  {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
    time: 0.12,
		u_noise: 1.00,
		decay: 1.00,
		turb: 0.23,
		scale: 3.78,
		waves: 2.80,
		size: 1.0,
		displ: 0.0,
		broken: true,
		invert: true,
    color: 0,
		complex: 0.1,
	}
};
let mypreset = {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
		time: 0.18,
		u_noise: 0.74,
		decay: 0.46,
		turb: 0.10,
		scale: 5.0,
		waves: 10.00,
		size: 1.0,
		displ: 0.0,
		broken: true,
		invert: true,
    color: 0,
		complex: 0.1,
	}
};

let mypreset1 = {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
		time: 1.00,
    u_noise: 1.00,
		decay: 0.01,
		turb: 1.0000000000,
		scale: 0.85,
		waves: 1.10,
		size: 1.0,
		displ: 0.0,
		broken: false,
		invert: true,
		color: 0,
		complex: 0.1,
	}
};



let mypreset2 = {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
		time: 0.1593275864,
		u_noise: 0.6318065549,
		decay: 0.3257915843,
		turb: 0.1324508329,
		scale: 5.0,
		waves: 5.7695137162,
		size: 1.0,
		displ: 0.0,
		broken: true,
		invert: true,
    color: 0,
		complex: 0.10,
	}
};

let mypreset3 = {
	scene: {
		speed: 0.24,
		position: 3
	},
	object: {
		speed: 0.25
	},
	shader: {
		time: 0.5480434783,
		u_noise: -0.4183984847,
		decay: 0.6664130435,
		turb: 0.98,
		scale: 5.0,
		waves: 5.33,
		size: 1.0,
		displ: 0.0,
		broken: true,
		invert: true,
    color: 0,
		complex: 0.1,
	}
};
const canvas = document.querySelector("canvas");
const world = new Space({ canvas });
window.addEventListener("resize", () => world.resize());
let decaybackup = 0;
window.addEventListener("load", () => {
	let num = 			Math.floor(Math.random()*10)
        num = num%5
	if(num===1){
		config = mypreset;
	}else if(num===2){
		config = mypreset1;
	}else if(num===3){
		config = mypreset2;
	}else if(num===4){
		config = mypreset3;
	}