Find the (x,y) coordinates of an index value in an array

Let’s say you have an array of blocks that you want to draw to a canvas. Let’s also say you want to compute the (x,y) coordinates of a specific item in the array. There’s a formula for that:

var blockSize = 2;
var totalBlocks = (canvas.width / blockSize) * (canvas.height / blockSize);
var cursor = index % totalBlocks;
var columns = canvas.width / blockSize;
var x = (cursor % columns) * blockSize;
var y = (cursor / columns) * blockSize;

All this does is count up to the index taking into account the fact you need to wrap blocks of a certain size.

If you don’t need a specific block size and are just using single pixels as a block size, then the formula becomes even simpler:

var x = index % columns;
var y = index / columns;

That’s it~

How to show transparency on Blender texture

If you want show transparency on a blender texture and it’s not showing up when you set the view mode to “texture” then you need to do this:

Map your UVs how you would. Then set the texture alpha channel to 1.0:

Then set your z-transparency to 0.0:

Fin.

Remove Duplicates in Text File

So I have a list of names, but the names are duplicated down the page. Each name is on a new line by itself.

If I want to remove all the duplicates and just find out who is included in the file, I can simply do:

awk '!seen[$0]++' filename

This will remove duplicates and print them to your terminal.

WebStorm Encoded my HTML File as UTF-16BE

Well here’s the fix…

You have to replace the file. First get a UTF-8 output:

iconv -f UTF-16 -t UTF-8 [path/to/file]

Then delete the file. Make a new file (already UTF-8 by default) and paste in the UTF-8 output from your terminal.

Blam

Normalize/Reset Object’s Scale in Cinema4D

Quick one.

Let’s say you have an object that you’ve scaled already. You don’t want to keep having to scale it every time you copy it. You can normalize it by:

Simple Shader with ThreeJS

Ok folks, it doesn’t get easier than this. If you want to start writing shaders in the browser but can’t figure out how to create your shader program, ThreeJS has you covered:

In your JS

var camera = new THREE.Camera();
	camera.position.z = 1;

	var scene = new THREE.Scene();

	var uniforms = {
		time: { type: "f", value: 1.0 },
		resolution: { type: "v2", value: new THREE.Vector2() }
	};

	var material = new THREE.ShaderMaterial( {
		uniforms: uniforms,
		vertexShader: document.getElementById( 'vertexShader' ).innerText,
		fragmentShader: document.getElementById( 'fragmentShader' ).innerText
	});

	var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );

	scene.add( mesh );

	var canvas = document.querySelector(".lense-flare");
	var parent = canvas.parentElement;
	var renderer = new THREE.WebGLRenderer({ canvas: canvas });
	renderer.setSize( parent.clientWidth, parent.clientHeight );

	uniforms.resolution.value.x = parent.clientWidth;
	uniforms.resolution.value.y = parent.clientHeight;
	var startTime = Date.now();

	animate();

	function animate() {
		requestAnimationFrame( animate );
		render();
	}

	function render() {
		var elapsedMilliseconds = Date.now() - startTime;
		var elapsedSeconds = elapsedMilliseconds / 1000.;
		uniforms.time.value = 60. * elapsedSeconds;
		renderer.render( scene, camera );
	}

 

In your head:

<script id="vertexShader" type="x-shader/x-vertex">
			uniform float time;
			uniform vec2 resolution;
			void main()	{
				gl_Position = vec4( position, 1.0 );
			}
		</script>
		<script id="fragmentShader" type="x-shader/x-fragment">
			uniform float time;
			uniform vec2 resolution;
			void main()	{
				float x = mod(time + gl_FragCoord.x, 20.) < 10. ? 1. : 0.;
				float y = mod(time + gl_FragCoord.y, 20.) < 10. ? 1. : 0.;
				gl_FragColor = vec4(vec3(min(x, y)), 1.);
			}
		</script>