< Back to Examples

Change Number of Instances

Open Scene in the Editor

Update the number of points created by a scatter node, which will automatically update all instances based on those points.

HTML + Javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/polygonjs-embed@1.0.7/dist/polygonjs-embed.min.js"></script>
<style>
	html, body {height:100%;margin:0px} iframe {display:block;}
	.controls-container {position:absolute;text-align:center;margin:auto;display:block;width:100%}
	input[type=range] {width:100%;padding:0px;margin:0px}
</style>
</head>

<body>

	<div class='controls-container'>
		<input type='range' min='1' max='100' step='1' oninput='change_instances_count(this)' value='16'>
	</div>

	<!-- load your scene iframe (from the editor, go to File->Embed, and toggle on 'Embed Active' to see your iframe html) -->
	<iframe frameborder='0' height='100%' width='100%' src='https://embed.polygonjs.com/scenes/35f4234f-f2a8-4207-a683-5a61039c479b?timestamp=1563359762'  id='polygonjs-embed-iframe'></iframe>

	<script>
		// create the embed, with the id of the iframe
		var embed = new POLY.Embed('polygonjs-embed-iframe')
		var scatter_node;
		embed.on('scene_load', ()=>{
			scatter_node = embed.node('/instances/scatter1')
		})
		// call pause and play methods on the embed scene object when the buttons are clicked
		function change_instances_count(slider){
			if(scatter_node){
				scatter_node.param('points_count').set(slider.value)
			} else {
				console.log('scene not yet loaded')
			}
			
		}
	</script>

</body>

</html>

< Back to Examples