Related
I'm trying to get a beveled cube, but I can't seem to figure out how. I've found THREE.ExtrudeGeometry here, but if you notice, in the sample editor it only has beveled sides on the top and bottom faces, so I'm getting something like this:
Instead of something like this, which is what I'm going for:
Code:
var bevelShape = new THREE.Shape();
bevelShape.moveTo(0, unitSize - 0.2);
bevelShape.lineTo(0, unitSize - 0.2);
bevelShape.lineTo(unitSize - 0.2, unitSize - 0.2);
bevelShape.lineTo(unitSize - 0.2, 0);
bevelShape.lineTo(0, 0);
var extrudeSettings = {
steps: 20,
depth: unitSize - 0.2,
bevelEnabled: true,
bevelThickness: 0.1,
bevelSize: 0.1,
bevelOffset: 0,
bevelSegments: 1
};
var blockGeometry = new THREE.ExtrudeGeometry(bevelShape, extrudeSettings);
var blockMaterial = new THREE.MeshStandardMaterial({color: color, roughness: 1, metalness: -1});
var block = new THREE.Mesh(blockGeometry, blockMaterial);
scene.add(block);
What should I do to achieve this?
Thanks!
You can build your own geometry.
Or feel free to search the forum, as you can find many useful and intersting things there.
For example: https://discourse.threejs.org/t/faceted-box-geometry/5474
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.set(15, 10, 20).setLength(130);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x404040);
//renderer.setPixelRatio(0.5);
var canvas = renderer.domElement;
document.body.appendChild(canvas);
var controls = new THREE.OrbitControls(camera, canvas);
var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(1, 2, 1);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
for (let i = 0; i < 11; i++) {
let r = 10;
let posX = (-5 + i) * 12.5;
let wireGeom = facetedBox(r, r, r, i * 0.5, true);
let wire = new THREE.LineSegments(
wireGeom,
new THREE.LineBasicMaterial({ color: Math.random() * 0x808080 + 0x808080 })
);
wire.position.x = posX;
scene.add(wire);
let geom = facetedBox(r, r, r, i * 0.5, false);
let mesh = new THREE.Mesh(
geom,
new THREE.MeshStandardMaterial({
color: Math.random() * 0x808080 + 0x808080,
flatShading: true
})
);
mesh.position.x = posX;
scene.add(mesh);
}
var clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
if (resize(renderer)) {
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
});
function resize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
display; block;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
function facetedBox(w, h, d, f, isWireframed){
let hw = w * 0.5, hh = h * 0.5, hd = d * 0.5;
let vertices = [
// px
hw, hh - f, -hd + f, // 0
hw, -hh + f, -hd + f, // 1
hw, -hh + f, hd - f, // 2
hw, hh - f, hd - f, // 3
// pz
hw - f, hh - f, hd, // 4
hw - f, -hh + f, hd, // 5
-hw + f, -hh + f, hd, // 6
-hw + f, hh - f, hd, // 7
// nx
-hw, hh - f, hd - f, // 8
-hw, -hh + f, hd - f, // 9
-hw, -hh + f, -hd + f, // 10
-hw, hh - f, -hd + f, // 11
// nz
-hw + f, hh - f, -hd, // 12
-hw + f, -hh + f, -hd, // 13
hw - f, -hh + f, -hd, // 14
hw - f, hh - f, -hd, // 15
// py
hw - f, hh, -hd + f, // 16
hw - f, hh, hd - f, // 17
-hw + f, hh, hd - f, // 18
-hw + f, hh, -hd + f, // 19
// ny
hw - f, -hh, -hd + f, // 20
hw - f, -hh, hd - f, // 21
-hw + f, -hh, hd - f, // 22
-hw + f, -hh, -hd + f // 23
];
let indices = [
0, 2, 1, 3, 2, 0,
4, 6, 5, 7, 6, 4,
8, 10, 9, 11, 10, 8,
12, 14, 13, 15, 14, 12,
16, 18, 17, 19, 18, 16,
20, 21, 22, 23, 20, 22,
// link the sides
3, 5, 2, 4, 5, 3,
7, 9, 6, 8, 9, 7,
11, 13, 10, 12, 13, 11,
15, 1, 14, 0, 1, 15,
// link the lids
// top
16, 3, 0, 17, 3, 16,
17, 7, 4, 18, 7, 17,
18, 11, 8, 19, 11, 18,
19, 15, 12, 16, 15, 19,
// bottom
1, 21, 20, 2, 21, 1,
5, 22, 21, 6, 22, 5,
9, 23, 22, 10, 23, 9,
13, 20, 23, 14, 20, 13,
// corners
// top
3, 17, 4,
7, 18, 8,
11, 19, 12,
15, 16, 0,
// bottom
2, 5, 21,
6, 9, 22,
10, 13, 23,
14, 1, 20
];
let indicesWire = [
0, 1, 1, 2, 2, 3, 3, 0,
4, 5, 5, 6, 6, 7, 7, 4,
8, 9, 9, 10, 10, 11, 11, 8,
12, 13, 13, 14, 14, 15, 15, 12,
16, 17, 17, 18, 18, 19, 19, 16,
20, 21, 21, 22, 22, 23, 23, 20,
// link the sides
2, 5, 3, 4, //px - pz
6, 9, 7, 8, // pz - nx
10, 13, 11, 12, // nx - nz
15, 0, 14, 1, // nz - px
// link the lids
// top
16, 0, 17, 3, // px
17, 4, 18, 7, // pz
18, 8, 19, 11, // nx
19, 12, 16, 15, // nz
// bottom
20, 1, 21, 2,
21, 5, 22, 6,
22, 9, 23, 10,
23, 13, 20, 14
];
let geom = new THREE.BufferGeometry();
geom.setAttribute("position", new THREE.BufferAttribute(new Float32Array(vertices), 3));
geom.setIndex(isWireframed ? indicesWire : indices);
if (!isWireframed) geom.computeVertexNormals();
return geom;
}
</script>
Ok, so I'm using the script from this CodePen:
var smokemachine = function(context, color) {
color = color || [245, 46.8, 48.2]
var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var lastframe;
var currentparticles = []
var pendingparticles = []
var buffer = document.createElement('canvas'),
bctx = buffer.getContext('2d')
buffer.width = 20
buffer.height = 20
var opacities = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 5, 7, 4, 4, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 17, 27, 41, 52, 56, 34, 23, 15, 11, 4, 9, 5, 1, 0, 0, 0, 0, 0, 0, 1, 45, 63, 57, 45, 78, 66, 52, 41, 34, 37, 23, 20, 0, 1, 0, 0, 0, 0, 1, 43, 62, 66, 64, 67, 115, 112, 114, 56, 58, 47, 33, 18, 12, 10, 0, 0, 0, 0, 39, 50, 63, 76, 87, 107, 105, 112, 128, 104, 69, 64, 29, 18, 21, 15, 0, 0, 0, 7, 42, 52, 85, 91, 103, 126, 153, 128, 124, 82, 57, 52, 52, 24, 1, 0, 0, 0, 2, 17, 41, 67, 84, 100, 122, 136, 159, 127, 78, 69, 60, 50, 47, 25, 7, 1, 0, 0, 0, 34, 33, 66, 82, 113, 138, 149, 168, 175, 82, 142, 133, 70, 62, 41, 25, 6, 0, 0, 0, 18, 39, 55, 113, 111, 137, 141, 139, 141, 128, 102, 130, 90, 96, 65, 37, 0, 0, 0, 2, 15, 27, 71, 104, 129, 129, 158, 140, 154, 146, 150, 131, 92, 100, 67, 26, 3, 0, 0, 0, 0, 46, 73, 104, 124, 145, 135, 122, 107, 120, 122, 101, 98, 96, 35, 38, 7, 2, 0, 0, 0, 50, 58, 91, 124, 127, 139, 118, 121, 177, 156, 88, 90, 88, 28, 43, 3, 0, 0, 0, 0, 30, 62, 68, 91, 83, 117, 89, 139, 139, 99, 105, 77, 32, 1, 1, 0, 0, 0, 0, 0, 16, 21, 8, 45, 101, 125, 118, 87, 110, 86, 64, 39, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 28, 79, 79, 117, 122, 88, 84, 54, 46, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 6, 55, 61, 68, 71, 30, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 23, 25, 20, 12, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 12, 9, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0]
var data = bctx.createImageData(20, 20)
var d = data.data
for (var i = 0; i < d.length; i += 4) {
d[i] = color[0]
d[i + 1] = color[1]
d[i + 2] = color[2]
d[i + 3] = opacities[i / 4]
}
bctx.putImageData(data, 0, 0)
var imagewidth = 20 * 5
var imageheight = 20 * 5
function particle(x, y, l) {
this.x = x
this.y = y
this.age = 0
this.vx = (Math.random() * 8 - 4) / 100
this.startvy = -(Math.random() * 30 + 10) / 100
this.vy = this.startvy
this.scale = Math.random() * .5
this.lifetime = Math.random() * l + l / 2
this.finalscale = 5 + this.scale + Math.random()
this.update = function(deltatime) {
this.x += this.vx * deltatime
this.y += this.vy * deltatime
var frac = Math.pow((this.age) / this.lifetime, .5)
this.vy = (1 - frac) * this.startvy
this.age += deltatime
this.scale = frac * this.finalscale
}
this.draw = function() {
context.globalAlpha = (1 - Math.abs(1 - 2 * (this.age) / this.lifetime)) / 8
var off = this.scale * imagewidth / 2
var xmin = this.x - off
var xmax = xmin + this.scale * imageheight
var ymin = this.y - off
var ymax = ymin + this.scale * imageheight
context.drawImage(buffer, xmin, ymin, xmax - xmin, ymax - ymin)
}
}
function addparticles(x, y, n, lifetime) {
lifetime = lifetime || 4000
n = n || 10
if (n < 1) return Math.random() <= n && pendingparticles.push(new particle(x, y, lifetime));
for (var i = 0; i < n; i++) {
pendingparticles.push(new particle(x, y, lifetime))
};
}
function updateanddrawparticles(deltatime) {
context.clearRect(0, 0, canvas.width, canvas.height);
deltatime = deltatime || 16
var newparticles = []
currentparticles = currentparticles.concat(pendingparticles)
pendingparticles = []
currentparticles.forEach(function(p) {
p.update(deltatime)
if (p.age < p.lifetime) {
p.draw()
newparticles.push(p)
}
})
currentparticles = newparticles
}
function frame(time) {
if (running) {
var deltat = time - lastframe
lastframe = time;
updateanddrawparticles(deltat)
polyfillAnimFrame(frame)
}
}
var running = false
function start() {
running = true
polyfillAnimFrame(function(time) {
lastframe = time
polyfillAnimFrame(frame)
})
}
function stop() {
running = false
}
return {
start: start,
stop: stop,
step: updateanddrawparticles,
addsmoke: addparticles
}
}
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
var party = smokemachine(ctx, [254, 16.8, 18.2])
party.start() // start animating
onmousemove = function(e) {
var x = e.clientX
var y = e.clientY
var n = .5
var t = Math.floor(Math.random() * 200) + 3800
party.addsmoke(x, y, n, t)
}
setInterval(function() {
party.addsmoke(innerWidth / 2, innerHeight, 1)
}, 100)
html,
body {
position: absolute;
margin: 0;
width: 100%;
}
#hi {
position: absolute;
top: 40%;
width: 100%;
text-align: center;
}
#hi a {
color: #fff;
font-size: 80px;
text-decoration: none;
font-family: Lobster;
}
<body cz-shortcut-listen="true">
<a href="https://github.com/bijection/smoke.js">
<img style="width: 150px; position: absolute; top: 0; right: 0; border: 0;" src="./github.png" alt="Spoon me on GitHub">
</a>
<canvas id="canvas" width="1777" height="898"></canvas>
<div id="hi">
<a href="https://github.com/bijection/smoke.js">
smoke.js
</a>
</div>
</body>
In the script box you see how it shows a RGB value for color, I figured changing that would do it but it doesn't, and I've looked through everything I can that might possibly change the color and just can't seem to find it, can anyone help me out?
I'm trying to make it a normal grayish looking smoke.
The second thing I need to know how to do is move it from the center, again tried all the things I can think of. I currently have two floating DIVs one at each bottom corner, I put the canvas in my left floating div, and it still forces it to the middle, even when the div worked in the corner before I added the canvas div inside my floating div.
the floating DIV code I'm using is:
<!-- Smoke Left -->
<div id="floatLogo">
<canvas id="canvas" width="1777" height="898"></canvas>
<div id="hi"></div>
</div>
withe the css of:
#floatLogo {
width:auto;
height:auto;
padding:5px 2px;
text-align:center;
position: fixed;
bottom: 0;
left: 0;
}
The DIV floated perfect to the left before I added the canvas into it, and now its being forced to the center
this will do it, replace MYCOLORCODEHERE with the color you desire;
var ctx = canvas.getContext('2d')
var party = smokemachine(ctx,MYCOLORCODEHERE)
party.addsmoke(500,500)
party.start()
From the docs:
smokemachine(context, [r,g,b])
Returns a smoke machine that makes smoke.
context — the context of the canvas we wanna draw smoke on [r,g,b] —
(optional) the color we want the smoke to be var party =
smokemachine(context, [1,5,253])
Here: https://github.com/bijection/smoke.js
This line:
color = color || [24, 46.8, 48.2];
var polyfillAnimFrame ...
you can try color in the right side to any color you want, for example:
color = [255, 0, 255]
var polyfillAnimFrame ...
will turn the color to pink
I have two arrays, one of them represents data, and the other one - intervals. Both are sorted and their start and end values match. I go through nested for loops to calculate the average of data points in a given interval. As a result, I end up with one data value for each interval. For smaller size arrays, < 100-500 length, these linear loops do the work, however, this approach becomes an issue with several thousand data points. Any recommendation will be appreciated.
Please see a simplified code below with a link to JSfiddle at the end
var TimelineArray = [0, 10, 20, 30, 40, 40, 60, 70, 80, 90, 100],
DataArray = [0, 2, 4, 5, 8, 11, 19, 22, 24, 25, 30, 31, 38, 39, 51, 56, 57, 58, 59, 64, 74, 76, 89, 91, 92, 94, 98, 100],
DataArrayA = [];
for (i = 0; i < TimelineArray.length-1; i++) {
var dataPointsInGivenTimeInterval = [];
for (j = 0; j < DataArray.length; j++) {
if (DataArray[j] > TimelineArray[i] && DataArray[j] <= TimelineArray[i+1]) {
dataPointsInGivenTimeInterval.push(DataArray[j]);
}
};
if (dataPointsInGivenTimeInterval.length == 0) {
DataArrayA.push(null);
}
else {
var sumOfdataPoints = null;
for (k = 0; k < dataPointsInGivenTimeInterval.length; k++) {
sumOfdataPoints += dataPointsInGivenTimeInterval[k];
}
var avg = sumOfdataPoints / dataPointsInGivenTimeInterval.length;
DataArrayA.push(avg);
}
} // end for
console.log(TimelineArray);
console.log(DataArrayA);
.as-console-wrapper {
max-height: 100% !important;
top: 0;
}
The console output is
[0, 10, 20, 30, 40, 40, 60, 70, 80, 90, 100]
[4.75, 15, 25.25, 36, null, 56.2, 64, 75, 89, 95]
Here is the code at JSfiddle - calculating average values for given intervals
Since the arrays are sorted, you can do it linearly with respect to the size of the timeline and data:
var timeline = [0, 10, 20, 30, 40, 40, 60, 70, 80, 90, 100],
data = [0, 2, 4, 5, 8, 11, 19, 22, 24, 25, 30, 31, 38, 39, 51, 56, 57, 58, 59, 64, 74, 76, 89, 91, 92, 94, 98, 100];
var averages = new Array(timeline.length - 1);
for (var i = 0, j = 0; i < timeline.length; i++) {
var sum = 0,
items = 0;
for (; data[j] <= timeline[i]; j++) {
sum += data[j];
++items;
}
if(i) averages[i-1] = sum / items;
}
console.log(averages);
.as-console-wrapper {
max-height: 100% !important;
top: 0;
}
You don't need to re-scan DataArray from the beginning on each iteration.
var TimelineArray = [0, 10, 20, 30, 40, 40, 60, 70, 80, 90, 100];
var DataArray = [0, 2, 4, 5, 8, 11, 19, 22, 24, 25, 30, 31, 38, 39, 51, 56, 57, 58, 59, 64, 74, 76, 89, 91, 92, 94, 98, 100];
var res = [], pos = 0;
TimelineArray.forEach(function(v, i) {
for(var sum = 0, n = 0; DataArray[pos] <= v; n++) {
sum += DataArray[pos++];
}
i && res.push(n ? sum / n : null);
});
console.log(res);
Not sure if it'll be any faster, but here's a crack at it in a different way:
var TimelineArray = [0, 10, 20, 30, 40, 40, 60, 70, 80, 90, 100],
DataArray = [0, 2, 4, 5, 8, 11, 19, 22, 24, 25, 30, 31, 38, 39, 51, 56, 57, 58, 59, 64, 74, 76, 89, 91, 92, 94, 98, 100],
DataArrayA = [];
function avg(arr){
if(arr!= null && arr.length > 0)
return arr.reduce(function(a, b){ return a+b;}, 0) / arr.length;
return null;
}
for(var i = 0; i < TimelineArray.length-1; i++){
var interval = [TimelineArray[i], TimelineArray[i+1]];
var data = DataArray.filter(function(a){ return a > interval[0] && a <= interval[1]});
DataArrayA.push(avg(data));
}
console.log(DataArrayA);
edit 1: removed a loop.
The highcharts is rendering the chart when the series data is hardcoded and when the data is passed through a variable from backend, it doesn't generate a chart.
series: [{
name: 'T1',
stack: 'Tasks',
color: 'blue',
data: [ { x: 0,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 14, 15, 53)},
{ x: 1,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 11, 42, 02)},
{ x: 2,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 15, 54, 23)},
{ x: 3,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 14, 17, 08)},
{ x: 4,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 17, 23, 13)} ]
}, {
name: 'T2',
stack: 'Tasks',
color: 'green',
data: [ { x: 0,
low: Date.UTC(2015, 2, 13, 14, 15, 53),
high: Date.UTC(2015, 2, 13, 14, 17, 08)},
{ x: 1,
low: Date.UTC(2015, 2, 13, 11, 42, 02),
high: Date.UTC(2015, 2, 13, 13, 23, 02)},
{ x: 3,
low: Date.UTC(2015, 2, 13, 14, 17, 08),
high: Date.UTC(2015, 2, 13, 14, 24, 55)} ]
}, {
name: 'T3',
stack: 'Tasks',
color: 'red',
data: []
}]
When the value is coming from backend, the code is
series: [{
name: 'T1',
stack: 'Tasks',
color: 'blue',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T1){
temp.x = msg.T1[i].x;
// temp.low = new Date(msg.T1[i].low) or Date.UTC(new Date(msg.T1[i].low);
// temp.high = new Date(msg.T1[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}, {
name: 'T2',
stack: 'Tasks',
color: 'green',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T2){
temp.x = msg.T2[i].x;
// temp.low = new Date(msg.T2[i].low);
// temp.high = new Date(msg.T2[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}, {
name: 'T3',
stack: 'Tasks',
color: 'red',
data: (function(){
var data = [];
var temp = {};
for(i in msg.T3){
temp.x = msg.T3[i].x;
// temp.low = new Date(msg.T3[i].low);
// temp.high = new Date(msg.T3[i].high);
temp.low = parseInt(i);
temp.high = parseInt(i)+2;
data.push(temp);
}
return data;
}())
}]
});
The second code, despite throwing no error, does not render the chart.
What is wrong in the data format
The problem is fixed, issue was that the value of x in temp.x, the data object passed to series, should be integer only, no Strings or any other data types are allowed. Fixing that fixed the chart
I'm using a A* pathfinding script in a simple JavaScript. I broke my game down to a SSCCE. Anyway, my game is 15 columns across and 10 rows down.
The pathfinding works until you click anywhere on the 5-most-right columns. So if X is 11 or greater. You will get this error. Uncaught TypeError: Cannot read property '7' of undefined Where 7 is the Y axis of where you clicked.
Here is my SSCCE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript' src='graphstar.js'></script>
<script type="text/javascript">
var board;
</script>
<script type='text/javascript' src='astar.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
// UP to DOWN - 10 Tiles (Y)
// LEFT to RIGHT - 15 Tiles (X)
graph = new Graph([
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 1, 13, 13, 1],
[1, 13, 1, 1, 13, 1, 1, 13, 1, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 13, 1, 1, 1, 13, 13, 1, 13, 13, 1, 1, 1, 13, 1],
[1, 13, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 13, 1],
[1, 13, 1, 13, 13, 13, 13, 13, 1, 1, 1, 1, 13, 13, 13, 1],
[1, 13, 1, 1, 1, 1, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1],
[1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
]);
//Let's do an example test.
start = graph.nodes[1][2]; // x - y (15 columns across, 10 rows down)
end = graph.nodes[12][7]; // x - y (15 columns across, 10 rows down)
result = astar.search(graph.nodes, start, end);
});
</script>
</head>
<body>
Loading... pathfinding. Look in Chrome Console/Firefox Firebug for more information.
</body>
</html>
As you can see, my game is jQuery. Also there is graphstar.js and astar.js. Don't worry about astar.js because it works fine. graphstar.js is the where my problem is. astar.js is where the nodes and such are laid out. graphstar.js is where the map is graphed.
See the whole graphstar.js here: http://pastebin.com/kx4mw86z (Here is astar.js: http://pastebin.com/wtN2iF15)
This is where it's laid out in graphstar.js:
// Creates a Graph class used in the astar search algorithm.
function Graph(grid) {
var nodes = [];
var row, rowLength, len = grid.length;
for (x = 0; x <= 10; x++) {
row = grid[x];
nodes[x] = new Array(15);
for (y = 0; y <= 15; y++) {
nodes[x][y] = new GraphNode(x, y, row[y]);
}
}
this.input = grid;
this.nodes = nodes;
}
I know that my X's highest is 15 while my Y's highest is 10. But I tried messing around with it.. and I would get errors. Sometimes no errors and the page would get stuck.
Help?
New graphing format:
for (y = 0; y <= 10; y++) {
row = grid[y];
nodes[y] = new Array(15);
for (x = 0; x <= 15; x++) {
console.log("X: " + x + " Y: " + y);
//console.log("Row: " + row[x]);
nodes[x][y] = new GraphNode(x, y, row[x]);
}
}
If I'm understanding this all correctly, I think you just have your indexes backwards.
graph.nodes[12][7]
graph.nodes[12] is undefined because there are only 11 elements in nodes:
for (x = 0; x <= 10; x++) {
nodes[x] = new Array(15); // x only goes up to 10
EDIT:
This comment says it all:
// UP to DOWN - 10 Tiles (Y)
// LEFT to RIGHT - 15 Tiles (X)
This is backwards. You do not have 15 x and 10 y, you have 10 x and 15 y.