Initial commit
This commit is contained in:
Dawid Pietrykowski
commit
25a12f221e
38
20dots/animation.js
Executable file
38
20dots/animation.js
Executable 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
26
20dots/dot.js
Executable 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
16
20dots/index.html
Executable 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
50
20dots/sketch.js
Executable 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
24
XORinTF/index.html
Executable 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
110
XORinTF/sketch.js
Executable 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
28
carDrivingNeuralNet/index.html
Executable 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
33
carDrivingNeuralNet/network.js
Executable 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
139
carDrivingNeuralNet/player.js
Executable 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
87
carDrivingNeuralNet/ray.js
Executable 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
176
carDrivingNeuralNet/sketch.js
Executable 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
11
carDrivingNeuralNet/wall.js
Executable 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
96
clock/clock.js
Executable 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
16
clock/index.html
Executable 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
106
clock/sketch.js
Executable 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
108
dinosaurrGame/dino.js
Executable 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
15
dinosaurrGame/index.html
Executable 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
32
dinosaurrGame/sketch.js
Executable 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
16
doublePendulum/index.html
Executable 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
104
doublePendulum/pendulum.js
Executable 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
65
doublePendulum/sketch.js
Executable 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
14
drawingCircles/index.html
Executable 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
105
drawingCircles/sketch.js
Executable 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
127
fourierSeries/drawing.js
Executable 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
16
fourierSeries/index.html
Executable 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
70
fourierSeries/sketch.js
Executable 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
233
gridDraw/index.html
Executable 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
24
linearRegressionTF/index.html
Executable 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
122
linearRegressionTF/sketch.js
Executable 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
16
pendulumDrawing/index.html
Executable 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
118
pendulumDrawing/pendulum.js
Executable 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
BIN
pendulumDrawing/pnd.zip
Executable file
Binary file not shown.
68
pendulumDrawing/sketch.js
Executable file
68
pendulumDrawing/sketch.js
Executable 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
3
rayCasting/display.js
Executable file
|
|
@ -0,0 +1,3 @@
|
|||
class Display{
|
||||
|
||||
}
|
||||
26
rayCasting/index.html
Executable file
26
rayCasting/index.html
Executable 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
82
rayCasting/player.js
Executable 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
84
rayCasting/ray.js
Executable 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
88
rayCasting/sketch.js
Executable 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
13
rayCasting/wall.js
Executable 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
6
textColorTF/data.js
Executable file
File diff suppressed because one or more lines are too long
27
textColorTF/index.html
Executable file
27
textColorTF/index.html
Executable 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
172
textColorTF/sketch.js
Executable 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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user