torgeir/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>brain.js + p5.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/brain.js/2.0.0-beta.1/brain-browser.js"></script>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

## index.js
const div = (m) => (n) => n / m;
const times = (n) => (m) => n * m;
const rand = (n) => n * Math.random();
const range = (l) => [...Array(l)].map((_, i) => i);
const rgb = () => range(3).map((_) => rand(1));

let done = false;

const net = new brain.NeuralNetwork({
  hiddenLayers: [3, 3],
});

function Sketch() {
  const self = this;

  const sketch = new p5(function (p) {
    let colorOne = rgb(),
      colorTwo = rgb();

    function resetColors() {
      colorOne = rgb();
      colorTwo = rgb();
    }

    function drawColors(c1, c2, y) {
      p.fill(...c1.map(times(255)));
      p.rect(0, y, 25, 25);
      p.fill(...c2.map(times(255)));
      p.rect(25, y, 25, 25);
    }

    p.setup = function () {
      p.frameRate(1);
      p.createCanvas(200, 20 * 25);
      drawColors(colorOne, colorTwo, 0);
    };

    p.draw = function () {
      drawColors(colorOne, colorTwo, 0);
      if (done) {
        done = false;
        range(1000)
          .map((_) => [rgb(), rgb()])
          .map(([c1, c2]) => [net.run([...c1, ...c2])[0], c1, c2])
          .sort((a, b) => b[0] - a[0])
          .slice(0, 20)
          .forEach(
            ([result, c1, c2], i) => (
              console.log(result), drawColors(c1, c2, (i + 1) * 25)
            )
          );
      }
    };

    self.colorOne = () => colorOne;
    self.colorTwo = () => colorTwo;
    self.resetColors = () => resetColors();
  });
}

function* numbers() {
  let n = 0;
  while (true) yield n++;
}

function* take(n, iter) {
  let index = 0;
  for (const val of iter) {
    yield val;
    index = index + 1;
    if (index == n) {
      return;
    }
  }
}

(async function () {
  const sketch = new Sketch();
  const stream = new brain.TrainStream({
    log: console.log,
    neuralNetwork: net,
    floodCallback: async function () {
      train(100, stream, sketch);
    },
    doneTrainingCallback: function () {
      console.log("done training");
      done = true;
    },
  });
  train(100, stream, sketch);
})();

function train(n, stream, sketch) {
  sketch.resetColors();
  for (const key of take(n, numbers())) {
    stream.write({
      input: [...sketch.colorOne(), ...sketch.colorTwo()],
      output: [score(key, ...sketch.colorOne(), ...sketch.colorTwo())],
    });
    sketch.resetColors();
  }
  stream.endInputs();

  // idé: én farge inn og én farge ut, isteden for 0 og 1 som resultat
}

// prefer red and green pairs
function score(key, r, g, b, rr, gg, bb) {
  return Math.max(r, Math.max(g, b)) == r &&
    Math.max(gg, Math.max(rr, bb)) == gg
    ? 1
    : 0;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>brain.js + p5.js</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/brain.js/2.0.0-beta.1/brain-browser.js"></script>
	<script src="index.js"></script>
	</head>
	<body></body>
	</html>
	const div = (m) => (n) => n / m;
	const times = (n) => (m) => n * m;
	const rand = (n) => n * Math.random();
	const range = (l) => [...Array(l)].map((_, i) => i);
	const rgb = () => range(3).map((_) => rand(1));

	let done = false;

	const net = new brain.NeuralNetwork({
	hiddenLayers: [3, 3],
	});

	function Sketch() {
	const self = this;

	const sketch = new p5(function (p) {
	let colorOne = rgb(),
	colorTwo = rgb();

	function resetColors() {
	colorOne = rgb();
	colorTwo = rgb();
	}

	function drawColors(c1, c2, y) {
	p.fill(...c1.map(times(255)));
	p.rect(0, y, 25, 25);
	p.fill(...c2.map(times(255)));
	p.rect(25, y, 25, 25);
	}

	p.setup = function () {
	p.frameRate(1);
	p.createCanvas(200, 20 * 25);
	drawColors(colorOne, colorTwo, 0);
	};

	p.draw = function () {
	drawColors(colorOne, colorTwo, 0);
	if (done) {
	done = false;
	range(1000)
	.map((_) => [rgb(), rgb()])
	.map(([c1, c2]) => [net.run([...c1, ...c2])[0], c1, c2])
	.sort((a, b) => b[0] - a[0])
	.slice(0, 20)
	.forEach(
	([result, c1, c2], i) => (
	console.log(result), drawColors(c1, c2, (i + 1) * 25)
	)
	);
	}
	};

	self.colorOne = () => colorOne;
	self.colorTwo = () => colorTwo;
	self.resetColors = () => resetColors();
	});
	}

	function* numbers() {
	let n = 0;
	while (true) yield n++;
	}

	function* take(n, iter) {
	let index = 0;
	for (const val of iter) {
	yield val;
	index = index + 1;
	if (index == n) {
	return;
	}
	}
	}

	(async function () {
	const sketch = new Sketch();
	const stream = new brain.TrainStream({
	log: console.log,
	neuralNetwork: net,
	floodCallback: async function () {
	train(100, stream, sketch);
	},
	doneTrainingCallback: function () {
	console.log("done training");
	done = true;
	},
	});
	train(100, stream, sketch);
	})();

	function train(n, stream, sketch) {
	sketch.resetColors();
	for (const key of take(n, numbers())) {
	stream.write({
	input: [...sketch.colorOne(), ...sketch.colorTwo()],
	output: [score(key, ...sketch.colorOne(), ...sketch.colorTwo())],
	});
	sketch.resetColors();
	}
	stream.endInputs();

	// idé: én farge inn og én farge ut, isteden for 0 og 1 som resultat
	}

	// prefer red and green pairs
	function score(key, r, g, b, rr, gg, bb) {
	return Math.max(r, Math.max(g, b)) == r &&
	Math.max(gg, Math.max(rr, bb)) == gg
	? 1
	: 0;
	}