AdmiralPotato/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    #ROBOT ARM

IT IS THE FUTURE. THE DISTANT FUTURE.
I have no idea what I'm doing here. This was a sketch that I made years and years ago, but I thought I would use it as a text for bl.ocks.org because it looks dope af to me right now.

  
## index.html
<!doctype html>
<html>
<head>
	<title>ROBOT ARM</title>
</head>
<body>
	<script src="https://admiralpotato.github.io/js/npos3d/build/npos3d.js"></script>
	<script>
		var n = NPos3d;
		var scene = new n.Scene();
		var segmentDisplay = new n.Ob3D({
			shape: {
				points: [
					[-200,-100,0],
					[-200,100,0],
					[-100,-100,0],
					[-100,100,0],
					[0,-100,0],
					[0,100,0],
					[100,-100,0],
					[100,100,0],
					[200,-100,0],
					[200,100,0],
				],
				lines: [
					[0,1],
					[2,3],
					[4,5],
					[6,7],
					[8,9],
				]
			}
		});
		var myOb = new n.Ob3D();
		var upperArm = new n.VText({
			textAlign: 'left',
			string: 'upperArm',
			rot: [0,0,deg * -90],
			pos: [0,200,0]
		});
		var foreArm = new n.VText({
			textAlign: 'left',
			string: 'foreArm',
			rot: [0,0,deg * 90],
			pos: [208,0,0]
		});
		var wrist = new n.VText({
			string: 'wrist',
			rot: [0,0,deg * 90],
			pos: [192,0,0]
		});
		var index = new n.VText({
			textAlign: 'left',
			string: 'index',
			rot: [0,0,deg * -90],
			pos: [-64,-8,0]
		});
		var thumb = new n.VText({
			textAlign: 'left',
			string: 'thumb',
			rot: [0,0,deg * -90],
			pos: [64,-8,0]
		});
		scene.add(segmentDisplay);
		scene.add(myOb);
		scene.add(upperArm);
		upperArm.add(foreArm);
		foreArm.add(wrist);
		wrist.add(index);
		wrist.add(thumb);

		var keyList = [];
		keyList[32] = 'space';
		keyList[38] = 'up';
		keyList[40] = 'down';
		keyList[37] = 'left';
		keyList[39] = 'right';
		keyList[49] = 'one';
		keyList[50] = 'two';
		keyList[51] = 'three';
		keyList[52] = 'four';
		keyList[87] = 'w';
		keyList[83] = 's';
		keyList[65] = 'a';
		keyList[68] = 'd';
		keyList[70] = 'f';
		var kb = {};
		var setKey = function (e){
			//console.log(e.keyCode);
			if(e.type == 'keyup'){val = false;}
			else{val = true;}
			if(keyList[e.keyCode]){
				kb[keyList[e.keyCode]] = val;
			}
		}
		window.addEventListener('keydown', setKey, false);
		window.addEventListener('keyup', setKey, false);

		var deg90 = deg * 90;
		var lastX = 0;
		var lastY = 0;
		var sceneControl = {
			update: function() {
				var x = scene.mpos.x - lastX,
					y = scene.mpos.y - lastY;
				lastX = scene.mpos.x;
				lastY = scene.mpos.y;
				myOb.pos[0] = x;
				myOb.pos[1] = y;

				if(kb.a){
					upperArm.rot[1] += deg * 0.5 * y;
				}
				else if(kb.s){
					foreArm.rot[2] += deg * 0.5 * y;
				}
				else if(kb.d){
					wrist.rot[0] += deg * 0.5 * y;
				}
				else if(kb.f){
					index.rot[2] += deg * 0.5 * y;
					thumb.rot[2] += -deg * 0.5 * y;
				}

				myOb.pos[0] = scene.mpos.x;
				myOb.pos[1] = scene.mpos.y;
				myOb.color = 'hsl(' + Math.round(myOb.rot[1] / deg) + ', 100%, 50%)';
			}
		};
		scene.add(sceneControl);
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>ROBOT ARM</title>
	</head>
	<body>
	<script src="https://admiralpotato.github.io/js/npos3d/build/npos3d.js"></script>
	<script>
	var n = NPos3d;
	var scene = new n.Scene();
	var segmentDisplay = new n.Ob3D({
	shape: {
	points: [
	[-200,-100,0],
	[-200,100,0],
	[-100,-100,0],
	[-100,100,0],
	[0,-100,0],
	[0,100,0],
	[100,-100,0],
	[100,100,0],
	[200,-100,0],
	[200,100,0],
	],
	lines: [
	[0,1],
	[2,3],
	[4,5],
	[6,7],
	[8,9],
	]
	}
	});
	var myOb = new n.Ob3D();
	var upperArm = new n.VText({
	textAlign: 'left',
	string: 'upperArm',
	rot: [0,0,deg * -90],
	pos: [0,200,0]
	});
	var foreArm = new n.VText({
	textAlign: 'left',
	string: 'foreArm',
	rot: [0,0,deg * 90],
	pos: [208,0,0]
	});
	var wrist = new n.VText({
	string: 'wrist',
	rot: [0,0,deg * 90],
	pos: [192,0,0]
	});
	var index = new n.VText({
	textAlign: 'left',
	string: 'index',
	rot: [0,0,deg * -90],
	pos: [-64,-8,0]
	});
	var thumb = new n.VText({
	textAlign: 'left',
	string: 'thumb',
	rot: [0,0,deg * -90],
	pos: [64,-8,0]
	});
	scene.add(segmentDisplay);
	scene.add(myOb);
	scene.add(upperArm);
	upperArm.add(foreArm);
	foreArm.add(wrist);
	wrist.add(index);
	wrist.add(thumb);

	var keyList = [];
	keyList[32] = 'space';
	keyList[38] = 'up';
	keyList[40] = 'down';
	keyList[37] = 'left';
	keyList[39] = 'right';
	keyList[49] = 'one';
	keyList[50] = 'two';
	keyList[51] = 'three';
	keyList[52] = 'four';
	keyList[87] = 'w';
	keyList[83] = 's';
	keyList[65] = 'a';
	keyList[68] = 'd';
	keyList[70] = 'f';
	var kb = {};
	var setKey = function (e){
	//console.log(e.keyCode);
	if(e.type == 'keyup'){val = false;}
	else{val = true;}
	if(keyList[e.keyCode]){
	kb[keyList[e.keyCode]] = val;
	}
	}
	window.addEventListener('keydown', setKey, false);
	window.addEventListener('keyup', setKey, false);

	var deg90 = deg * 90;
	var lastX = 0;
	var lastY = 0;
	var sceneControl = {
	update: function() {
	var x = scene.mpos.x - lastX,
	y = scene.mpos.y - lastY;
	lastX = scene.mpos.x;
	lastY = scene.mpos.y;
	myOb.pos[0] = x;
	myOb.pos[1] = y;

	if(kb.a){
	upperArm.rot[1] += deg * 0.5 * y;
	}
	else if(kb.s){
	foreArm.rot[2] += deg * 0.5 * y;
	}
	else if(kb.d){
	wrist.rot[0] += deg * 0.5 * y;
	}
	else if(kb.f){
	index.rot[2] += deg * 0.5 * y;
	thumb.rot[2] += -deg * 0.5 * y;
	}

	myOb.pos[0] = scene.mpos.x;
	myOb.pos[1] = scene.mpos.y;
	myOb.color = 'hsl(' + Math.round(myOb.rot[1] / deg) + ', 100%, 50%)';
	}
	};
	scene.add(sceneControl);
	</script>
	</body>
	</html>