Personal/JS_Projects
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Dawid Pietrykowski 2022-11-09 23:34:49 +01:00
commit 25a12f221e
42 changed files with 2710 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
20dots/animation.js Executable file
View File

@ -0,0 +1,38 @@
class Animation {
constructor(x, y, size) {
this.pos = new createVector(x, y);
this.x = x;
this.y = y;
this.size = size;
this.dots = [];
for (let i = 0; i < 20; i++) {
this.dots.push(new Dot(this.x, this.y, i, this.size));
}
};
update(f) {
for (let i = 0; i < 20; i++) {
this.dots[i].update(f);
}
}
show() {
for (let i = 0; i < 20; i++) {
noFill();
stroke(230);
strokeWeight(2);
circle(this.x, this.y, this.size / 20 * (i + 1));
this.dots[i].show();
}
push();
stroke(55);
strokeWeight(3);
beginShape();
for (let i = 0; i < 20; i++) {
vertex(this.dots[i].pos.x, this.dots[i].pos.y);
}
endShape();
pop();
}
}

26
20dots/dot.js Executable file
View File

@ -0,0 +1,26 @@
class Dot {
constructor(x, y, num, size) {
this.pos = new createVector(x, y);
this.x = x;
this.y = y;
this.n = num;
this.s = size;
this.ang = 0;
angleMode(DEGREES);
};
update(f) {
this.pos = new createVector(this.x, this.y)
this.pos.add(p5.Vector.fromAngle(radians(this.ang), this.s / 2 / 20 * (this.n + 1)));
this.ang += 360/144*(this.n + 1)/12;
}
show() {
push()
strokeWeight(6);
stroke(200, 50, 50);
point(this.pos.x, this.pos.y);
pop();
}
}

16
20dots/index.html Executable file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20 Dots</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="dot.js"></script>
<script src="animation.js"></script>
</head>
<body>
</body>
</html>

50
20dots/sketch.js Executable file
View File

@ -0,0 +1,50 @@
var dim;
let animation;
function setup() {
smooth();
frameRate(144);
createCanvas(getViewport()[0], getViewport()[1]);
background(51);
let vp = getViewport();
if (vp[0] > vp[1]) {
dim = vp[1]*0.9;
} else {
dim = vp[0]*0.9;
}
animation = new Animation(width/2,height/2,dim);
}
function draw() {
clear();
background(255);
animation.update(frameRate());
animation.show();
//text(getViewport(),100,100);
}
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

24
XORinTF/index.html Executable file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XOR in TensorFlow</title>
<style>
body {
background:0%;
padding: 0;
margin: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.1.2/tf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>

110
XORinTF/sketch.js Executable file
View File

@ -0,0 +1,110 @@
var history;
let resolution = 50;
var xs, ys, nn, result;
let x = [];
let y = [];
let predictionArray = [];
let res = 1 / resolution;
var inX = [
[0, 0],
[0, 1],
[1, 0],
[1, 1]
];
var inY = [
[0],
[1],
[1],
[0]
];
function setup() {
createCanvas(900, 900);
background(50);
frameRate(10);
//learningRateSlider = createSlider(1, 100, 35);
//a = tf.variable(tf.scalar(random(-1,1)));
tf.setBackend('cpu');
//trainNN();
//noLoop();
nn = tf.sequential();
xs = tf.tensor2d(inX);
ys = tf.tensor2d(inY);
const optimizer = tf.train.sgd(1);
var hidden = tf.layers.dense({
units: 4,
inputShape: [2],
activation: 'sigmoid'
});
var output = tf.layers.dense({
units: 1,
activation: 'sigmoid'
});
nn.add(hidden);
nn.add(output);
nn.compile({
optimizer: optimizer,
loss: 'meanSquaredError'
});
for (let i = 0; i < 1; i += res) {
x.push(i);
y.push(i);
}
for (let i = 0; i < resolution; i++) {
for (let j = 0; j < resolution; j++) {
predictionArray.push([i / resolution, j / resolution]);
}
}
}
async function trainNN() {
let o = await nn.fit(xs, ys, {
epochs: 100,
shuffle: true
});
print(o.history.loss[0]);
//o.dispose();
}
function draw() {
clear();
background(50);
trainNN().then(drawgrid());
// tf.tidy(() => {
// trainNN();
// });
//print(tf.memory().numTensors);
}
function drawgrid() {
tf.tidy(() => {
let td = tf.tensor2d(predictionArray);
result = nn.predictOnBatch(td).bufferSync().values;
//let toFill;
noStroke();
for (let i = 0; i < resolution; i ++){
for (let j = 0; j < resolution; j ++){
fill(result[(i*resolution)+j]*255);
square(mW(j/resolution),mH(i/resolution)-height/resolution,mW(res));
}
}
//td.dispose();
//result.dispose();
});
}
function mH(val) {
return map(val, 0, 1, height, 0);
}
function mW(val) {
return map(val, 0, 1, 0, width);
}

28
carDrivingNeuralNet/index.html Executable file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cars AI</title>
<style>
body {
padding: 0;
margin: 0;
background: 51;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.1.2/tf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="ray.js"></script>
<script src="wall.js"></script>
<script src="player.js"></script>
<script src="network.js"></script>
</head>
<body>
</body>
</html>

33
carDrivingNeuralNet/network.js Executable file
View File

@ -0,0 +1,33 @@
class NeuralNetwork {
constructor() {
this.nn = tf.sequential();
this.hidden1 = tf.layers.dense({
units: 6,
inputShape: [9]
});
this.hidden2 = tf.layers.dense({
units: 6
});
this.output = tf.layers.dense({
units: 2
});
this.nn.add(this.hidden1)
this.nn.add(this.hidden2);
this.nn.add(this.output);
this.nn.compile({
optimizer: tf.train.adam(1),
loss: 'meanSquaredError'
});
this.predictions = [1,0];
}
drive(inputs) {
return this.nn.predict(tf.tensor([inputs])).arraySync()[0];
}
prediction(data){
let temp = this.nn.predict(tf.tensor([data]));
this.predictions = temp.arraySync()[0];
tf.dispose(temp);
}
}

139
carDrivingNeuralNet/player.js Executable file
View File

@ -0,0 +1,139 @@
class Player {
constructor(position) {
this.position = position;
this.rays = [];
this.rawDistances = [];
this.distances = [];
this.fov = 90;
this.angle = 0;
this.acceleration = 2;
this.momentum = createVector(0, 0, 0);
this.velocity = createVector(0, 0, 0);
this.sight = 300;
this.frontalVelocity = 0;
this.maxVel = 12;
this.dead = false;
this.nn = new NeuralNetwork();
this.predictions = [];
this.slow = 0;
this.fitness = 0;
}
show(best) {
let width = 10;
let length = 15;
for (let r of this.rays) {
//r.show();
}
push();
if (!best)
fill(255, 73, 86);
else
fill(66, 129, 255);
noStroke();
translate(this.position.x, this.position.y);
rotate(radians(this.angle));
rect(-width / 2, -length / 2, width, length);
pop();
}
update(vk, hk) {
if (this.distances.length == 9) {
tf.tidy(() => {
this.predictions = this.nn.drive(this.distances);
});
if (this.predictions[0] >= 0) {
hk = '1';
} else {
hk = '0';
}
if (this.predictions[1] >= 0) {
vk = '1';
} else if (this.predictions[1] < 0.25 && this.predictions[1] > -0.25) {
vk = null;
} else {
vk = '0';
}
//print('1: '+this.predictions[0]+' 2: ' + this.predictions[1]);
}
const rotationSpeed = 2.5;
if (hk === '1') {
this.angle += rotationSpeed;
}
if (hk === '0') {
this.angle -= rotationSpeed;
}
if (vk == '1') {
this.velocity = p5.Vector.fromAngle(radians(this.angle - 90), 1);
this.momentum.mult(0.975);
} else if (vk == '0') {
this.velocity = createVector(0, 0, 0);
this.momentum.mult(0.9);
} else {
this.velocity = createVector(0, 0, 0);
this.momentum.mult(0.95);
}
if (this.momentum.mag() < 0.1) {
this.slow++;
}
if (this.slow > 15) {
this.dead = true;
}
if (!this.dead) {
this.fitness++;
}
//this.momentum = (this.momentum.sub(this.momentum.mult(0.00001)));
this.momentum.add(this.velocity.mult(0.12));
this.momentum.limit(this.maxVel);
this.position.add(this.momentum);
this.rays = [];
for (let i = -180; i < 180; i += 45) {
this.rays.push(new Ray(this.position.x, this.position.y, radians(i + this.angle), this.sight));
}
for (let r of this.rays) {
for (let w of walls) {
r.cast(w);
}
//r.show();
}
this.rawDistances = [];
for (let i = 0; i < this.rays.length; i++) {
this.rawDistances[i] = this.rays[i].cast();
if (this.rawDistances[i] != null && this.rawDistances[i] < 10)
this.dead = true;
}
this.frontalVelocity = map(this.momentum.mag(), 0, 5, 0, 1);
this.distances = getDistances(this.rawDistances, this.rawDistances.length, this.sight);
this.distances.push(this.frontalVelocity);
}
}
function angleToVector(xCoord, yCoord, angle, length) {
length = typeof length != 'undefined' ? length : 10;
angle = angle * Math.PI / 180; // if you're using degrees instead of radians
return createVector(length * Math.cos(angle) + xCoord, length * Math.sin(angle) + yCoord);
}
function getDistances(distances, l, sight) {
let array = [];
let length = l;
for (let i = 0; i < length; i++) {
if (distances[i] == null)
array[i] = 0;
else
array[i] = map(distances[i], 10, sight, 1, 0);
}
return array;
}

87
carDrivingNeuralNet/ray.js Executable file
View File

@ -0,0 +1,87 @@
class Ray {
constructor(xorigin, yorigin, angle, sight) {
this.origin = createVector(xorigin, yorigin);
this.direction = p5.Vector.fromAngle(angle); //createVector(xdirection, ydirection);
this.length = sight;
this.hit = 0;
this.intersections = [];
this.closestIntersection;
}
show() {
if (this.hit >= 1) {
stroke(130);
line(this.origin.x, this.origin.y, this.closestIntersection.x, this.closestIntersection.y);
push();
noFill();
stroke(100);
strokeWeight(10);
ellipse(this.closestIntersection.x, this.closestIntersection.y, 7, 7);
pop();
} else {
push();
noFill();
stroke(75);
strokeWeight(1);
line(this.origin.x, this.origin.y, this.origin.x + this.direction.x * this.length, this.origin.y + this.direction.y * this.length);
//line(this.origin.x, this.origin.y, mouseX, mouseY);
pop();
}
}
cast(wall) {
if (wall) {
const x1 = this.origin.x;
const y1 = this.origin.y;
const x2 = this.origin.x + this.direction.x * this.length;
const y2 = this.origin.y + this.direction.y * this.length;
//const x2 = mouseX;
//const y2 = mouseY;
const x3 = wall.a.x;
const y3 = wall.a.y;
const x4 = wall.b.x;
const y4 = wall.b.y;
const den = ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4));
if (den == 0) {
return;
}
const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den;
const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den;
if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
this.hit++;
this.intersections.push(createVector(x1 + t * (x2 - x1), y1 + t * (y2 - y1)));
}
this.distance = Infinity;
if (this.intersections && this.intersections.length) {
if (this.hit) {
for (let i = 0; i < this.intersections.length; i++) {
if (p5.Vector.dist(createVector(x1, y1), this.intersections[i]) < this.distance) {
this.closestIntersection = this.intersections[i];
this.distance = p5.Vector.dist(createVector(x1, y1), this.intersections[i])
}
}
}
}
} else {
if (this.hit >= 1)
return this.distance;
else
return null;
}
}
}
function distanceFromVectors(v1, v2) {
//var distance = abs(v1.x - v2.x) + abs(v1.y - v2.y)
var distance = sqrt(sq(v1.x - v2.x) + sq(v1.y - v2.y));
return distance;
}

