What I have:
var pointA = new THREE.Vector3(camera_RC_Holder.position.x, camera_RC_Holder.position.y, camera_RC_Holder.position.z);
var direction = camera_RC.position.clone();
direction.applyMatrix4( camera_RC.matrixWorld );
direction.normalize();
var distance = 700;
var pointB = new THREE.Vector3();
pointB.addVectors ( pointA, direction.multiplyScalar( -distance ) );
var geometry = new THREE.Geometry();
geometry.vertices.push( pointA );
geometry.vertices.push( pointB );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var line = new THREE.Line( geometry, material );
scene_Main.add( line );
https://i.sstatic.net/ZzAOy.png
What I want:
What I'm trying to achieve is a gradual visualization of a ray starting from the camera and moving through the view volume. Instead of instantly creating a line between point A and point B, I would like to animate the line pixel by pixel until it reaches its destination at point B.
Question:
How can I implement the animation to draw the lines pixel by pixel as demonstrated in the code snippet below??
var w = 200;
var h = 150;
var x;
function setup(){
createCanvas(w,h);
x=0;
y=0;
}
function draw(){
if(x>w){
x = 0;
}
background(250);
line(0,50,x,50); //x1,y1,x2,y2
x++;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>