You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
4.3 KiB
HTML
199 lines
4.3 KiB
HTML
6 years ago
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>neural network art</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="mobile-web-app-capable" content="yes">
|
||
|
|
<meta name="description" content="ōtoro.net">
|
||
|
|
<meta name="author" content="hardmaru">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- extra styles -->
|
||
|
|
<style>
|
||
|
|
head {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
padding: 10px;
|
||
|
|
font-family: Courier, "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||
|
|
font-weight: 100;
|
||
|
|
font-size: 0.6em;
|
||
|
|
}
|
||
|
|
textarea {
|
||
|
|
padding: 5;
|
||
|
|
font-family: Courier, "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||
|
|
font-weight: 100;
|
||
|
|
font-size: 0.5em;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="p5Container">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<script src="lib/p5.min.js"></script>
|
||
|
|
|
||
|
|
<script src="lib/recurrent.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// neural network random art generator
|
||
|
|
|
||
|
|
// settings
|
||
|
|
|
||
|
|
// actual size of generated image
|
||
|
|
var sizeh = 300;
|
||
|
|
var sizew = 300;
|
||
|
|
var sizeImage = sizeh*sizew;
|
||
|
|
|
||
|
|
var nH, nW, nImage;
|
||
|
|
var mask;
|
||
|
|
|
||
|
|
// settings of nnet:
|
||
|
|
var networkSize = 8;
|
||
|
|
var nHidden = 10;
|
||
|
|
var nOut = 3; // r, g, b layers
|
||
|
|
|
||
|
|
// support variables:
|
||
|
|
var img;
|
||
|
|
var img2;
|
||
|
|
var G = new R.Graph(false);
|
||
|
|
|
||
|
|
var initModel = function() {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var model = [];
|
||
|
|
var i;
|
||
|
|
|
||
|
|
var randomSize = 1.0;
|
||
|
|
|
||
|
|
// define the model below:
|
||
|
|
model.w_in = R.RandMat(networkSize, 3, 0, randomSize); // x, y, and bias
|
||
|
|
|
||
|
|
// model['w_0'] = R.RandMat(networkSize, networkSize, 0, randomSize);
|
||
|
|
|
||
|
|
for (i = 0; i < nHidden; i++) {
|
||
|
|
model['w_'+i] = R.RandMat(networkSize, networkSize, 0, randomSize);
|
||
|
|
}
|
||
|
|
model.w_out = R.RandMat(nOut, networkSize, 0, randomSize); // output layer
|
||
|
|
|
||
|
|
console.log(model)
|
||
|
|
|
||
|
|
return model;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var forwardNetwork = function(G, model, x_, y_) {
|
||
|
|
// x_, y_ is a normal javascript float, will be converted to a mat object below
|
||
|
|
// G is a graph to amend ops to
|
||
|
|
var x = new R.Mat(3, 1); // input
|
||
|
|
var i;
|
||
|
|
x.set(0, 0, x_);
|
||
|
|
x.set(1, 0, y_);
|
||
|
|
x.set(2, 0, 1.0); // bias.
|
||
|
|
var out;
|
||
|
|
out = G.tanh(G.mul(model.w_in, x));
|
||
|
|
for (i = 0; i < nHidden; i++) {
|
||
|
|
out = G.tanh(G.mul(model['w_'+i], out));
|
||
|
|
}
|
||
|
|
out = G.sigmoid(G.mul(model.w_out, out));
|
||
|
|
console.log(out)
|
||
|
|
return out;
|
||
|
|
};
|
||
|
|
|
||
|
|
function getColorAt(model, x, y) {
|
||
|
|
// function that returns a color given coordintes (x, y)
|
||
|
|
// (x, y) are scaled to -0.5 -> 0.5 for image recognition later
|
||
|
|
// but it can be behond the +/- 0.5 for generation above and beyond
|
||
|
|
// recognition limits
|
||
|
|
var r, g, b;
|
||
|
|
var out = forwardNetwork(G, model, x, y);
|
||
|
|
|
||
|
|
r = out.w[0]*255.0;
|
||
|
|
g = out.w[1]*255.0;
|
||
|
|
b = out.w[2]*255.0;
|
||
|
|
|
||
|
|
return color(r, g, b);
|
||
|
|
}
|
||
|
|
|
||
|
|
function genImage(img, model) {
|
||
|
|
var i, j, m, n;
|
||
|
|
img.loadPixels();
|
||
|
|
for (i = 0, m=img.width; i < m; i++) {
|
||
|
|
for (j = 0, n=img.height; j < n; j++) {
|
||
|
|
img.set(i, j, getColorAt(model, i/sizeh-0.5,j/sizew-0.5));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
img.updatePixels();
|
||
|
|
}
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
var myCanvas;
|
||
|
|
|
||
|
|
myCanvas = createCanvas(windowWidth,windowHeight);
|
||
|
|
|
||
|
|
myCanvas.parent('p5Container');
|
||
|
|
|
||
|
|
nW = Math.max(Math.floor(windowWidth/sizew), 1);
|
||
|
|
nH = Math.max(Math.floor(windowHeight/sizeh), 1);
|
||
|
|
nImage = nH*nW;
|
||
|
|
mask = R.zeros(nImage);
|
||
|
|
|
||
|
|
//img.resize(320*1.0, 320*1.0);
|
||
|
|
//img.save('genart.png','png');
|
||
|
|
//noLoop();
|
||
|
|
img = createImage(sizeh, sizew);
|
||
|
|
|
||
|
|
frameRate(30);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getRandomLocation() {
|
||
|
|
var i, result=0, r;
|
||
|
|
for (i=0;i<nImage;i++) {
|
||
|
|
result += mask[i];
|
||
|
|
}
|
||
|
|
if (result === nImage) {
|
||
|
|
mask = R.zeros(nImage);
|
||
|
|
}
|
||
|
|
do {
|
||
|
|
r = R.randi(0, nImage);
|
||
|
|
} while (mask[r] !== 0);
|
||
|
|
mask[r] = 1;
|
||
|
|
return r;
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayImage(n) {
|
||
|
|
var row = Math.floor(n/nW);
|
||
|
|
var col = n % nW;
|
||
|
|
image(img, col*sizew, row*sizeh);
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
|
||
|
|
model = initModel();
|
||
|
|
genImage(img, model);
|
||
|
|
displayImage(getRandomLocation());
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|