176
carDrivingNeuralNet/sketch.js Executable file
View File

@ -0,0 +1,176 @@
var pause;
var drawing;
var doing;
let frames;
var x1, y1, fx, fy, lx, ly;
var removeButton;
var players = [];
var hk, vk;
function setup() {
createCanvas(1920, 850);
background(51);
frameRate(72);
level = new Map();
refresh();
drawing = true;
var checkbox;
var drawingbox;
checkbox = createCheckbox('pause', false);
drawingbox = createCheckbox('drawing', true);
checkbox.changed(pauseCheck);
drawingbox.changed(drawCheck);
sightSlider = createSlider(1, 100, 50);
velocitySlider = createSlider(1, 10, 3);
rotationSpeedSlider = createSlider(0, 10, 1);
removeButton = createButton('refresh');
removeButton.mousePressed(refresh);
tf.setBackend('cpu');
walls = [];
}
function refresh() {
pause = false;
drawing = false;
doing = false;
frames = 0;
players = [];
makeNewPlayers(10);
//players.push(new Player(createVector(500, 450)));
//walls.push(new Wall(100, 100, 200, 200));
}
function draw() {
clear();
background(51);
if (!pause) {
if (!drawing) {
background(51);
if (players.length <= 4) {
makeNewPlayers(10);
}
checkClick();
filterPlayers();
for (let p of players) {
p.update(vk, hk);
}
//print(getDistances(player.distances, player.distances.length, player.sight).push(player.frontalVelocity));
} else {
if (doing === true) {
if (p5.Vector.dist(createVector(x1, y1), createVector(mouseX, mouseY)) > 10) {
walls.push(new Wall(x1, y1, mouseX, mouseY));
x1 = mouseX;
y1 = mouseY;
lx = mouseX;
ly = mouseY;
}
}
}
//print(player.frontalVelocity);
}
level.show();
sortPlayers();
for (let i = 0; i < players.length; i++) {
if (i > 0)
players[i].show(false);
else
players[i].show(true);
}
//drawNeuralNet(players[0].distances);
}
function mouseClicked() {
if (drawing && mouseY <= 850) {
if (doing === false) {
doing = true;
fx = mouseX;
fy = mouseY;
x1 = mouseX;
y1 = mouseY;
} else {
walls.push(new Wall(fx, fy, lx, ly));
doing = false;
}
}
}
function pauseCheck() {
if (this.checked()) {
pause = true;
} else {
pause = false;
}
}
function drawCheck() {
if (this.checked()) {
drawing = true;
} else {
drawing = false;
}
}
class Map {
constructor() {};
show() {
for (let w of walls) {
w.show();
}
}
}
function exportWalls() {
var values = [];
for (let i = 0; i < walls.length; i++) {
values.push([walls[i].a.x,walls[i].a.y,walls[i].b.x,walls[i].a.y]);
}
saveJSON(JSON.stringify(values), 'track.json');
//localStorage.setItem('values', values);
}
function drawNeuralNet(layer1) {
noStroke();
for (let i = 0; i < layer1.length; i++) {
fill(layer1[i] * 255);
ellipse(1860, 850 / layer1.length * i + 50, 50, 50);
}
}
function makeNewPlayers(n) {
for (let i = 0; i < n; i++)
players.push(new Player(createVector(100, 500)));
}
function checkClick() {
hk = null;
vk = null;
if (keyIsDown(LEFT_ARROW)) {
hk = '0';
} else if (keyIsDown(RIGHT_ARROW)) {
hk = '1';
}
if (keyIsDown(UP_ARROW)) {
vk = '1';
} else if (keyIsDown(DOWN_ARROW)) {
vk = '0';
}
}
function filterPlayers() {
players = players.filter(function (pl) {
return pl.dead == false;
});
}
function sortPlayers() {
players.sort(function (a, b) {
return b.fitness - a.fitness
});
}

11
carDrivingNeuralNet/wall.js Executable file
View File

