Everything else in my game works except for the floor. Does anyone know why this doesn't work.
var floor = [];
var canvas = document.getElementById('bg');
var ctx = canvas.getContext('2d');
let posYFloor = 0;
for(i = 0; i < 9; i++)
{
floor[i] = new Image();
floor[i].src = "Bricks.png";
floor[i].onload=function()
{
ctx.drawImage(floor[i],i*50,posYFloor);
}
}
I managed to fix it. I realised that I didn't even need floor[i] at any point and I had a separate setInterval.
var floor = [];
var canvas = document.getElementById('bg');
var ctx = canvas.getContext('2d');
let posYFloor = 0;for(let i = 0; i < 25; i++)
{
floor = new Image();
floor.src = "Bricks.png";
floor.onload=function()
{
ctx.drawImage(floor,i*50,posYFloor);
}
}
setInterval(function() {
for(let i = 0; i < 25; i++)
{
ctx.drawImage(floor, i*50, posYFloor);
}
},1);
}
I am working on nested array. When i am trying to insert data to a div by using appendChild It is throwing an error saying Cannot read property 'appendChild' of null
My Code goes hear
<script>
var emp1 = [];
emp1["Emsno"] = 10001;
emp1["name"] = "jack";
emp1 ["sall"] = 5000;
var emp2 = [];
emp2["Emsno"] = 10002;
emp2["name"] = "Reck";
emp2 ["sall"] = 5500;
var emp3 = [];
emp3["Emsno"] = 10003;
emp3["name"] = "lama";
emp3 ["sall"] = 5300;
var emp4 = [];
emp4["Emsno"] = 10004;
emp4["name"] = "sam";
emp4 ["sall"] = 6000;
var emps = [emp1, emp2, emp3, emp4];
var Employedisplay = document.getElementById("Employedisplay");
function showEmployes(){
var n = emps.length;
for (i = 0; i < n ; i++){
var emp = emps[i];
for(var key in emp){
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
Employedisplay.appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
</script>
</head>
<body>
<input type = "button" id = "MyArray" value ="Show Emps" onclick="showEmployes()"/>
<hr>
<div id="Employedisplay"></div>
</body>
and it is working in this way
function showEmployes(){
var n = emps.length;
for (i = 0; i < n ; i++){
var emp = emps[i];
for(var key in emp){
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
document.getElementById("Employedisplay").appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
I am not understanding where i am going wrong in my first approach?
The below line of code is executed even before the browser add the #Employedisplay element in DOM.
var Employedisplay = document.getElementById("Employedisplay");
So when you click the button, Employedisplay variable is null
It's better to bootstrap your code on page load, or you can get the #Employedisplay element at the start of showEmployee method.
<script>
var emp1 = [];
emp1["Emsno"] = 10001;
emp1["name"] = "jack";
emp1["sall"] = 5000;
var emp2 = [];
emp2["Emsno"] = 10002;
emp2["name"] = "Reck";
emp2["sall"] = 5500;
var emp3 = [];
emp3["Emsno"] = 10003;
emp3["name"] = "lama";
emp3["sall"] = 5300;
var emp4 = [];
emp4["Emsno"] = 10004;
emp4["name"] = "sam";
emp4["sall"] = 6000;
var emps = [emp1, emp2, emp3, emp4];
function bootstrap() {
var Employedisplay = document.getElementById("Employedisplay");
}
function showEmployes() {
var n = emps.length;
for (i = 0; i < n; i++) {
var emp = emps[i];
for (var key in emp) {
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
Employedisplay.appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
</script>
</head>
<body onload="bootstrap();">
<input type="button" id="MyArray" value="Show Emps" onclick="showEmployes()" />
<hr>
<div id="Employedisplay"></div>
</body>
<script>
var emp1 = [];
emp1["Emsno"] = 10001;
emp1["name"] = "jack";
emp1 ["sall"] = 5000;
var emp2 = [];
emp2["Emsno"] = 10002;
emp2["name"] = "Reck";
emp2 ["sall"] = 5500;
var emp3 = [];
emp3["Emsno"] = 10003;
emp3["name"] = "lama";
emp3 ["sall"] = 5300;
var emp4 = [];
emp4["Emsno"] = 10004;
emp4["name"] = "sam";
emp4 ["sall"] = 6000;
var emps = [emp1, emp2, emp3, emp4];
function showEmployes(){
var Employedisplay = document.getElementById("Employedisplay");
var n = emps.length;
for (i = 0; i < n ; i++){
var emp = emps[i];
for(var key in emp){
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
Employedisplay.appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
</script>
</head>
<body>
<input type = "button" id = "MyArray" value ="Show Emps" onclick="showEmployes()"/>
<hr>
<div id="Employedisplay"></div>
</body>
I am trying to make clickable 3d objects with Leap Motion. I have two 3D models, IronMan helmet and a Hammer of Thor. If one of those two object is selected, then will change color. For the Iron Man will be green and for the Hammer will be white. But when I am selecting the Hammer, it changes to green instead of white. I use a cube as a pointer to select the object. Can you help?
This is the code to insert 3d models:
var colladaMeshlist = [];
model = new THREE.Object3D()
var object;
var skin;
var objectScale = 1.5;
rotX=0, rotY=0, rotZ=0;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'models/IronMan.dae', function (collada) {
object = collada.scene;
object.scale.x = object.scale.y = object.scale.z = objectScale;
object.position.x= 20;
object.position.y= -40;
object.position.z= 0;
object.rotation.x= rotX;
object.rotation.y= rotY;
object.rotation.z= rotZ;
object.name="IronMan";
colladaMeshlist.push(object);
model.add(object);
});
scene.add(model);
model2 = new THREE.Object3D()
var object2;
var skin2;
var objectScale2 = 1;
posX=0, posY=-40, posZ=0;
rotX=0, rotY=0, rotZ=0;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'models/Hammer.dae', function (collada) {
object2 = collada.scene;
object2.scale.x = object2.scale.y = object2.scale.z = objectScale2;
object2.position.x= -20;
object2.position.y= -20;
object2.position.z= posZ;
object2.rotation.x= rotX;
object2.rotation.y= rotY;
object2.rotation.z= rotZ;
object2.name="Hammer";
colladaMeshlist.push(object2);
model2.add(object2);
});
scene.add(model2);
This is the code for selecting the objects:
var originPoint = cube.position.clone();
for(var vertexIndex = 0; vertexIndex < cube.geometry.vertices.length; vertexIndex++)
{
var localVertex = cube.geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4( cube.matrix );
var directionVector = globalVertex.sub( cube.position );
var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
var collisionResults = ray.intersectObjects(colladaMeshlist, true);
if(collisionResults.length > 0 && collisionResults[0].distance < directionVector.length())
{
collisionResults[0].object.material.color.setHex(0x4CAF50);
}
else if (collisionResults.length > 0 && collisionResults[1].distance < directionVector.length())
{
collisionResults[1].object.material.color.setHex(0xffffff);
}
}
I'm a university masters degree student in Computer Graphics, I'm having difficulty using three.js to access the image data(pixels) of a texture created with a EffectComposer.
The first composer (composer) is using a line detection shader to find road lines in a lane, and put the result in a renderTarget (rt_Binary). My second composer (fcomposer2) uses a shader that paints an area green if is within a certain space.
The plan was to render the composer first and after analysing the rt_Binary image i could determine the limits.
I found some functions that allow me to get the imagedata (getImageData(image) and getPixel(imagedata, x, y)) but they only work on these occasions:
// before image
var imagedata = getImageData(videoTexture.image);
// processed image
var imagedata2 = getImageData(renderer.domElement);
If a put the first composer to render to screen, i get the correct values for the limits, but when i put the second composer, i get the wrong values for the limits.
Is there any way to get the imageData from a renderTarget? is so, how?
Edit1:
Here's the code for script that i use for the html:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Tests WebGL</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="three.js/build/three.js"></script>
<script src="js/CopyShader.js"></script>
<script src="js/EffectComposer.js"></script>
<script src="js/MaskPass.js" ></script>
<script src="js/RenderPass.js" ></script>
<script src="js/ShaderPass.js"></script>
<script src="js/stats.min.js" ></script>
<!-- Shaders -->
<script src="js/shaders/KernelShader.js" ></script>
<script src="js/shaders/SimpleShader.js"></script>
<script src="js/shaders/MyShader.js"></script>
<script src="js/shaders/BinaryShader.js"></script>
<script type="text/javascript">
var scene, fscene, sceneF;
var camera;
var renderer, rt_Binary;
var composer;
var stats;
var fmaterial;
var videoTexture;
var videoWidth = 480;
var videoHeight = 270;
var rendererWidth = videoWidth;
var rendererHeight = videoHeight;
var x_max = 345;//videoWidth*0.72; //
var x_min = 120;//videoWidth*0.25; //
var y_max = 189;//videoHeight*0.7 ;
var y_min = 148;//videoHeight*0.55;
// var ml=0.0, mr=0.0, mm=0.0;
// var bl=0.0, br=0.0, bm=0.0;
var yMaxL = 0, yMinL = 0, yMaxR = 0, yMinR = 0;
var xMaxL = 0, xMinL = 0, xMaxR = 0, xMinR = 0;
var frame = 0;
// init the scene
window.onload = function() {
renderer = new THREE.WebGLRenderer(
{
antialias: true, // to get smoother output
preserveDrawingBuffer: true // to allow screenshot
});
renderer.setClearColor(0xffffff, 1);
renderer.autoClear = false;
renderer.setSize(rendererWidth, rendererHeight);
document.getElementById('container').appendChild(renderer.domElement);
//add stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild(stats.domElement);
// create Main scene
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(35, rendererWidth / rendererHeight, 1, 10000);
camera.position.set(0, 1, 6);
scene.add(camera);
// define video element
video = document.createElement('video');
// video.src = 'GOPR0007.webm';
video.src = 'output.webm';
video.width = videoWidth;
video.height = videoHeight;
video.autoplay = true;
video.loop = true;
//create 3d object and apply video texture to it
var videoMesh = new THREE.Object3D();
scene.add(videoMesh);
videoTexture = new THREE.Texture(video);
var geom = new THREE.PlaneGeometry(1, 1);
material = new THREE.MeshBasicMaterial({map: videoTexture});
var mesh = new THREE.Mesh(geom, material);
videoMesh.add(mesh);
var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBufer: false };
rt_Binary = new THREE.WebGLRenderTarget( videoWidth, videoHeight, renderTargetParameters );
// Composers
// composer = new THREE.EffectComposer(renderer, renderTarget2);
composer = new THREE.EffectComposer(renderer, rt_Binary );
composer.addPass(new THREE.RenderPass(scene, camera));
var simple = new SimpleShader.Class(videoWidth, videoHeight);
var simEffect = new THREE.ShaderPass(simple.shader);
composer.addPass(simEffect);
var ef = new BinaryShader.Class(videoWidth, videoHeight, 1.1, [-2,-2,-2,0,0,0,2,2,2]);
var effect = new THREE.ShaderPass(ef.shader);
composer.addPass(effect);
var copyPass = new THREE.ShaderPass(THREE.CopyShader);
// copyPass.renderToScreen = true;
composer.addPass(copyPass);
//New scene
sceneF = new THREE.Scene();
sceneF.add(camera);
var videoMesh2 = new THREE.Object3D();
sceneF.add(videoMesh2);
var geomF = new THREE.PlaneGeometry(1, 1);
var materialF = new THREE.MeshBasicMaterial({map: videoTexture});
var meshF = new THREE.Mesh(geomF, materialF);
sceneF.add(meshF);
fcomposer2 = new THREE.EffectComposer(renderer );
fcomposer2.addPass(new THREE.RenderPass(sceneF, camera));
fcomposer2.addPass(simEffect);
var ef1 = new MyShader.Class(videoWidth, videoHeight, [yMaxL,yMinL,xMaxL,xMinL,yMaxR,yMinR,xMaxR,xMinR], videoTexture);
var effect1 = new THREE.ShaderPass(ef1.shader);
fcomposer2.addPass(effect1);
var copyPass2 = new THREE.ShaderPass(THREE.CopyShader);
copyPass2.renderToScreen = true;
fcomposer2.addPass(copyPass2);
animate();
}
// animation loop
function animate() {
// loop on request animation loop
// - it has to be at the begining of the function
requestAnimationFrame(animate);
// do the render
render();
stats.update();
if ((frame % 50) == 0) {
console.log("frame ", frame, " ");
console.log("yMaxL: ", yMaxL, " ");
console.log("yMinL: ", yMinL, " ");
console.log("xMaxL: ", xMaxL, " ");
console.log("xMinL: ", xMinL, " ");
console.log("yMaxR: ", yMaxR, " ");
console.log("yMinR: ", yMinR, " ");
console.log("xMaxR: ", xMaxR, " ");
console.log("xMinR: ", xMinR, " ");
manipulatePixels();
}
frame = frame + 1;
yMaxL = 0, yMinL = 0, yMaxR = 0, yMinR = 0;
xMaxL = 0, xMinL = 0, xMaxR = 0, xMinR = 0;
}
// render the scene
function render() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
videoTexture.needsUpdate = true;
}
// actually render the scene
renderer.clear();
composer.render();
var left_x = new Array();
var left_y = new Array();
var l = 0;
var right_x = new Array();
var right_y = new Array();
var r = 0;
if (frame == 200) {
var imagedata2 = getImageData(renderer.domElement);
var middle = imagedata2.width / 2;
for (var x=x_min; x < x_max; x=x+1) {
for (var y=y_min; y < y_max; y=y+1) {
var pixel = getPixel(imagedata2, x, y);
if (pixel.g > 0)
{
//console.log(pixel);
if (x < middle) {
left_x[l] = x;
left_y[l] = y;
l++;
}
else {
right_x[r] = x;
right_y[r] = y;
r++;
}
}
}
}
lineEquation(left_x, left_y, right_x, right_y);
}
fcomposer2.render();
}
function lineEquation(left_x,left_y,right_x,right_y) {
var newYMAX = left_y[0];
var newYMIN = left_y[0];
var maximosL = new Array();
var minimosL = new Array();
//left
for (var i=1; i < left_y.length; i++) {
if (left_y[i]>newYMAX) newYMAX = left_y[i];
else {
if (left_y[i]<newYMIN) newYMIN = left_y[i];
}
}
yMaxL = newYMAX;
yMinL = newYMIN;
// yMaxL = ymaxL/videoHeight;
// yMinL = yminL/videoHeight;
var pmin=0, pmax=0;
for (var i=0; i < left_y.length; i++) {
if (left_y[i] === newYMAX) {
// console.log(left_y[i]);
// console.log(left_x[i]);
maximosL[pmax] = left_x[i];
pmax++;
}
}
for (var j=0; j < left_y.length; j++) {
if (left_y[j] === newYMIN) {
// console.log(left_y[j]);
// console.log(left_x[j]);
minimosL[pmin] = left_x[j];
pmin++;
}
}
// console.log(maximosL);
// console.log(minimosL);
var sumMAX = 0, sumMIN = 0;
for (var i=0; i< maximosL.length; i++) {
sumMAX = sumMAX + maximosL[i];
}
for (var j=0; j< minimosL.length; j++) {
sumMIN = sumMIN + minimosL[j];
}
xMaxL = sumMAX/maximosL.length;
xMinL = sumMIN/minimosL.length;
// xMaxL /= videoWidth;
// xMinL /= videoWidth;
//right
var maximosR = new Array();
var minimosR = new Array();
newYMAX = right_y[0];
newYMIN = right_y[0];
pmin=0; pmax=0;
for (var i=0; i < right_y.length; i++) {
if (right_y[i]> newYMAX) newYMAX = right_y[i];
else {
if (right_y[i]< newYMIN) newYMIN = right_y[i];
}
}
yMaxR = newYMAX;
yMinR = newYMIN;
// yMaxR = ymaxR/videoHeight;
// yMinR = yminR/videoHeight;
for (var i=0; i < right_y.length; i++) {
if (right_y[i] === newYMAX)
{maximosR[pmax] = right_x[i]; pmax++;}
if (right_y[i] === newYMIN)
{minimosR[pmin] = right_x[i]; pmin++;}
}
// console.log(maximosR);
// console.log(minimosR);
xMaxR=0;
for (var i=0; i< maximosR.length; i++) {
xMaxR += maximosR[i];
}
xMinR=0;
for (var i=0; i< minimosR.length; i++) {
xMinR += minimosR[i];
}
// console.log(xMaxR);
// console.log(xMinR);
xMaxR /= maximosR.length;
xMinR /= minimosR.length;
// console.log(xMaxR);
// console.log(xMinR);
// xMinR /= videoWidth;
// xMaxR /= videoWidth;
}
function manipulatePixels() {
// imagem antes
var imagedata = getImageData(videoTexture.image);
// imagem processada
var imagedata2 = getImageData(renderer.domElement);
// console.log(getPixel(imagedata, 480 - 1, 270 - 1));
// console.log(getPixel(imagedata2, 480 - 1, 270 - 1));
}
function getImageData(image) {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
return context.getImageData(0, 0, image.width, image.height);
}
function getPixel(imagedata, x, y) {
var position = (x + imagedata.width * y) * 4, data = imagedata.data;
return {r: data[ position ], g: data[ position + 1 ], b: data[ position + 2 ], a: data[ position + 3 ]};
}
function findLineByLeastSquares(values_x, values_y) {
var sum_x = 0;
var sum_y = 0;
var sum_xy = 0;
var sum_xx = 0;
/*
* We'll use those variables for faster read/write access.
*/
var x = 0;
var y = 0;
var values_length = values_x.length;
if (values_length != values_y.length) {
throw new Error('The parameters values_x and values_y need to have same size!');
}
/*
* Nothing to do.
*/
if (values_length === 0) {
return [ [], [] ];
}
/*
* Calculate the sum for each of the parts necessary.
*/
for (var v = 0; v < values_length; v++) {
x = values_x[v];
y = values_y[v];
sum_x += x;
sum_y += y;
sum_xx += (x*x);
sum_xy += (x*y);
}
console.log (sum_x);
console.log(sum_y);
console.log(sum_xx);
console.log(sum_xy);
console.log(values_length);
/*
* Calculate m and b for the formular:
* y = x * m + b
*/
var m = (sum_x*sum_y - values_length*sum_xy) / (sum_x*sum_x - values_length*sum_xx);
var b = (sum_y - (m*sum_x))/values_length;
//console.log([m,b]);
return [m, b];
}
//resize method
/**window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
} */
</script>
Edit2 : Some images of what i'm trying to do: Image 1 shows the results from composer on the console, the limits i get from the lineEquation function are the correct ones for what i intend to do, but in Image 2 shows the results from fcomposer2 (fixed area) and on the console, the limits are the wrong ones.
![Image1]: http://prntscr.com/1ays73
![Image2]: http://prntscr.com/1ays0j
Edit3 :
By "access" i mean to be able to read the values of the pixels from the texture created by the binaryShader.
For example, in image1 the lines are painted in blue/green tone, I wanted to search the position of the pixels (x,y) in the image that the renderTarget would save. If i could find those pixels, i could adapt the green area in image2 to fit between the road lines.
This processing is need to make the green area overlap the current driving lane the user is currently on, if i can't get those points, i can't identify a lane.
I got it to work. Apparently i forgot to declare the fcomposer2 in the beginning of the script.
Thanks for the responses/comments, and sorry for the inconvenience.
I'm trying to draw closed path and fill it with some collor. Here the code
startRulerUnits = app.preferences.rulerUnits
startTypeUnits = app.preferences.typeUnits
startDisplayDialogs = app.displayDialogs
//change settings
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
app.displayDialogs = DialogModes.NO
var AD = activeDocument;
var bBox = new Array();
bBox[0] = 10;
bBox[1] = 10;
bBox[2] = 50;
bBox[3] = 10;
bBox[4] = 50;
bBox[5] = 50;
bBox[6] = 10;
bBox[7] = 50;
var line = new Array();
line[0] = new PathPointInfo;
line[0].kind = PointKind.CORNERPOINT;
line[0].anchor = [bBox[0],bBox[1]];
line[0].leftDirection = line[0].anchor;
line[0].rightDirection = line[0].anchor;
line[1] = new PathPointInfo;
line[1].kind = PointKind.CORNERPOINT;
line[1].anchor = [bBox[2],bBox[3]];
line[1].leftDirection = line[1].anchor;
line[1].rightDirection = line[1].anchor;
line[2] = new PathPointInfo;
line[2].kind = PointKind.CORNERPOINT;
line[2].anchor = [bBox[4],bBox[5]];
line[2].leftDirection = line[2].anchor;
line[2].rightDirection = line[2].anchor;
line[3] = new PathPointInfo;
line[3].kind = PointKind.CORNERPOINT;
line[3].anchor = [bBox[6],bBox[7]];
line[3].leftDirection = line[3].anchor;
line[3].rightDirection = line[3].anchor;
var lineSubPath= new Array();
lineSubPath[0] = new SubPathInfo();
lineSubPath[0].operation = ShapeOperation.SHAPEXOR;
lineSubPath[0].closed = true;
lineSubPath[0].entireSubPath = line;
var path = AD.pathItems.add("A", lineSubPath);
//var paperShape = AD.artLayers.add();
var colorRef = new SolidColor;
colorRef.rgb.red = 255
colorRef.rgb.green = 100;
colorRef.rgb.blue = 10;
path.fillPath(colorRef, ColorBlendMode.COLOR,100,true,0,true,true);
//shapeLayer.applyStyle("ransom_note");*/
app.preferences.rulerunits = startRulerUnits
app.preferences.typeunits = startTypeUnits
app.displayDialogs = startDisplayDialogs
path is drawn, but error apears while filling
fillPath is not a function.
Can anybody help?
P.S. Sorry for my English
path is a property of Application, Photoshop does not understand when you try to apply fillPath to it, even if you had declared it as a variable name... you just gets Photoshop confused on what to do.
You should simply change that's variable name to something like myPath and then myPath.fillPath(colorRef, ColorBlendMode.COLOR,100,true,0,true,true); will work.
I would also make a little change in the ColorBlendMode, if you set it to COLOR you won't be able to actually see the color you are applying, and it will seem that the script is not working at all.
Try myPath.fillPath(colorRef, ColorBlendMode.NORMAL,100,true,0,true,true); and you're done!