We Keep Coding

p5.js - Getting an array of all available video devices (webcams) with id

I would like to use x to output a list of all connected webcams with ID. Unfortunately, I always get the following error message (see picture).
Does anyone have an idea what this could be? I am thankful for any help!
Here is my code:
const devices = [];
var list;
let video;
function setup() {
list = navigator.mediaDevices.enumerateDevices().then(gotDevices);
var constraints1 = {
video: {
deviceId: {
exact: list[0].id
},
}
};
canvas = createCanvas(width,height);
background(255);
video = createCapture(constraints1);
}
function gotDevices(deviceInfos) {
for (let i = 0; i !== deviceInfos.length; ++i) {
const deviceInfo = deviceInfos[i];
if (deviceInfo.kind == 'videoinput') {
devices.push({
label: deviceInfo.label,
id: deviceInfo.deviceId
});
}
}
return devices;
}
-------------------------------EDIT (Current status)-----------------------
var deviceList = [];
function preload() {
navigator.mediaDevices.enumerateDevices().then(getDevices);
}
function setup() {
var constraints = {
video: {
deviceId: {
exact: deviceList[1].id
},
}
};
canvas = createCanvas(width, height);
background(255);
video = createCapture(constraints);
//console.log(deviceList);
}
function getDevices(devices) {
//arrayCopy(devices, deviceList);
for (let i = 0; i < devices.length; ++i) {
let deviceInfo = devices[i];
//Only get videodevices and push them into deviceList
if (deviceInfo.kind == 'videoinput') {
deviceList.push({
label: deviceInfo.label,
id: deviceInfo.deviceId
});
// console.log("Device name :", devices[i].label);
// console.log("DeviceID :", devices[i].deviceId);
}
}
}
Unfortunately, I get the following error here:

The information that you are looking for is down in the 'getDevices' function. The following runs on my system and will show the device name and id in the console window. It will also create a global array for audio and video devices that you may access in setup(); Note that the deviceList is obtained in preload() which is run only once before the rest of your code.
var deviceList = [];
function preload() {
navigator.mediaDevices.enumerateDevices().then(getDevices);
}
function setup() {
var constraints = {
video:
{
}
};
canvas = createCanvas(width, height);
background(255);
video = createCapture(constraints);
//console.log(deviceList);
for (let x = 0; x < deviceList.length; x++) {
console.log(deviceList[x]);
}
}
function getDevices(devices) {
// console.log(devices); // To see all devices
arrayCopy(devices, deviceList);
for (let i = 0; i < devices.length; ++i) {
let deviceInfo = devices[i];
if (deviceInfo.kind == 'videoinput') {
console.log("Device name :", devices[i].label);
console.log("DeviceID :", devices[i].deviceId);
}
}
}
DropDownList of Devices
// N.B. Will not run in Processing IDE with Safari - Requires p5.js web editor and Chrome browser
// Loads deviceList array into pullDown list
// Drop Down List parts => a.)display field, b.)arrow, c.)listItems
// Syntax: List(x, y, w, h, itemH, txtSize)
let list;
let selectedItem = -1;
let drop = false;
let itemY = [];
var deviceList = [];
function preload() {
navigator.mediaDevices.enumerateDevices().then(getDevices);
}
class List {
constructor(x, y, w, h, itemH, txtSize) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.itemH = itemH;
this.txtSize = txtSize;
this.arrwX = this.x + this.w;
this.arrwY = this.y;
this.arrwH = this.h;
}
openVideoInput (videoSelected) {
var constraints = {
video: {
deviceId: {
exact: deviceList[videoSelected].id
},
}
};
createCapture(constraints);
}
press(mx, my) {
// arrow touches
if ((mx >= this.arrwX) && (mx <= this.arrwX+this.arrwH) && (my >= this.arrwY) && (my <= this.arrwY+this.arrwH)) {
if (drop == true) {
drop = false;
} else {
drop = true;
}
} // list touches
if (drop) {
if (deviceList.length > 0) {
for (let j = 0; j < deviceList.length; j++) {
if ((mx >= this.x) && (mx <= this.x + this.w) && (my >= itemY[j] ) && (my <= itemY[j] + this.itemH)) {
selectedItem = j;
console.log("selectedItem :", selectedItem);
list.openVideoInput(selectedItem);
drop = false;
}
}
}
}
}
displayFieldString(title) {
fill(255); // background color
rect(this.x, this.y, this.w, this.h);
fill(0); // text color
textSize(this.txtSize);
text(title, this.x + 10, this.y + this.txtSize);
}
display() {
if (selectedItem == -1) {
this.displayFieldString("Select video input:");
} else {
this.displayFieldString(deviceList[selectedItem].label);
}
// arrow
fill(255); // arrow background color
rect(this.arrwX, this.arrwY, this.arrwH, this.arrwH);
fill(0, 255, 0); // arrow color
triangle(this.arrwX+5, this.arrwY+5, this.arrwX+this.arrwH-5, this.arrwY+5, this.arrwX+this.arrwH/2, this.arrwY+this.arrwH-5);
// listItems
if ((deviceList.length > 0) && (drop)) {
for (let j = 0; j < deviceList.length; j++) {
itemY[j] = (this.y + this.h) + j*this.itemH;
fill(255);
rect(this.x, itemY[j], this.w, this.itemH);
fill(0);
textSize(this.txtSize);
text(deviceList[j].label, this.x + 10, itemY[j] + this.txtSize);
}
}
if (!drop) {
rect(this.x, this.y + this.h, this.w, 0);
}
}
}
function setup() {
createCanvas(400, 200);
list = new List(30, 30, 320, 24, 24, 16);
}
function draw() {
background(220);
list.display();
}
function getDevices(devices) {
for (let i = 0; i < devices.length; ++i) {
let deviceInfo = devices[i];
//Only get videodevices and push them into deviceList
if (deviceInfo.kind == 'videoinput') {
deviceList.push( {
label:deviceInfo.label,
id:deviceInfo.deviceId
}
);
}
}
}
function mousePressed() {
list.press(mouseX, mouseY);
}