@ -0,0 +1,11 @@
class Wall {
constructor(ax, ay, bx, by) {
this.a = createVector(ax, ay);
this.b = createVector(bx, by);
}
show() {
stroke(255);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}

96
clock/clock.js Executable file
View File

@ -0,0 +1,96 @@
const g = 9.8 / (144 * 144);
const h = 2*Math.PI/12;
let speed = 0;
let xoffset = 0;
let yoffset = 0;
let scale = 0;
let res = 20/10;
//let c = color(255, 204, 0); // Define color 'c'
//fill(c);
class Pendulum {
constructor(xoffs, yoffs, scl, spd) {
speed = spd;
xoffset = xoffs;
yoffset = yoffs;
scale = scl;
this.x1 = 0;
this.y1 = 0;
this.a1 = Math.PI;//Math.PI / 2 + random(-Math.PI, Math.PI) / 16 + Math.PI/4;
this.a2 = Math.PI;//Math.PI + random(-Math.PI, Math.PI) / 16;
this.r1 = 2;
this.xoffset = xoffset;
this.yoffset = yoffset;
this.scale = scale;
this.speed = speed;
this.setPos();
}
update() {
//this.a1_v += this.a1_a;
//this.a2_v += this.a2_a;
this.a1 -= (h*this.speed)/144;
//this.a2 -= h/144;
//this.updateA();
this.setPos();
}
show() {
if (this.speed == 0.5)
stroke(20);
else
stroke(100);
push();
translate(this.xoffset, this.yoffset);
strokeWeight(6 * this.scale);
point(0, 0);
strokeWeight(5 * this.scale);
point(this.x1, this.y1);
strokeWeight(6 * this.scale);
line(0, 0, this.x1, this.y1);
//line(this.x1, this.y1, this.x2, this.y2);
pop();
}
setPos() {
this.x1 = sin(this.a1) * this.r1 * 100 * this.scale;
this.y1 = cos(this.a1) * this.r1 * 100 * this.scale;
}
refresh() {
this.x1 = 0;
this.y1 = 0;
this.a1 = Math.PI;//Math.PI / 2 + random(-Math.PI, Math.PI) / 16 + Math.PI/4;
this.a2 = Math.PI;//Math.PI + random(-Math.PI, Math.PI) / 16;
this.r1 = 2;
this.xoffset = xoffset;
this.yoffset = yoffset;
this.scale = scale;
this.speed = speed;
this.setPos();
}
updateA() {
// let d = 2 * this.m1 + this.m2 - this.m2 * cos(2 * this.a1 - 2 * this.a2);
// let num1 = -g * (2 * this.m1 + this.m2) * sin(this.a1);
// let num2 = -this.m2 * g * sin(this.a1 - 2 * this.a2);
// let num3 = -2 * sin(this.a1 - this.a2) * this.m2;
// let num4 = this.a2_v * this.a2_v * this.r2 + this.a1_v * this.a1_v * this.r1 * cos(this.a1 - this.a2);
// this.a1_a = (num1 + num2 + num3 * num4) / (this.r1 * d);
// num1 = 2 * sin(this.a1 - this.a2);
// num2 = this.a1_v * this.a1_v * this.r1 * (this.m1 + this.m2);
// num3 = g * (this.m1 + this.m2) * cos(this.a1);
// num4 = this.a2_v * this.a2_v * this.r2 * this.m2 * cos(this.a1 - this.a2);
// this.a2_a = (num1 * (num2 + num3 + num4)) / (this.r2 * d);
this.a1 += Math.PI/12;
}
}

16
clock/index.html Executable file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="https://www.iconsdb.com/icons/preview/white/circle-xxl.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dla Natalki</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="clock.js"></script>
</head>
<body>
</body>
</html>

106
clock/sketch.js Executable file
View File

@ -0,0 +1,106 @@
let pendulums = [];
let stop = true;
let t = 0;
let s = 1;
let st = true;
function setup() {
frameRate(144);
createCanvas(getViewport()[0], getViewport()[1]-4);
pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,7/6*0.5));
pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,6/6*0.5));
pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,5/6*0.5));
slider = createSlider(0, 10, 1);
button = createButton('refresh');
button.position(width / 2 - 40, 25);
button.mousePressed(buttonCall);
slider.position(width / 2 - 70, 0);
// pendulums.push(new Pendulum(width*2/4-width/8,height/2,width/1920 * 0.5));
// pendulums.push(new Pendulum(width*3/4-width/8,height/2,width/1920 * 0.5));
// pendulums.push(new Pendulum(width*4/4-width/8,height/2,width/1920 * 0.5));
for(let i = 0; i < pendulums.length; i++){
pendulums[i].show();
}
// slider = createSlider(0, 10, 1);
// slider.position(50, 0);
stroke(50);
textSize(width/1920 * 1.5 * 40);
}
function draw() {
clear();
background(240);
push();
stroke(50);
strokeWeight(width/1920 * 1.5 * 7);
//line((width/2),(height/7), (width/2),(height/6));
line((width/2)-(width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 10,height/2, (width/2)-(width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 30,height/2);
line((width/2)+(width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 10,height/2, (width/2)+(width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 30,height/2);
//line((width/2),height/7*6, (width/2),(height/6*5));
line((width/2),height/2 - (width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 10, (width/2),height/2-(width/1920 * 1.5 * 100 * 2) - width/1920 * 1.5 * 30);
line((width/2),height/2 + (width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 10, (width/2),height/2+(width/1920 * 1.5 * 100 * 2) + width/1920 * 1.5 * 30);
pop();
st = stop;
s = slider.value();
for(let i = 0; i < pendulums.length; i++){
if(!st)
for (let y = 0; y < s; y++) {
//pendulum.update();
pendulums[i].update();
}
pendulums[i].show();
}
if(!st)
t+=s;
text(Math.round(t/144/2 * 100 + Number.EPSILON ) / 100, width/1920 * 1.5 * 100, height/2-width/1920 * 1.5 * 40/2, 300, 100);
// strokeWeight(0);
// text(Math.ceil((a1 * 180 / Math.PI) - Math.PI / 2), -7.5, -15);
}
function buttonCall() {
for(let i = 0; i < pendulums.length; i++){
//pendulums[i].refresh();
pendulums = [];
t = 0;
pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,7/6*0.5));
pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,6/6*0.5));
pendulums.push(new Pendulum(width/2,height/2,width/1920 * 1.5,5/6*0.5));
}
}
function keyPressed() {
if (stop === false) {
stop = true;
} else {
stop = false;
}
}
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

108
dinosaurrGame/dino.js Executable file
View File

@ -0,0 +1,108 @@
class Dinosaur {
constructor(x, y, wd, ht) {
this.pos = new createVector(x, y);
this.x = x;
this.y = y;
this.wd = wd;
this.ht = ht;
this.speed = 10;
this.vel = 0;
this.grav = 1;
this.jmpfrc = 17;
this.counter = 0;
this.obs = [new Obstacle(this.x, this.y, 1920)];
this.lost = false;
};
update(c) {
this.speed += 0.001;
this.counter += this.speed;
if (this.counter >= 1000) {
this.obs.push(new Obstacle(this.x, this.y, 1700));
this.counter = 0;
}
if (this.pos.y == this.y) {
if (c == '1') {
this.wd = 50;
this.ht = 50;
this.vel = this.jmpfrc;
} else if(c == '0'){
this.wd = 75;
this.ht = 30;
this.vel = 0;
} else{
this.wd = 50;
this.ht = 50;
this.vel = 0;
}
} else if (this.pos.y > this.y) {
this.vel -= this.grav;
} else if (this.pos.y < this.y) {
this.pos.y = this.y;
}
this.pos.y += this.vel;
for (let i = 0; i < this.obs.length; i++) {
this.obs[i].update(this.speed);
this.obs[i].show();
}
if ((this.obs[0]) && (this.obs[0].pos.x <= -50)) {
this.obs.shift();
}
if (this.obs.length>0) {
for (let i = 0; i < this.obs.length; i++) {
if ((this.obs[i].pos.x - this.pos.x < this.wd)&&(this.obs[i].pos.x - this.pos.x > 0-this.obs[i].wd)) {
if(this.obs[i].pos.y + this.obs[i].ht - this.pos.y > 0){
this.lost = true;
}
}
}
}
}
show() {
push();
//transform();
rectMode(CORNER)
fill(200);
stroke(200);
strokeWeight(0);
rect(this.pos.x, mapY(this.pos.y + this.ht), this.wd, this.ht);
strokeWeight(2);
line(0, mapY(this.y), width, mapY(this.y));
pop();
for (let i = 0; i < this.obs.length; i++) {
this.obs[i].show();
}
}
}
class Obstacle {
constructor(x, y, dist) {
this.pos = createVector(x + dist + random(0,500), y);
this.wd = 30;
this.ht = 60;
};
update(spd) {
this.pos.x -= spd;
}
show() {
push();
rectMode(CORNER)
fill(200);
stroke(200);
strokeWeight(0);
rect(this.pos.x, mapY(this.pos.y + this.ht), this.wd, this.ht);
strokeWeight(2);
line(0, mapY(this.pos.y), width, mapY(this.pos.y));
pop();
}
}
function mapY(y) {
return map(y, 0, height, height, 0);
}

15
dinosaurrGame/index.html Executable file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome Dinosaur</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="dino.js"></script>
</head>
<body>
</body>
</html>

32
dinosaurrGame/sketch.js Executable file
View File

@ -0,0 +1,32 @@
let player;
let vk = '0';
function setup() {
createCanvas(1920, 880);
textSize(width / 6);
textAlign(CENTER, CENTER);
fill(220);
background(51);
player = new Dinosaur(250, 350, 50, 50);
}
function draw() {
clear();
background(51);
checkClick();
if (player.lost == false)
player.update(vk);
else
text('LOST',width/2,height/4);
player.show();
}
function checkClick() {
vk = null;
if (keyIsDown(UP_ARROW)) {
vk = '1';
} else if (keyIsDown(DOWN_ARROW)) {
vk = '0';
}
}

16
doublePendulum/index.html Executable file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="https://www.iconsdb.com/icons/preview/white/circle-xxl.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>double pendulum</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="pendulum.js"></script>
</head>
<body>
</body>
</html>

104
doublePendulum/pendulum.js Executable file
View File

@ -0,0 +1,104 @@
const g = 9.8 / (144 * 144);
let res = 20/10;
class Pendulum {
constructor(xoffset, yoffset, scale) {
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = 0;
this.m1 = 2;
this.m2 = 2;
this.a1 = Math.PI / 2 + random(-Math.PI, Math.PI) / 16 + Math.PI/4;
this.a2 = Math.PI + random(-Math.PI, Math.PI) / 16;
this.r1 = 2;
this.r2 = 2;
this.a1_v = 0;
this.a2_v = 0;
this.a1_a = 0;
this.a2_a = 0;
this.xoffset = xoffset;
this.yoffset = yoffset;
this.scale = scale;
this.poslog = [];
this.fc = 0;
this.setPos();
}
update() {
this.a1_v += this.a1_a;
this.a2_v += this.a2_a;
this.a1 += this.a1_v;
this.a2 += this.a2_v;
this.updateA();
this.setPos();
if ((this.fc % res === 0) && (this.fc > 144*3)) {
this.logPos();
}
}
show() {
this.fc++;
push();
translate(this.xoffset, this.yoffset);
strokeWeight(20 * this.scale);
point(0, 0);
strokeWeight(40 * this.scale);
point(this.x1, this.y1);
point(this.x2, this.y2);
strokeWeight(8 * this.scale);
line(0, 0, this.x1, this.y1);
line(this.x1, this.y1, this.x2, this.y2);
pop();
this.showTrail();
}
setPos() {
this.x1 = sin(this.a1) * this.r1 * 100 * this.scale;
this.y1 = cos(this.a1) * this.r1 * 100 * this.scale;
this.x2 = this.x1 + sin(this.a2) * this.r2 * 100 * this.scale;
this.y2 = this.y1 + cos(this.a2) * this.r2 * 100 * this.scale;
}
updateA() {
let d = 2 * this.m1 + this.m2 - this.m2 * cos(2 * this.a1 - 2 * this.a2);
let num1 = -g * (2 * this.m1 + this.m2) * sin(this.a1);
let num2 = -this.m2 * g * sin(this.a1 - 2 * this.a2);
let num3 = -2 * sin(this.a1 - this.a2) * this.m2;
let num4 = this.a2_v * this.a2_v * this.r2 + this.a1_v * this.a1_v * this.r1 * cos(this.a1 - this.a2);
this.a1_a = (num1 + num2 + num3 * num4) / (this.r1 * d);
num1 = 2 * sin(this.a1 - this.a2);
num2 = this.a1_v * this.a1_v * this.r1 * (this.m1 + this.m2);
num3 = g * (this.m1 + this.m2) * cos(this.a1);
num4 = this.a2_v * this.a2_v * this.r2 * this.m2 * cos(this.a1 - this.a2);
this.a2_a = (num1 * (num2 + num3 + num4)) / (this.r2 * d);
}
logPos() {
if(this.poslog.length<144/res*10)
this.poslog.push(createVector(this.x2, this.y2));
else{
this.poslog.shift();
this.poslog.push(createVector(this.x2, this.y2));
}
}
showTrail() {
push();
translate(this.xoffset, this.yoffset);
strokeWeight(2 * this.scale);
stroke(33);
noFill();
beginShape();
for (let i = 0; i < this.poslog.length; i++) {
vertex(this.poslog[i].x, this.poslog[i].y);
}
endShape();
pop();
}
}

65
doublePendulum/sketch.js Executable file
View File

@ -0,0 +1,65 @@
let pendulums = [];
let stop = true;
function setup() {
frameRate(144);
createCanvas(getViewport()[0], getViewport()[1]-4);
pendulums.push(new Pendulum(width/4-width/8,height/2,width/1920 * 0.5));
pendulums.push(new Pendulum(width*2/4-width/8,height/2,width/1920 * 0.5));
pendulums.push(new Pendulum(width*3/4-width/8,height/2,width/1920 * 0.5));
pendulums.push(new Pendulum(width*4/4-width/8,height/2,width/1920 * 0.5));
for(let i = 0; i < pendulums.length; i++){
pendulums[i].show();
}
// slider = createSlider(0, 10, 1);
// slider.position(50, 0);
stroke(50);
}
function draw() {
clear();
background(240);
for(let i = 0; i < pendulums.length; i++){
if(!stop)
pendulums[i].update();
pendulums[i].show(frameCount);
}
// strokeWeight(0);
// text(Math.ceil((a1 * 180 / Math.PI) - Math.PI / 2), -7.5, -15);
}
function keyPressed() {
if (stop === false) {
stop = true;
} else {
stop = false;
}
}
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

14
drawingCircles/index.html Executable file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>

105
drawingCircles/sketch.js Executable file
View File

@ -0,0 +1,105 @@
let circles = [];
function setup() {
createCanvas(1920,880);
background(51);
dl = new drawline();
lengthSlider = createSlider(1,150,10);
sizeSlider = createSlider(1,300,100);
clearButton = createButton("clear");
}
function draw() {
const l = lengthSlider.value();
const s = sizeSlider.value();
background(51);
dl.update(s, l);
for (let p of circles) {
p.show();
}
//print(clearButton.value());
clearButton.mousePressed(cleararray);
}
function keyPressed() {
if(keyCode===32){
cleararray();
//background(51);
}
else
print("not");
return false; // prevent any default behaviour
}
function cleararray(){
circles = [];
}
class drawline {
constructor() {
var dir = [1, 1, 1];
var color = [142, 212, 111];
this.update = function (size, length) {
this.size = size;
this.length = length;
if (color[0] > 255)
dir[0] = 0;
if (color[0] < 50)
dir[0] = 1;
if (color[1] > 255)
dir[1] = 0;
if (color[1] < 50)
dir[1] = 1;
if (color[2] > 255)
dir[2] = 0;
if (color[2] < 50)
dir[2] = 1;
if (dir[0] == 1)
color[0] += random(1, 5);
else
color[0] -= random(1, 5);
if (dir[1] == 1)
color[1] += random(1, 5);
else
color[1] -= random(1, 5);
if (dir[2] == 1)
color[2] += random(1, 5);
else
color[2] -= random(1, 5);
//print(color[0] + ' ' + color[1] + ' ' + color[2]);
stroke(255, 255, 255);
//fill(color[0], color[1], color[2]);
if ((mouseIsPressed)&&(mouseY<=880)){
if(circles.length>=length){
circles.shift();
circles.push(new circle(size, size, color[0],color[1],color[2], mouseX, mouseY));
}
else{
circles.push(new circle(size, size, color[0],color[1],color[2], mouseX, mouseY));
}
}
};
}
}
class circle{
constructor(sizex, sizey, r, g, b, mx, my){
this.sizex = sizex;
this.sizey = sizey;
this.r = r;
this.g = g;
this.b = b;
this.mx = mx;
this.my = my;
}
show(){
fill(this.r,this.g,this.b);
ellipse(this.mx,this.my,this.sizex,this.sizey);
}
}

127
fourierSeries/drawing.js Executable file
View File

@ -0,0 +1,127 @@
let res = 5;
const pi = Math.PI;
const p = 2;
class Drawing {
constructor(xoffset, yoffset, scale, num) {
this.t = 0;
this.n = num;
this.x = [0];
this.y = [0];
this.a = [0];
this.r = [0];
this.xoffset = xoffset;
this.yoffset = yoffset;
this.scale = scale;
this.poslog = [];
this.fc = 0;
this.refresh();
this.setPos();
}
refresh() {
this.t = 0;
this.x[0] = 0;
this.y[0] = 0;
for (let i = 0; i < this.n; i++) {
this.x[i + 1] = this.x[i];
this.y[i + 1] = this.y[i];
this.a[i] = 0;
this.r[i] = random(0.5, 3.5);
}
this.x = this.x.slice(0, this.n - 1);
this.y = this.y.slice(0, this.n - 1);
this.poslog = [];
this.setPos();
}
update() {
this.t += 1 / 144;
for (let i = 0; i < this.n; i++) {
let m = i * 2 + 1;
this.a[i] = sin(m * this.t);
this.r[i] = 4/(m*pi);
}this.setPos();
if (this.poslog.length >= 1) {
if (Math.abs(this.x[this.n - 1] - this.poslog[this.poslog.length - 1].x) > 5) {
this.logPos();
}
} else
this.logPos();
}
fx(x, n) {
let a = 0;
if (n % 2 == 0) {
let b = 0;
} else {
let b = (4) / (n * pi);
}
let result = 0;
let l = pi;
for (let i = 1; i <= n; i++) {
result += sin((2*i-1)*x)/(2*i-1);
}
return result;
}
show() {
this.fc++;
push();
translate(this.xoffset / 2, this.yoffset);
strokeWeight(10 * this.scale);
point(0, 0);
strokeWeight(10 * this.scale);
for (let i = 0; i < this.n; i++) {
point(this.x[i], this.y[i]);
}
strokeWeight(4 * this.scale);
line(0, 0, this.x[0], this.y[0]);
for (let i = 1; i < this.n; i++) {
line(this.x[i - 1], this.y[i - 1], this.x[i], this.y[i]);
}
pop();
this.showTrail();
}
setPos() {
this.x[0] = cos(this.a[0]*2*pi) * this.r[0] * 100 * this.scale;
this.y[0] = sin(this.a[0]*2*pi) * this.r[0] * 100 * this.scale;
for (let i = 1; i < this.n; i++) {
this.x[i] = this.x[i - 1] + cos(this.a[i]) * this.r[i] * 100 * this.scale;
this.y[i] = this.y[i - 1] + sin(this.a[i]) * this.r[i] * 100 * this.scale;
}
}
logPos() {
if (this.poslog.length < 144 / this.scale * 10) {
//this.poslog.push(createVector(this.t, this.y[this.n - 1]));
this.poslog.push(createVector(this.t, 100 * this.fx(map(this.t, 0, p*pi, -pi, pi), 101)));
} else {
this.poslog.shift();
//this.poslog.push(createVector(this.t, this.y[this.n - 1]));
this.poslog.push(createVector(this.t, 100 * this.fx(map(this.t, 0, p*pi, -pi, pi), 101)));
}
}
showTrail() {
push();
translate(this.xoffset / 2, this.yoffset);
strokeWeight(3 * this.scale);
stroke(33);
noFill();
line(this.scale * 500, this.scale * 500, this.scale * 500, -this.scale * 500);
beginShape();
for (let i = 0; i < this.poslog.length; i++) {
vertex(-this.poslog[i].x * 50 + this.t * 50 + this.scale * 500, this.poslog[i].y);
}
endShape();
pop();
}
}

16
fourierSeries/index.html Executable file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="https://www.iconsdb.com/icons/preview/white/circle-xxl.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fourier Series</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="drawing.js"></script>
</head>
<body>
</body>
</html>

70
fourierSeries/sketch.js Executable file
View File

@ -0,0 +1,70 @@
let pendulum;
let stop = true;
function setup() {
frameRate(144);
createCanvas(getViewport()[0], getViewport()[1] - 4);
pendulum = new Drawing(width / 2, height / 2, width / 1920 * 0.5, 4);
slider = createSlider(0, 10, 1);
button = createButton('refresh');
button.position(width / 2 - 40, 25);
button.mousePressed(buttonCall);
slider.position(width / 2 - 70, 0);
stroke(50);
}
function draw() {
clear();
background(240);
if (!stop) {
for (let i = 0; i < slider.value(); i++) {
pendulum.update();
}
}
pendulum.show();
// strokeWeight(0);
// text(Math.ceil((a1 * 180 / Math.PI) - Math.PI / 2), -7.5, -15);
}
function buttonCall() {
pendulum.refresh();
}
function keyPressed() {
if (keyCode === 32) {
if (stop === false) {
stop = true;
} else {
stop = false;
}
}
}
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

233
gridDraw/index.html Executable file
View File

@ -0,0 +1,233 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAABvAAAAbwHxotxDAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAE5QTFRF////1VVV20lt30Bg2E5i20lb2U1Z30pg20lb301g3ktg3ktf3ktg3Ulf3klf3Ute3Upg3kpf3Ute3Upf3Utf3Elf3Upf3klf3Upf3UpfZuJdUQAAABl0Uk5TAAYHCA0OFBgcKD1OVVtzd5CRnaPU5evs+ptmvhUAAABQSURBVBhXdc9HEoAwDANAhRpKCoQS/f+jXBEefNwZ2xIApHPDe/pKTiIH71agWwdfihfLZBaIZBRwIbhln8XGyqv5B7NijupbE+wb3ZaT+g98cQSnpRYYMQAAAABJRU5ErkJggg" />
<title>Grid Draw</title>
<style>
body {
background:0%;
padding: 0;
margin: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script>
let grid;
var dat = new ArrayBuffer();
var connection = new WebSocket('ws://' + 'dawidpietrykowski.ddns.net' + ':81/', ['arduino']);
window.addEventListener('beforeunload', function(event) {
connection.send('S');
});
connection.binaryType = 'arraybuffer';
var buffer;
connection.onopen = function () {
connection.send('Connect ' + new Date());
};
connection.onerror = function (error) {
console.log('WebSocket Error ', error);
};
connection.onmessage = function (evt) {
console.log(evt.data);
dat = new Uint8Array(evt.data);
grid.updateGrid(dat);
grid.visible = true;
};
connection.onclose = function () {
console.log('WebSocket connection closed');
};
function setup() {
createCanvas(getViewport()[0], getViewport()[1] - 5);
background(50);
frameRate(30);
grid = new Grid(min(width, height) * 0.8);
console.log(width, height);
}
let lastpos = [-1, -1];
let last_pressed = false;
var last_data = [-1];
function comp(a, b){
if(a.length != b.length)
return false;
for(let i = 0; i < a.length; i++)
if(a[i] != b[i])
return false;
return true;
}
function draw() {
clear();
//background(240);
background(100);
if(mouseIsPressed){
let pos = grid.getCell(mouseX, mouseY);
console.log(pos);
if(pos[0] >= 0 && pos[0] <= 7 && pos[1] >= 0 && pos[1] <= 7)
if(pos[0] != lastpos[0] || pos[1] != lastpos[1] || !last_pressed){
grid.updateCell(mouseX, mouseY);
connection.send(grid.getBinArray());
lastpos = pos;
}
}
grid.show();
last_pressed = mouseIsPressed;
}
class Grid {
constructor(scale) {
this.xoffset = (width / 2) - (scale / 2);
this.yoffset = (height - scale) / 2;
console.log(this.xoffset, this.yoffset);
this.scale = scale;
this.resolution = 8;
this.grid_data = [];
let last = false;
this.visible = false;
for (let i = 0; i < this.resolution; i ++){
this.grid_data.push([]);
for (let j = 0; j < this.resolution; j ++){
this.grid_data[i].push(last);
last = !last;
}
last = !last;
}
}
refresh(){
for (let i = 0; i < this.resolution; i ++){
for (let j = 0; j < this.resolution; j ++){
this.grid_data[i][j] = false;
}
}
}
getCell(X, Y){
X -= this.xoffset;
Y -= this.yoffset;
let x_pos = (X / this.scale) * this.resolution;
let y_pos = (Y / this.scale) * this.resolution;
x_pos = Math.ceil(x_pos);
y_pos = Math.ceil(y_pos);
x_pos--;
y_pos--;
//console.log(x_pos, y_pos);
return [y_pos, x_pos];
}
updateCell(X, Y){
let pos = this.getCell(X, Y);
this.grid_data[pos[0]][pos[1]] = !this.grid_data[pos[0]][pos[1]];
}
show() {
if(!this.visible)
return;
//push();
translate(this.xoffset, this.yoffset);
//translate(10, 100);
ellipseMode(CORNER);
noStroke();
for (let i = 0; i < this.resolution; i ++){
for (let j = 0; j < this.resolution; j ++){
if(this.grid_data[i][j])
fill(255, 50, 50);
else
fill(240, 240, 240);
//square(mW(j/this.resolution),mH(i/this.resolution)-this.scale/this.resolution,mW(this.resolution));
//square(mV(j/this.resolution, this.scale),mV(i/this.resolution, this.scale), (this.scale / this.resolution));
ellipse(mV(j/this.resolution, this.scale),mV(i/this.resolution, this.scale), (this.scale / this.resolution))
}
}
//pop();
}
getBinArray(){
let arr = [];
for (let i = 0; i < this.resolution; i ++){
arr[i] = 0;
for (let j = 0; j < this.resolution; j ++){
arr[i] |= this.grid_data[i][j] << this.resolution - j - 1;
}
}
return Uint8Array.from(arr);
}
updateGrid(data){
for (let i = 0; i < this.resolution; i ++){
for (let j = 0; j < this.resolution; j ++){
console.log((data[i] >>> this.resolution - j - 1) && 1);
this.grid_data[i][j] = ((data[i] >>> this.resolution - j - 1) & 1)
//arr[i] |= this.grid_data[i][j] << this.resolution - j - 1;
}
}
}
}
function mV(val, val2) {
return map(val, 0, 1, 0, val2);
}
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}
</script>
</head>
<body>
</body>
</html>

24
linearRegressionTF/index.html Executable file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>linear regression</title>
<style>
body {
background:0%;
padding: 0;
margin: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.1.2/tf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>

122
linearRegressionTF/sketch.js Executable file
View File

@ -0,0 +1,122 @@
var xs = [];
var ys = [];
var vars = [];
var deg = 7;
const optimizer = tf.train.adam(0.4);
function setup() {
createCanvas(1920, 850);
background(51);
frameRate(144);
//learningRateSlider = createSlider(1, 100, 35);
res = createSlider(0, 100, 10);
// a = createSlider(0, 100, 100);
// v = createSlider(0, 100, 0);
// for(i = 0; i<deg; i++){
// vars[i] = random(-1,1);
// }
a = tf.variable(tf.scalar(random(-1,1)));
b = tf.variable(tf.scalar(random(-1,1)));
c = tf.variable(tf.scalar(random(-1,1)));
d = tf.variable(tf.scalar(random(-1,1)));
e = tf.variable(tf.scalar(random(-1,1)));
f = tf.variable(tf.scalar(random(-1,1)));
g = tf.variable(tf.scalar(random(-1,1)));
tf.setBackend('cpu');
//translate(-height,0);
}
function draw() {
clear();
background(51);
//const learningRate = learningRateSlider.value() * 0.01;
if (xs.length >= 1) {
const ystf = tf.tensor1d(ys);
optimizer.minimize(() => loss(predict(xs), ystf));
//print(loss(predict(xs), ystf).bufferSync().get(0));
drawLine(res.value());
tf.dispose(ystf);
}
drawPoins();
}
function predict(xst) {
//y = ax3 + bx2 + cx + d
x = tf.tensor1d(xst);
// result = tf.tensor1d([0]).add(vars[0]);
// for(let i = 1; i<deg; i++){
// result.add(x.pow(tf.scalar(i)).mul(vars[i]));
// }
result = (x.pow(tf.scalar(6)).mul(a))
.add(x.pow(tf.scalar(5)).mul(b))
.add(x.pow(tf.scalar(4)).mul(c))
.add(x.pow(tf.scalar(3)).mul(d))
.add(x.square().mul(e))
.add(x.mul(f))
.add(g);
return result;
}
function loss(pred, labels) {
return pred.sub(labels).square().mean();
}
function drawLine(resolution) {
tf.tidy(() => {
push();
stroke(255);
strokeWeight(4);
/*
let r = 1 / resolution;
let y = predict([0]).bufferSync();
y0 = y.get(0);
tf.dispose(y);
for (let i = 0; i < 4; i++) {
let y = predict([r * (i + 1)]).bufferSync();
y1 = y.get(0);
tf.dispose(y);
line(mW(r * (i)), mH(y0), mW(r * (i + 1)), mH(y1));
y0 = y1;
}*/
let yss;
noFill();
beginShape();
for (let i = 0; i <= resolution; i++) {
let y = predict([(1/resolution)*i]).bufferSync();
yss = y.get(0);
curveVertex(mW((1/resolution)*i),mH(yss));
tf.dispose(y);
}
endShape();
pop();
});
}
function mouseClicked() {
if (mouseY <= height && mouseX <= width) {
xs.push(map(mouseX, 0, width, 0, 1));
ys.push(map(mouseY, 0, height, 1, 0));
// xs[0] = map(mouseX, 0, width, 0, 1);
// ys[0] = map(mouseY, 0, height, 1, 0);
}
}
function mH(val) {
return map(val, 0, 1, height, 0);
}
function mW(val) {
return map(val, 0, 1, 0, width);
}
function drawPoins() {
stroke(230);
strokeWeight(5);
for (let i = 0; i < xs.length; i++) {
point(map(xs[i], 0, 1, 0, width), map(ys[i], 0, 1, height, 0));
}
}

16
pendulumDrawing/index.html Executable file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="">
<head>
<link rel="icon" href="https://www.iconsdb.com/icons/preview/white/circle-xxl.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing shapes</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="pendulum.js"></script>
</head>
<body>
</body>
</html>

118
pendulumDrawing/pendulum.js Executable file
View File

@ -0,0 +1,118 @@
const g = 9.8 / (144 * 144);
let res = Math.ceil(20/20);
class Pendulum {
constructor(xoffset, yoffset, scale) {
this.x1 = 0;
this.y1 = 0;
this.x2 = 0;
this.y2 = 0;
this.x3 = 0;
this.y3 = 0;
this.m1 = 2;
this.m2 = 2;
this.a1 = Math.PI;
this.a2 = Math.PI;
this.a3 = Math.PI;
this.r1 = random(0.5,3.5);
this.r2 = random(0.5,3.5);
this.r3 = 2.5;
this.a1_v = Math.PI/64 * random(-1,1);
this.a2_v = Math.PI/64 * random(-1,1);
this.a3_v = Math.PI/64 * random(-1,1);
this.xoffset = xoffset;
this.yoffset = yoffset;
this.scale = scale;
this.poslog = [];
this.fc = 0;
this.setPos();
}
refresh(){
this.a1_v = Math.PI/64 * random(-1,1);
this.a2_v = Math.PI/64 * random(-1,1);
this.r1 = random(0.5,3.5);
this.r2 = random(0.5,3.5);
this.poslog = [];
}
update() {
this.a1 += this.a1_v;
this.a2 += this.a2_v;
// this.a3 += this.a3_v;
this.setPos();
if (this.fc % res === 0) {
this.logPos();
}
}
show() {
this.fc++;
push();
translate(this.xoffset, this.yoffset);
strokeWeight(10 * this.scale);
point(0, 0);
strokeWeight(20 * this.scale);
point(this.x1, this.y1);
point(this.x2, this.y2);
point(this.x3, this.y3);
strokeWeight(4 * this.scale);
line(0, 0, this.x1, this.y1);
line(this.x1, this.y1, this.x2, this.y2);
//line(this.x2, this.y2, this.x3, this.y3);
pop();
this.showTrail();
}
setPos() {
this.x1 = sin(this.a1) * this.r1 * 100 * this.scale;
this.y1 = cos(this.a1) * this.r1 * 100 * this.scale;
this.x2 = this.x1 + sin(this.a2) * this.r2 * 100 * this.scale;
this.y2 = this.y1 + cos(this.a2) * this.r2 * 100 * this.scale;
// this.x3 = this.x2 + sin(this.a3) * this.r3 * 100 * this.scale;
// this.y3 = this.y2 + cos(this.a3) * this.r3 * 100 * this.scale;
}
updateA() {
let d = 2 * this.m1 + this.m2 - this.m2 * cos(2 * this.a1 - 2 * this.a2);
let num1 = -g * (2 * this.m1 + this.m2) * sin(this.a1);
let num2 = -this.m2 * g * sin(this.a1 - 2 * this.a2);
let num3 = -2 * sin(this.a1 - this.a2) * this.m2;
let num4 = this.a2_v * this.a2_v * this.r2 + this.a1_v * this.a1_v * this.r1 * cos(this.a1 - this.a2);
this.a1_a = (num1 + num2 + num3 * num4) / (this.r1 * d);
num1 = 2 * sin(this.a1 - this.a2);
num2 = this.a1_v * this.a1_v * this.r1 * (this.m1 + this.m2);
num3 = g * (this.m1 + this.m2) * cos(this.a1);
num4 = this.a2_v * this.a2_v * this.r2 * this.m2 * cos(this.a1 - this.a2);
this.a2_a = (num1 * (num2 + num3 + num4)) / (this.r2 * d);
}
logPos() {
if(this.poslog.length<144/res*100)
this.poslog.push(createVector(this.x2, this.y2));
else{
this.poslog.shift();
this.poslog.push(createVector(this.x2, this.y2));
}
}
showTrail() {
push();
translate(this.xoffset, this.yoffset);
strokeWeight(3 * this.scale);
stroke(33);
noFill();
beginShape();
for (let i = 0; i < this.poslog.length; i++) {
vertex(this.poslog[i].x, this.poslog[i].y);
}
endShape();
pop();
}
}

BIN
pendulumDrawing/pnd.zip Executable file
View File

Binary file not shown.

68
pendulumDrawing/sketch.js Executable file
View File

@ -0,0 +1,68 @@
let pendulum;
let stop = true;
function setup() {
frameRate(144);
createCanvas(getViewport()[0], getViewport()[1] - 4);
pendulum = new Pendulum(width / 2, height / 2, width / 1920 * 0.5);
slider = createSlider(0, 10, 4);
button = createButton('refresh');
button.position(width/2-40, 25);
button.mousePressed(buttonCall);
slider.position(width / 2 - 70, 0);
stroke(50);
}
function draw() {
clear();
background(240);
if (!stop) {
for (let i = 0; i < slider.value(); i++) {
pendulum.update();
}
}
pendulum.show();
// strokeWeight(0);
// text(Math.ceil((a1 * 180 / Math.PI) - Math.PI / 2), -7.5, -15);
}
function buttonCall(){
pendulum.refresh();
}
function keyPressed() {
if (stop === false) {
stop = true;
} else {
stop = false;
}
}
function getViewport() {
var viewPortWidth;
var viewPortHeight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined' &&
typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}
// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

3
rayCasting/display.js Executable file
View File

@ -0,0 +1,3 @@
class Display{
}

26
rayCasting/index.html Executable file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="sketch.js"></script>
<script src="ray.js"></script>
<script src="wall.js"></script>
<script src="display.js"></script>
<script src="player.js"></script>
</head>
<body>
</body>
</html>

82
rayCasting/player.js Executable file
View File

@ -0,0 +1,82 @@
class Player {
constructor(position) {
this.position = position;
this.rays = [];
this.distances = [];
this.fov = 90;
this.angle = 0;
}
show() {
fill(100);
noStroke();
ellipse(this.position.x, this.position.y, 10);
}
update() {
const sight = sightSlider.value() * 10;
const fov = fovSlider.value();
const rotationSpeed = rotationSpeedSlider.value();
const velocity = velocitySlider.value();
if (keyIsDown(LEFT_ARROW)) {
this.angle -= rotationSpeed;
}
if (keyIsDown(RIGHT_ARROW)) {
this.angle += rotationSpeed;
}
if (keyIsDown(UP_ARROW)) {
this.position = angleToVector(this.position.x, this.position.y, this.angle, velocity);
}
if (keyIsDown(DOWN_ARROW)) {
this.position = angleToVector(this.position.x, this.position.y, this.angle, -velocity);
}
this.rays = [];
for (let i = 0 - floor(fov / 2); i < floor(fov / 2); i=i+0.5) {
this.rays.push(new Ray(this.position.x, this.position.y, radians(i + this.angle), sight));
}
for (let r of this.rays) {
for (let w of walls) {
r.cast(w);
}
r.show();
}
this.distances = [];
for(let i = 0; i<this.rays.length; i++){
this.distances[i] = this.rays[i].cast();
}
display(this.distances);
}
}
function angleToVector(xCoord, yCoord, angle, length) {
length = typeof length != 'undefined' ? length : 10;
angle = angle * Math.PI / 180; // if you're using degrees instead of radians
return createVector(length * Math.cos(angle) + xCoord, length * Math.sin(angle) + yCoord);
}
function display(distances) {
let c = color(0, 0, 0)
fill(c);
rect(961,0,960,850);
fill(200);
stroke(200);
let length = distances.length;
let width = ceil(960/length);
for(let i = 0; i<length; i++){
if(distances[i]){
let height = 100000 * (1/distances[i]);
c = color(map(1/distances[i],0,0.01,0,255));
fill(c);
noStroke();
rect(960 + width*i, 430 - height/2,width,height);
}
}
}

84
rayCasting/ray.js Executable file
View File

@ -0,0 +1,84 @@
class Ray {
constructor(xorigin, yorigin, angle, sight) {
this.origin = createVector(xorigin, yorigin);
this.direction = p5.Vector.fromAngle(angle); //createVector(xdirection, ydirection);
this.length = sight;
this.hit = 0;
this.intersections = [];
this.closestIntersection;
}
show() {
if (this.hit >= 1) {
//stroke(150, 20, 20);s
stroke(200);
line(this.origin.x, this.origin.y, this.closestIntersection.x, this.closestIntersection.y);
} else {
stroke(200);
line(this.origin.x, this.origin.y, this.origin.x + this.direction.x * this.length, this.origin.y + this.direction.y * this.length);
//line(this.origin.x, this.origin.y, mouseX, mouseY);
}/*
if (this.hit >= 1 && this.closestIntersection) {
fill(51);
noStroke();
ellipse(this.closestIntersection.x, this.closestIntersection.y, 5, 5);
}*/
}
cast(wall) {
if (wall) {
const x1 = this.origin.x;
const y1 = this.origin.y;
const x2 = this.origin.x + this.direction.x * this.length;
const y2 = this.origin.y + this.direction.y * this.length;
//const x2 = mouseX;
//const y2 = mouseY;
const x3 = wall.a.x;
const y3 = wall.a.y;
const x4 = wall.b.x;
const y4 = wall.b.y;
const den = ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4));
if (den == 0) {
return;
}
const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / den;
const u = -((x1 - x2) * (y1 - y3) - (y1 - y2) * (x1 - x3)) / den;
if (t >= 0 && t <= 1 && u >= 0 && u <= 1) {
this.hit++;
this.intersections.push(createVector(x1 + t * (x2 - x1), y1 + t * (y2 - y1)));
}
this.distance = Infinity;
if (this.intersections && this.intersections.length) {
if (this.hit) {
for (let i = 0; i < this.intersections.length; i++) {
if (p5.Vector.dist(createVector(x1, y1), this.intersections[i]) < this.distance) {
this.closestIntersection = this.intersections[i];
this.distance = p5.Vector.dist(createVector(x1, y1), this.intersections[i])
}
}
}
}
} else {
if (this.hit >= 1)
return this.distance;
else
return null;
}
}
}
function distanceFromVectors(v1, v2) {
//var distance = abs(v1.x - v2.x) + abs(v1.y - v2.y)
var distance = sqrt(sq(v1.x - v2.x) + sq(v1.y - v2.y));
return distance;
}

88
rayCasting/sketch.js Executable file
View File

@ -0,0 +1,88 @@
var pause = false;
var drawing = true;
var doing = false;
var x1, y1;
function setup() {
createCanvas(1920, 850);
background(51);
frameRate(144);
walls = [];
var checkbox;
var drawingbox;
player = new Player(createVector(400, 450));
preview = new Wall(100,100,200,200);
level = new Map();
checkbox = createCheckbox('pause', false);
drawingbox = createCheckbox('drawing', true);
checkbox.changed(pauseCheck);
drawingbox.changed(drawCheck);
sightSlider = createSlider(1, 100, 100);
fovSlider = createSlider(1, 360, 90);
velocitySlider = createSlider(1, 10, 3);
rotationSpeedSlider = createSlider(1, 10, 1);
}
function draw() {
clear();
background(51);
if (!pause) {
if (!drawing) {
background(51);
level.show();
player.update();
player.show();
} else {
if (doing === true) {
preview = new Wall(x1, y1,mouseX, mouseY);
preview.show();
}
}
}
for (let w of walls) {
w.show();
}
}
function mouseClicked() {
if (drawing && mouseY <= 850) {
if (doing === false) {
doing = true;
x1 = mouseX;
y1 = mouseY;
} else {
walls.push(new Wall(x1, y1, mouseX, mouseY));
doing = false;
}
}
}
function pauseCheck() {
if (this.checked()) {
//console.log('Checking!');
pause = true;
} else {
//console.log('Unchecking!');
pause = false;
}
}
function drawCheck() {
if (this.checked()) {
//console.log('Checking!');
drawing = true;
} else {
//console.log('Unchecking!');
drawing = false;
}
}
class Map {
constructor() {};
show() {
for (let w of walls) {
w.show();
}
}
}

13
rayCasting/wall.js Executable file
View File

@ -0,0 +1,13 @@
class Wall {
constructor(ax, ay, bx, by) {
this.a = createVector(ax, ay);
this.b = createVector(bx, by);
}
show() {
stroke(255);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}

6
textColorTF/data.js Executable file
View File

File diff suppressed because one or more lines are too long

27
textColorTF/index.html Executable file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colors neural network</title>
<style>
body {
background:0%;
padding: 0;
margin: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tensorflow/1.1.2/tf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/FileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="sketch.js"></script>
<script src="data.js"></script>
</head>
<body>
</body>
</html>

172
textColorTF/sketch.js Executable file
View File

@ -0,0 +1,172 @@
var history;
let resolution = 50;
var xs, ys, nn, result;
var inX = [];
var inY = [];
let x = [];
let y = [];
var xjson, yjson;
var cl;
var done = 0;
const txt = 'Vestibulum porttitor convallis sem ut dictum. Sed auctor, libero ut venenatis tristique, urna tellus ornare nisi, sed imperdiet justo turpis laoreet libero. Nullam blandit dignissim elit, et pretium sem feugiat nec. Aliquam enim lectus, feugiat in mi in, semper suscipit odio. Vestibulum ante ipsum primis in faucibus orci luctus et.';
var dataTT;
var training = false;
var stop = false;
let weights = [];
let biases = [];
function setup() {
createCanvas(1920, 933);
background(50);
frameRate(1);
//learningRateSlider = createSlider(1, 100, 35);
//a = tf.variable(tf.scalar(random(-1,1)));
dataTT = new dataToTrain();
tf.setBackend('cpu');
nn = tf.sequential();
const optimizer = tf.train.adamax();
var hidden1 = tf.layers.dense({
units: 6,
inputShape: [3],
activation: 'sigmoid',
name: 'hidden1'
});
var hidden2 = tf.layers.dense({
units: 6,
activation: 'sigmoid',
name: 'hidden2'
});
var output = tf.layers.dense({
units: 1,
activation: 'sigmoid',
name: 'output'
});
nn.add(hidden1);
nn.add(hidden2);
nn.add(output);
nn.compile({
optimizer: optimizer,
loss: 'meanSquaredError'
});
cl = color(random(0, 255), random(0, 255), random(0, 255));
textSize(36);
textAlign(CENTER, CENTER);
retData();
xs = tf.tensor2d(inX);
ys = tf.tensor1d(inY);
trainNN();
}
function draw() {
if (training) {
//trainNN();
}
//print(tf.memory().numTensors);
}
async function trainNN() {
//print(o.history.loss[0]);
if (!stop) {
let o = await nn.fit(xs, ys, {
epochs: 10,
shuffle: true
});
//print(o.history.loss[0]);
clear();
text(floor(o.history.loss[0]*10000)/10000,width/5,width/10)
setTimeout(trainNN, 0);
}
//o.dispose();
}
function keyPressed() {
if (keyCode === LEFT_ARROW) {
inX.push(0);
inY.push([cl.levels[0], cl.levels[1], cl.levels[2]]);
cl = color(random(0, 255), random(0, 255), random(0, 255));
done++;
} else if (keyCode === RIGHT_ARROW) {
inX.push(1);
inY.push([cl.levels[0], cl.levels[1], cl.levels[2]]);
cl = color(random(0, 255), random(0, 255), random(0, 255));
done++;
} else if (keyCode === UP_ARROW) {
saveData();
} else if (keyCode === DOWN_ARROW) {
//retData();
}
}
function getWeights(){
//let all = nn.getWeights()[0].arraySync();
weights = [];
biases = [];
for(let i = 0; i<6; i++){
if(i%2==0){
weights.push(nn.getWeights()[i].arraySync());
}
if(i%2!=0){
biases.push(nn.getWeights()[i].arraySync());
}
}
}
function saveData() {
xjson = JSON.stringify(inX);
yjson = JSON.stringify(inY);
download(xjson, 'xs.txt', 'text/plain');
download(yjson, 'ys.txt', 'text/plain');
}
function retData() {
inX = dataTT.xs;
inY = dataTT.ys;
}
function download(content, fileName, contentType) {
var a = document.createElement("a");
var file = new Blob([content], {
type: contentType
});
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
function drawText() {
background(cl);
fill(0);
rectMode(CENTER);
//text(txt,width/4, height/2,width/8,(width/8)*3);
text(txt, width / 8 * 2, height / 2, (width / 8) * 3, height / 3);
fill(255);
//text(txt,(width/4)*3, height/2,(width/8)*5,(width/8)*7);
text(txt, width / 8 * 6, height / 2, (width / 8) * 3, height / 3);
text(done, width / 2, height / 1.2, 200, 300);
}
function drawColor(){
cl = color(random(0, 255), random(0, 255), random(0, 255));
let outcome = nn.predict(tf.tensor2d([[cl.levels[0], cl.levels[1], cl.levels[2]]])).bufferSync().get(0);
rectMode(CENTER);
if(outcome<0.5)
fill(0);
else
fill(255);
background(cl);
text(txt, width / 2, height / 2, (width / 8) * 5 , height / 3);
setTimeout(drawColor, 2000);
}