Webster Art

I’m taking online classes in Javascript for a few months while I’m between contracts. I learned how to animate a cube in 3 dimensions today. It uses a library called three.js. As with Jquery libraries, we plug them in (three.js) to make things easier.

I wrote these 50 lines of code that makes it work. It’s a fun lesson, but the full credit needs to go developer.mozilla.org. A lot of that stuff makes no sense to me. I gotta be honest…some of these lessons are so far above my head I wonder sometimes if I’m totally wasting my time learning this stuff. I mean these people are geniuses, probably with masters degrees in computer science. I can write their code and make the lesson work…but full understanding would only come with doing it full time.

var scene = new THREE.Scene();

/*1. field of view in degree; 2. aspect ratio; 3. Minimum render distance; 4. Max render distance
*/
//takes 4 arguments                       1                     2                     3     4
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

/*set the camera's position to be 5 distance
 units out of the Z axis, which, like in CSS,
 is out of the screen towards you, the viewer.*/
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();//creates a <canvas>
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);//appends <canvas>

var cube;
var loader = new THREE.TextureLoader();

loader.load(
  'metal003.png',
  function (texture) {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(2,2);

    var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);
    var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    draw();
  }//end function (texture)
);//end loader.load

var light = new THREE.AmbientLight('rgb(255, 255, 255)');//soft white
scene.add(light);

var spotLight = new THREE.SpotLight('rgb(255, 255, 255)');
spotLight.position.set( 100, 1000, 1000 );
spotLight.castShadow = true;
scene.add(spotLight);

function draw(){
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(draw);//self loop at 60fps call
}

In other news, I removed my woocomerce store and shopping cart. I had zero sales from it, and it was always worrisome that I would have a purchase while I wasn’t paying attention…which could lead to an unhappy customer. I’m thinking I might try etsy at some point as some artists are selling there.

Selling my paintings is very low on my priority list right now. I think of myself as being in college full-time. I’m hitting the books every weekday, 9 to 5. The only unusual thing is that I’m not enrolled anywhere. I’m doing self study. This stuff is all free online…no need to pay a teacher. Hmmm, that might be a contributing factor to why I’m not working this quarter as a teacher. Go figure.