Ok, now that I've looked further on the Internet for a solution and also found one, I thought I'd post it here too. Maybe it still helps someone else. The problem was that the array deviceList[] is not completely filled when the code reaches the following line:
deviceList[1].id within setup()
The easiest way to solve this problem was to postpone the automatically initialization of the p5js library until your callback getDevices() has finished its job. Thanks again to apodidae for his help.
var deviceList = [];
navigator.mediaDevices.enumerateDevices().then(getDevices);
const setup = function () {
var constraints = {
video: {
deviceId: {
exact: deviceList[0].id
},
}
};
var constraints1 = {
video: {
deviceId: {
exact: deviceList[1].id
},
}
};
canvas = createCanvas(width, height);
background(255);
video = createCapture(constraints);
video2 = createCapture(constraints1);
console.log(deviceList);
};
const draw = function () {
};
function startP5() {
globalThis.setup = setup; // place callback setup() into global context
globalThis.draw = draw;
new p5;
}
function getDevices(devices) {
//arrayCopy(devices, deviceList);
for (let i = 0; i < devices.length; ++i) {
let deviceInfo = devices[i];
//Only get videodevices and push them into deviceList
if (deviceInfo.kind == 'videoinput') {
deviceList.push({
label: deviceInfo.label,
id: deviceInfo.deviceId
});
// console.log("Device name :", devices[i].label);
// console.log("DeviceID :", devices[i].deviceId);
}
}
startP5();
}
Here again the link to the other discussion

How to get variable data by id

Recently i have used code in project that is still working it it http://kreditka.testovi-site.pw. But when i tried to reuse javascript the default rules js got broken and i got an error in console explaining that varibale cannot be found. Is it somehow related that sme o the code is not resusable and each line should be rewritten one by one for defferent projects?
(function () {
console.log("()");
"use strict";
var polosa = document.querySelector("#polosa");
alert(polosa);
var x = document.querySelectorAll("#slide1");
var o;
for (o = 0; o < x.length; o++) {
x[o].style.left = o*300+"px";
}
var x = document.querySelectorAll("#slide");
var a;
for (a = 0; a < x.length; a++) {
x[a].style.left = a*300+"px";
}
var doc = document.querySelectorAll('.btn-click');
for (var i = 0; i < doc.length; i++) {
doc[i].addEventListener("click", highlightThis, true);
}
var doc1 = document.querySelectorAll('.btn1-click');
for (var j = 0; j < doc.length; j++) {
doc1[j].addEventListener("click", highlightThis1, true);
}
var polosa = document.querySelector('#polosa');
polosa.style.left = '0px';
var left = 0;
var sliderItem = document.querySelector('#slide');
function highlightThis(event) {
console.log("highlightThis");
var currentActiveButton = document.querySelector(".btn-click.btn-slide-active");
currentActiveButton.classList.toggle("btn-slide-active");
event.target.classList.toggle("btn-slide-active");
console.log(event.target.dataset.value);
shiftSlide({
prev: currentActiveButton.dataset.value,
next: event.target.dataset.value
});
}
function highlightThis1(event) {
console.log("highlightThis1");
var currentActiveButton1 = document.querySelector(".btn1-click.btn-slide-active");
currentActiveButton1.classList.toggle("btn-slide-active");
event.target.classList.toggle("btn-slide-active");
console.log(event.target.dataset.value);
shiftSlide1({
prev: currentActiveButton1.dataset.value,
next: event.target.dataset.value
});
}
function shiftSlide(obj) {
var polosa = document.querySelector('#polosa');
console.log("shiftSlide");
var currentSliderPosition = parseInt(polosa.style.left);
if (obj.prev === obj.next) {
return
} else {
var left = (obj.prev - obj.next) * 300;
polosa.style.left = currentSliderPosition + left + "px";
}
}
function shiftSlide1(obj) {
var polosa = document.querySelector('#polosa1');
console.log("shiftSlide");
var currentSliderPosition = parseInt(polosa1.style.left);
if (obj.prev === obj.next) {
return
} else {
var left = (obj.prev - obj.next) * 300;
polosa1.style.left = currentSliderPosition + left + "px";
}
}
})();

Compiles through Netbeans, doesn't compile through CMD

i've got my code to work on a Storage Management
Page Replacement Methods assignment. And my code works through Netbeans but it doesn't compile through CMD.
Do you know why?
public class Paging {
/**
* #param args the command line arguments
*/
public static void main(String[] args) throws IOException, IOException, IOException, IOException {
BufferedReader obj = new BufferedReader(new InputStreamReader(System.in));
try {
URL url = new URL("www.csc.liv.ac.uk/~ped/COMP104/COMP104-2016-17/Page_Trace_Oldest");
URL url3 = new URL("www.csc.liv.ac.uk/~ped/COMP104/COMP104-2016-17/Page_Trace_Random");
BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream()));
String str;
while ((str = in.readLine()) != null) {
str = in.readLine().toString();
System.out.println(str);
}
in.close();
} catch (MalformedURLException e) {
} catch (IOException e) {
}
URL url2 = new URL("www.csc.liv.ac.uk/~ped/COMP104/COMP104-2016-17/Page_Trace_LRU");
BufferedReader in = new BufferedReader(new InputStreamReader(url2.openStream()));
String str2;
while ((str2 = in.readLine()) != null) {
str2 = in.readLine().toString();
System.out.println(str2);
}
in.close();
URL url3 = new URL("www.csc.liv.ac.uk/~ped/COMP104/COMP104-2016-17/Page_Trace_Random");
BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream()));
String str3;
while ((str3 = in.readLine()) != null) {
str2 = in.readLine().toString();
System.out.println(str3);
}
in.close();
int f, page = 0, ch, pgf = 0, n = 0, chn = 0;
boolean flag;
int pages[];
do {
System.out.println("Menu");
System.out.println("1.FIFO");
System.out.println("2.LRU");
System.out.println("3.LFU");
System.out.println("4.EXIT");
System.out.println("ENTER YOUR CHOICE: ");
try {
ch = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
switch (ch) {
case 1:
int pt = 0;
System.out.println("Enter no. of frames (1-8): ");
f = Integer.parseInt(obj.readLine());
int frame[] = new int[f];
for (int i = 0; i < f; i++) {
frame[i] = -1;
}
System.out.println("enter the no of pages ");
n = Integer.parseInt(obj.readLine());
pages = new int[n];
System.out.println("enter the page no ");
for (int j = 0; j < n; j++) {
pages[j] = Integer.parseInt(obj.readLine());
}
do {
int pg = 0;
for (pg = 0; pg < n; pg++) {
page = pages[pg];
flag = true;
for (int j = 0; j < f; j++) {
if (page == frame[j]) {
flag = false;
break;
}
}
if (flag) {
frame[pt] = page;
pt++;
if (pt == f) {
pt = 0;
}
System.out.print("frame :");
for (int j = 0; j < f; j++) {
System.out.print(frame[j] + " ");
}
System.out.println();
pgf++;
} else {
System.out.print("frame :");
for (int j = 0; j < f; j++) {
System.out.print(frame[j] + " ");
}
System.out.println();
}
chn++;
}
} while (chn != n);
System.out.println("Page fault:" + pgf);
break;
case 2:
int k = 0;
System.out.println("enter no. of frames: ");
{
try {
f = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
}
int frame1[] = new int[f];
int a[] = new int[f];
int b[] = new int[f];
for (int i = 0; i < f; i++) {
frame1[i] = -1;
a[i] = -1;
b[i] = -1;
}
System.out.println("enter the no of pages ");
{
try {
n = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
}
pages = new int[n];
System.out.println("enter the page no ");
for (int j = 0; j < n; j++) {
try {
pages[j] = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
}
do {
int pg = 0;
for (pg = 0; pg < n; pg++) {
page = pages[pg];
flag = true;
for (int j = 0; j < f; j++) {
if (page == frame1[j]) {
flag = false;
break;
}
}
for (int j = 0; j < f && flag; j++) {
if (frame1[j] == a[f - 1]) {
k = j;
break;
}
}
if (flag) {
frame1[k] = page;
System.out.println("frame :");
for (int j = 0; j < f; j++) {
System.out.print(frame1[j] + " ");
}
pgf++;
System.out.println();
} else {
System.out.println("frame :");
for (int j = 0; j < f; j++) {
System.out.print(frame1[j] + " ");
}
System.out.println();
}
int p = 1;
b[0] = page;
for (int j = 0; j < a.length; j++) {
if (page != a[j] && p < f) {
b[p] = a[j];
p++;
}
}
for (int j = 0; j < f; j++) {
a[j] = b[j];
}
chn++;
}
} while (chn != n);
System.out.println("Page fault:" + pgf);
break;
case 3:
k = 0;
pgf = 0;
int sml;
System.out.println("enter no. of frames: ");
{
try {
f = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
}
int frame2[] = new int[f];
int cnt[] = new int[f];
flag = true;
for (int i = 0; i < f; i++) {
frame2[i] = -1;
cnt[i] = 0;
}
System.out.println("enter the no of pages ");
{
try {
n = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
}
pages = new int[n];
System.out.println("enter the page no ");
for (int j = 0; j < n; j++) {
try {
pages[j] = Integer.parseInt(obj.readLine());
} catch (IOException ex) {
Logger.getLogger(Paging.class.getName()).log(Level.SEVERE, null, ex);
}
}
do {
int pg = 0;
for (pg = 0; pg < n; pg++) {
page = pages[pg];
flag = true;
for (int j = 0; j < f; j++) {
if (page == frame2[j]) {
flag = false;
cnt[j]++;
break;
}
}
if (flag) {
sml = cnt[0];
for (int j = 0; j < f; j++) {
if (cnt[j] < sml) {
sml = cnt[j];
break;
}
}
for (int j = 0; j < f; j++) {
if (sml == cnt[j]) {
frame2[j] = page;
k = j;
break;
}
}
cnt[k] = 1;
System.out.print("frame :");
for (int j = 0; j < f; j++) {
System.out.print(frame2[j] + " ");
System.out.println();
pgf++;
}
} else {
System.out.print("frame :");
for (int j = 0; j < f; j++) {
System.out.print(frame2[j] + " ");
}
System.out.println();
}
chn++;
}
} while (chn != n);
System.out.println("Page fault:" + pgf);
break;
case 4:
break;
}
} while (ch != 4);
}
}
The error i'm getting is that :

You're creating 2 BufferedReader objects with the same name.
URL url2 = new URL("www.csc.liv.ac.uk/~ped/COMP104/COMP104-2016-17/Page_Trace_LRU");
BufferedReader in = new BufferedReader(new InputStreamReader(url2.openStream()));
and
URL url3 = new URL("www.csc.liv.ac.uk/~ped/COMP104/COMP104-2016-17/Page_Trace_Random");
BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream()));

JS - Error: "Cannot read property of undefined"

I'm attempting to make a genetic algorithm simulation in JavaScript using the P5.JS library, but i'm experiencing some issues. Here's what i have so far:
//var popS = 2;
var popu;
//var balls = [];
var target;
function setup() {
createCanvas(800, 300);
popu = new Population();
target = createVector(width - 15, height / 2);
}
function draw() {
background(50);
popu.run();
var ballsC = 0;
for (var a = 0; a < popu.balls.length; a++) {
if (popu.balls[a].done == true){
ballsC ++;
}
}
if (ballsC >= popu.popS) {
//popu = new Population();
popu.evaluate();
//popu.selection();
}
fill(255, 0, 30);
noStroke();
ellipse(target.x, target.y, 20, 20);
}
function DNA() {
this.genes = [];
this.changes = 7;//random(2, 50);
for (var a = 0; a < this.changes; a++) {
this.genes[a] = random(0, 15);
}
this.crossover = function (pB) {
var newdna = new DNA();
var mid = floor(random(0, this.genes.length));
for (var a = 0; a < this.genes.length; a++) {
if (a < mid) {
newdna.genes[a] = this.genes[a];
}else {
newdna.genes[a] = pB.genes[a];
}
}
return newdna;
}
}
function Population() {
this.balls = [];
this.popS = 50;
this.maxfit = 0;
this.matingpool = [];
for (var a = 0; a < this.popS; a++) {
this.balls[a] = new Ball();
}
this.evaluate = function() {
for (var a = 0; a < this.balls.length; a++) {
this.balls[a].calcF();
if (this.balls[a].fitness > this.maxfit) {
this.maxfit = this.balls[a].fitness;
}
}
this.matingpool = [];
for (var b = 0; b < this.balls.length; b++) {
var n = this.balls[b].fitness * 100;
for (var c = 0; c < n; c++) {
this.matingpool.push(this.balls[c]);
}
}
this.selection();
}
this.selection = function () {
var newBalls = [];
for (var a = 0; a < this.balls.length; a++) {
var parentA = this.matingpool[floor(random(0, this.matingpool.length))];
var parentB = this.matingpool[floor(random(0, this.matingpool.length))];
var child = parentA.dna.crossover(parentB.dna);
newBalls[a] = new Ball(child);
}
this.balls = newBalls;
}
this.run = function() {
for (var a = 0; a < this.balls.length; a++) {
this.balls[a].update();
this.balls[a].checkCol();
this.balls[a].show();
}
}
}
function Ball(dna) {
this.pos = createVector(10, height / 2);
this.speed = createVector(2, 2.5);
this.mul = -1;
this.time = 0;
this.a = 0;
if (dna) {
this.dna = dna;
} else {
this.dna = new DNA();
}
this.done = false;
this.fitness = 0;
this.reached;
this.update = function() {
if (this.done == false) {
if (this.time >= this.dna.genes[this.a]) {
this.a++;
this.time = 0;
this.mul *= -1;
}
this.speed.set(2, 2.5 * this.mul);
this.pos.add(this.speed);
}
}
this.show = function() {
this.time += 0.1;
fill(255, 70);
noStroke();
ellipse(this.pos.x, this.pos.y, 10, 10);
}
this.checkCol = function() {
if (this.pos.y > height || this.pos.y < 0 || this.pos.x > width) {
//print("col");
this.done = true;
}
if (dist(this.pos.x, this.pos.y, target.x, target.y) <= (10 / 2) + (20 / 2)) {
//print("done!");
this.done = true;
this.reached = true;
}
}
this.calcF = function() {
var a = dist(this.pos.x, this.pos.y, target.x, target.y);
var b = this.dna.genes.length;
var c = 0;
if (this.reached){
c = 1;
}
this.fitness = map(map(a, 0, width, 1, 0) + map(b, 2, 50, 1, 0) + c, 0, 3, 0, 1);
}
}
This is the most essential part of the code:
var popu;
function setup() {
createCanvas(800, 300);
popu = new Population();
}
function draw() {
background(50);
//popu = new Population();
popu.evaluate();
//popu.selection();
}
function DNA() {
this.genes = [];
this.changes = 7; //random(2, 50);
for (var a = 0; a < this.changes; a++) {
this.genes[a] = random(0, 15);
}
this.crossover = function(pB) {
var newdna = new DNA();
var mid = floor(random(0, this.genes.length));
for (var a = 0; a < this.genes.length; a++) {
if (a < mid) {
newdna.genes[a] = this.genes[a];
} else {
newdna.genes[a] = pB.genes[a];
}
}
return newdna;
}
}
function Population() {
this.balls = [];
this.popS = 50;
this.maxfit = 0;
this.matingpool = [];
for (var a = 0; a < this.popS; a++) {
this.balls[a] = new Ball();
}
this.evaluate = function() {
this.matingpool = [];
for (var b = 0; b < this.balls.length; b++) {
var n = this.balls[b].fitness * 100;
for (var c = 0; c < n; c++) {
this.matingpool.push(this.balls[c]);
}
}
this.selection();
}
this.selection = function() {
var newBalls = [];
for (var a = 0; a < this.balls.length; a++) {
var parentA = this.matingpool[floor(random(0, this.matingpool.length))];
var parentB = this.matingpool[floor(random(0, this.matingpool.length))];
var child = parentA.dna.crossover(parentB.dna);
newBalls[a] = new Ball(child);
}
this.balls = newBalls;
}
}
function Ball(dna) {
this.pos = createVector(10, height / 2);
this.speed = createVector(2, 2.5);
this.mul = -1;
this.time = 0;
this.a = 0;
if (dna) {
this.dna = dna;
} else {
this.dna = new DNA();
}
this.done = false;
this.fitness = 0;
this.reached;
}
So whenever it gets to here:
this.selection = function () {
var newBalls = [];
for (var a = 0; a < this.balls.length; a++) {
var parentA = random(this.matingpool);
var parentB = random(this.matingpool);
var child = parentA.dna.crossover(parentB.dna);
newBalls[a] = new Ball(child);
}
this.balls = newBalls;
}
i get the error: "Cannot read property 'dna' of undefined", why on earth is this happening?? When i use the debugger in chrome i can clearly see that matingpool has 2000 elements but when i try to get a random one it returns "undefined".
var parentA = random(this.matingpool);
var parentB = random(this.matingpool);
The weird thing is that parentB works, but parentA dosn't.
Any help is much appreciated. Entire code running here: http://codepen.io/felipe_mare/pen/bgOYMN
If it helps, i sometimes get the error: "Cannot read property '0' of undefined" instead, at line 138
this.update = function() {
if (this.done == false) {
//line 138
if (this.time >= this.dna.genes[this.a]) {
//line 138
this.a++;
this.time = 0;
this.mul *= -1;
}
this.speed.set(2, 2.5 * this.mul);
this.pos.add(this.speed);
}
}

In the future, please please please try to narrow your questions down to an MCVE. I understand that this was a complicated problem to debug, but you'll have much better luck if you try to narrow your problem down to a minimal (under 20 lines) example. Most of the time, you'll end up finding your error in the process of creating the MCVE.
But your problem is actually when you create the matingpool array, here:
this.matingpool = [];
for (var b = 0; b < this.balls.length; b++) {
var n = this.balls[b].fitness * 100;
for (var c = 0; c < n; c++) {
this.matingpool.push(this.balls[c]);
}
}
If I add a print statement inside the inner for loop, like this:
this.matingpool = [];
for (var b = 0; b < this.balls.length; b++) {
var n = this.balls[b].fitness * 100;
for (var c = 0; c < n; c++) {
console.log("pushing: " + this.balls[c]);
this.matingpool.push(this.balls[c]);
}
}
Then I see that you're pushing undefined into the array a bunch of times:
(1178) pushing: [object Object]
(3) pushing: undefined
(482) pushing: [object Object]
(3) pushing: undefined
(216) pushing: [object Object]
Then you choose randomly from this array, which is why your error shows up in random places in your code.
You're going to have to debug this further to figure out why that's happening- it seems weird that you're looping based on a fitness instead of an array length, but I don't really understand the code well enough to be sure. In any case, hopefully this gets you on the right track.

Neural Network Backpropagation not working

I have coded a neural network in JavaScript and implemented the Backpropagation algorithm described here.
Here is the code (typescript):
/**
* Net
*/
export class Net {
private layers: Layer[] = [];
private inputLayer: Layer;
private outputLayer: Layer;
public error: number = Infinity;
private eta: number = 0.15;
private alpha: number = 0.5;
constructor(...topology: number[]) {
topology.forEach((topologyLayer, iTL) => {
var nextLayerNeuronNumber = topology[iTL + 1] || 0;
this.layers.push(new Layer(topologyLayer, nextLayerNeuronNumber));
});
this.inputLayer = this.layers[0];
this.outputLayer = this.layers[this.layers.length - 1];
}
public loadWeights(weights) {
/*
[
[Layer
[Node weights, ..., ...]
]
]
*/
for (var iL = 0; iL < weights.length; iL++) {
var neuronWeights = weights[iL];
var layer = this.layers[iL];
for (var iN = 0; iN < neuronWeights.length; iN++) {
// Neuron
var connections = neuronWeights[iN];
for (var iC = 0; iC < connections.length; iC++) {
var connection = connections[iC];
this.layer(iL).neuron(iN).setWeights(iC, connection);
}
}
}
}
public train(data: number[][], iterartions = 2000) {
var inputs = this.inputLayer.neurons.length - 1;
for (var ite = 0; ite < iterartions; ite++) {
data.forEach(node => {
var inputData = [];
var outputData = [];
for (var i = 0; i < node.length; i++) {
if (i < inputs) {
inputData.push(node[i])
} else {
outputData.push(node[i])
}
}
this.feedForward(...inputData);
this.backProb(...outputData);
});
}
return this.calcDataError(data);
}
private calcDataError(data){
var overallDataErrorSum = 0;
var inputs = this.inputLayer.neurons.length - 1;
data.forEach(node => {
var outputData = node.splice(inputs);
var inputData = node;
this.feedForward(...inputData);
overallDataErrorSum += this.getNetError(outputData);
});
overallDataErrorSum /= data.length;
return overallDataErrorSum;
}
public saveWeights() {
// Ignore output layer
var ret = []
for (var iL = 0; iL < this.layers.length - 1; iL++) {
var layer = this.layers[iL];
var layer_ret = [];
layer.neurons.forEach(neuron => {
layer_ret.push(neuron.connections.map(c => c.weight));
});
ret.push(layer_ret);
}
return ret;
}
feedForward(...inputs: number[]) {
if (inputs.length != this.inputLayer.neurons.length - 1) return false;
this.inputLayer.neurons.forEach((neuron, i) => {
if (!neuron.isBias) {
neuron.output(inputs[i]);
}
});
this.layers.forEach((layer, i) => {
// Skip Input Layer
if (i > 0) {
var prevLayer = this.layers[i - 1]
layer.neurons.forEach(neuron => {
neuron.calcOutput(prevLayer);
});
}
});
}
public getNetError(targetVals) {
// Calc delta error of outputs
var deltas = [];
this.outputLayer.neurons.forEach((neuron, iN) => {
if (!neuron.isBias) {
neuron.calcOutputDelta(targetVals[iN]);
deltas.push(neuron.delta);
}
});
deltas = deltas.map(d => Math.pow(d, 2));
var sum = 0;
deltas.forEach(d => sum += d);
return sum / deltas.length;
}
backProb(...targetVals: number[]) {
// Calc delta error of outputs
this.outputLayer.neurons.forEach((neuron, iN) => {
if (!neuron.isBias) {
neuron.calcOutputDelta(targetVals[iN]);
}
});
// Backprop delta error through hidden layers
for (var iL = this.layers.length - 2; iL > 0; iL--) {
var layer = this.layers[iL];
var nextLayer = this.layers[iL + 1]
layer.neurons.forEach(neuron => {
neuron.calcHiddenDelta(nextLayer);
});
}
// Update weights
for (var iL = 1; iL < this.layers.length; iL++) {
var layer = this.layers[iL];
var prevLayer = this.layers[iL - 1];
layer.neurons.forEach(neuron => {
if (!neuron.isBias) {
neuron.updateWeights(prevLayer, this.eta);
}
});
}
this.error = this.getNetError(targetVals);
return this.error;
}
getOutputs(...inputs: number[]) {
var ret = [];
this.outputLayer.neurons.forEach(neuron => {
if (!neuron.isBias) {
ret.push(neuron.output())
}
});
return ret;
}
getResults(...inputs: number[]) {
this.feedForward(...inputs)
return this.getOutputs();
}
layer(i) {
return this.layers[i];
}
}
/**
* Layer
*/
class Layer {
public neurons: Neuron[] = [];
constructor(neuronNumber: number, nextLayerNeuronNumber: number) {
for (var iN = 0; iN < neuronNumber + 1; iN++) {
// +1 for bias neuron, which is last
if (iN < neuronNumber) {
// Create normal neuron
this.neurons.push(new Neuron(nextLayerNeuronNumber, iN, false));
} else {
this.neurons.push(new Neuron(nextLayerNeuronNumber, iN, true));
}
}
}
neuron(i) {
return this.neurons[i];
}
bias() {
return this.neurons[this.neurons.length - 1];
}
}
/**
* Neuron
*/
class Neuron {
public connections: Connection[] = [];
private outputVal: number;
public delta: number;
constructor(outputsTo: number, private index, public isBias = false) {
// Creates connections
for (var c = 0; c < outputsTo; c++) {
this.connections.push(new Connection());
}
this.outputVal = isBias ? 1 : 0;
}
calcOutput(prevLayer: Layer) {
// Only calcOutput when neuron is not a bias neuron
if (!this.isBias) {
var sum = 0;
prevLayer.neurons.forEach(prevLayerNeuron => {
sum += prevLayerNeuron.output() * prevLayerNeuron.getWeights(this.index).weight;
});
this.output(this.activationFunction(sum));
}
}
private activationFunction(x) {
//return Math.tanh(x);
return 1 / (1 + Math.exp(-x))
//return x;
};
private activationFunctionDerivative(x) {
// Small approximation of tanh derivative
//return 1 - x * x
// Sigmoid
var s = this.activationFunction(x);
return s * (1 - s);
// With general derivative formula where h = 1e-10
/*var h = 0.0001;
var dx = ((this.activationFunction(x + h) - this.activationFunction(x))/h)
return dx;*/
//return 1
};
// Backprop // Todo // Understand
public calcOutputDelta(targetVal) {
// Bias output neurons do not have delta error
if (!this.isBias) {
this.delta = targetVal - this.output();
}
}
public calcHiddenDelta(nextLayer: Layer) {
var sum = 0;
// Go through all neurons of next layer excluding bias
nextLayer.neurons.forEach((neuron, iN) => {
if (!neuron.isBias) {
sum += neuron.delta * this.getWeights(iN).weight;
}
});
this.delta = sum;
}
public updateWeights(prevLayer: Layer, eta: number) {
prevLayer.neurons.forEach((neuron, iN) => {
var weight = neuron.getWeights(this.index).weight;
var newWeight =
weight + // old weight
eta * // learning weight
this.delta * // delta error
this.activationFunctionDerivative(neuron.output())
neuron.getWeights(this.index).weight = newWeight;
});
}
// Backprop end
output(s?) {
if (s && !this.isBias) {
this.outputVal = s;
return this.outputVal;
} else {
return this.outputVal;
}
}
getWeights(i) {
return this.connections[i];
}
setWeights(i, s) {
return this.connections[i].weight = s;
}
}
/**
* Connection
*/
class Connection {
public weight: number;
public deltaWeight: number;
constructor() {
this.weight = Math.random();
this.deltaWeight = 0;
}
}
When training it for just one set of data, it works just fine. (example from here)
import {Net} from './ml';
var myNet = new Net(2, 2, 2);
var weights = [
[
[0.15, 0.25],
[0.20, 0.30],
[0.35, 0.35]
],
[
[0.40, 0.50],
[0.45, 0.55],
[0.60, 0.60]
]
];
// Just loads the weights given in the example
myNet.loadWeights(weights)
var error = myNet.train([[0.05, 0.10, 0.01, 0.99]]);
console.log('Error: ', error);
console.log(myNet.getResults(0.05, 0.10));
Console prints:
Error: 0.0000020735174706210714
[ 0.011556397089327321, 0.9886867357304885 ]
Basically, that's pretty good, right?
Then, I wanted to teach the network the XOR problem:
import {Net} from './ml';
var myNet = new Net(2, 3, 1);
var trainigData = [
[0, 0, 0],
[1, 0, 1],
[0, 1, 1],
[1, 1, 0]
]
var error = myNet.train(trainigData)
console.log('Error: ', error);
console.log('Input: 0, 0: ', myNet.getResults(0, 0));
console.log('Input: 1, 0: ', myNet.getResults(1, 0));
Here the network fails:
Error: 0.2500007370167383
Input: 0, 0: [ 0.5008584967899313 ]
Input: 1, 0: [ 0.5008584967899313 ]
What am I doing wrong?

Firstly perform gradient checks on the entire batch (meaining on the function calculating gradients on the batch), if you have not done so already. This will ensure you know what the problem is.
If gradients are not correctly computed, taking into account that your implementation works on single data sets, you are most likely mixing some values in the backwards pass.
If gradients are correctly computed, there is an error in your update function.
A working implementation of backpropagation for neural networks in javaScript can be found here
Here is the code snippet of the trainStep function using backpropagation
function trainStepBatch(details){
//we compute forward pass
//for each training sample in the batch
//and stored in the batch array
var batch=[];
var ks=[];
for(var a=0;a<details.data.in.length;a++){
var results=[];
var k=1;
results[0]={output:details.data.in[a]};
for(var i=1;i<this.layers.length;i++){
results[i]=layers[this.layers[i].type].evalForGrad(this.layers[i],results[i-1].output);
k++;
}
batch[a]=results;
ks[a]=k;
}
//We compute the backward pass
//first derivative of the cost function given the output
var grad=[];
for(i in batch)grad[i]={grad:costs[details.cost].df(batch[i][ks[i]-1].output,details.data.out[i])};
//for each layer we compute the backwards pass
//on the results of all forward passes at a given layer
for(var i=this.layers.length-1;i>0;i--){
var grads=[];
var test=true;
for(a in batch){
grads[a]=layers[this.layers[i].type].grad(this.layers[i],batch[a][i],batch[a][i-1],grad[a]);
if(grads[a]==null)test=false;
else grads[a].layer=i;
}
//we perform the update
if(test)stepBatch(this.layers[i].par,grads,details.stepSize);
}
}
And for the stepBatch function
function stepBatch(params,grads, stepSize){
for(i in params.w){
for(j in params.w[i]){
for(a in grads){
params.w[i][j]-=stepSize*grads[a].dw[i][j];
}
}
}
for(i in params.b){
for(a in grads){
params[a]-=stepSize*grads[a].db[i];
}
}
function stepBatch(params,grads, stepSize){
for(i in params.w){
for(j in params.w[i]){
for(a in grads){
params.w[i][j]-=stepSize*grads[a].dw[i][j];
}
}
}
for(i in params.b){
for(a in grads){
params[a]-=stepSize*grads[a].db[i];
}
}
}