commit 25a12f221ed78885d7951c615ab5edba71228575 Author: Dawid Pietrykowski Date: Wed Nov 9 23:34:49 2022 +0100 Initial commit diff --git a/20dots/animation.js b/20dots/animation.js new file mode 100755 index 0000000..8459942 --- /dev/null +++ b/20dots/animation.js @@ -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(); + } + +} \ No newline at end of file diff --git a/20dots/dot.js b/20dots/dot.js new file mode 100755 index 0000000..a018c46 --- /dev/null +++ b/20dots/dot.js @@ -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(); + } +} \ No newline at end of file diff --git a/20dots/index.html b/20dots/index.html new file mode 100755 index 0000000..47a329c --- /dev/null +++ b/20dots/index.html @@ -0,0 +1,16 @@ + + + + + + 20 Dots + + + + + + + + + + diff --git a/20dots/sketch.js b/20dots/sketch.js new file mode 100755 index 0000000..05041f7 --- /dev/null +++ b/20dots/sketch.js @@ -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]; +} \ No newline at end of file diff --git a/XORinTF/index.html b/XORinTF/index.html new file mode 100755 index 0000000..bf61d40 --- /dev/null +++ b/XORinTF/index.html @@ -0,0 +1,24 @@ + + + + + + + XOR in TensorFlow + + + + + + + + + + + \ No newline at end of file diff --git a/XORinTF/sketch.js b/XORinTF/sketch.js new file mode 100755 index 0000000..147c5df --- /dev/null +++ b/XORinTF/sketch.js @@ -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); +} \ No newline at end of file diff --git a/carDrivingNeuralNet/index.html b/carDrivingNeuralNet/index.html new file mode 100755 index 0000000..455f8d1 --- /dev/null +++ b/carDrivingNeuralNet/index.html @@ -0,0 +1,28 @@ + + + + + + + Cars AI + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/carDrivingNeuralNet/network.js b/carDrivingNeuralNet/network.js new file mode 100755 index 0000000..254cd2f --- /dev/null +++ b/carDrivingNeuralNet/network.js @@ -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); + } +} \ No newline at end of file diff --git a/carDrivingNeuralNet/player.js b/carDrivingNeuralNet/player.js new file mode 100755 index 0000000..02d3876 --- /dev/null +++ b/carDrivingNeuralNet/player.js @@ -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; +} \ No newline at end of file diff --git a/carDrivingNeuralNet/ray.js b/carDrivingNeuralNet/ray.js new file mode 100755 index 0000000..9e267ef --- /dev/null +++ b/carDrivingNeuralNet/ray.js @@ -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; +} \ No newline at end of file diff --git a/carDrivingNeuralNet/sketch.js b/carDrivingNeuralNet/sketch.js new file mode 100755 index 0000000..293f63c --- /dev/null +++ b/carDrivingNeuralNet/sketch.js @@ -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 + }); + +} \ No newline at end of file diff --git a/carDrivingNeuralNet/wall.js b/carDrivingNeuralNet/wall.js new file mode 100755 index 0000000..321b38c --- /dev/null +++ b/carDrivingNeuralNet/wall.js @@ -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); + } +} \ No newline at end of file diff --git a/clock/clock.js b/clock/clock.js new file mode 100755 index 0000000..d22534b --- /dev/null +++ b/clock/clock.js @@ -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; + } +} \ No newline at end of file diff --git a/clock/index.html b/clock/index.html new file mode 100755 index 0000000..40ed22b --- /dev/null +++ b/clock/index.html @@ -0,0 +1,16 @@ + + + + + + + dla Natalki + + + + + + + + + diff --git a/clock/sketch.js b/clock/sketch.js new file mode 100755 index 0000000..2459c27 --- /dev/null +++ b/clock/sketch.js @@ -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]; +} \ No newline at end of file diff --git a/dinosaurrGame/dino.js b/dinosaurrGame/dino.js new file mode 100755 index 0000000..d53d204 --- /dev/null +++ b/dinosaurrGame/dino.js @@ -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); +} \ No newline at end of file diff --git a/dinosaurrGame/index.html b/dinosaurrGame/index.html new file mode 100755 index 0000000..9ad7be6 --- /dev/null +++ b/dinosaurrGame/index.html @@ -0,0 +1,15 @@ + + + + + + Chrome Dinosaur + + + + + + + + + diff --git a/dinosaurrGame/sketch.js b/dinosaurrGame/sketch.js new file mode 100755 index 0000000..05c3a83 --- /dev/null +++ b/dinosaurrGame/sketch.js @@ -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'; + } +} \ No newline at end of file diff --git a/doublePendulum/index.html b/doublePendulum/index.html new file mode 100755 index 0000000..2d53c12 --- /dev/null +++ b/doublePendulum/index.html @@ -0,0 +1,16 @@ + + + + + + + double pendulum + + + + + + + + + diff --git a/doublePendulum/pendulum.js b/doublePendulum/pendulum.js new file mode 100755 index 0000000..b0bf50a --- /dev/null +++ b/doublePendulum/pendulum.js @@ -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(); + } +} \ No newline at end of file diff --git a/doublePendulum/sketch.js b/doublePendulum/sketch.js new file mode 100755 index 0000000..7027c70 --- /dev/null +++ b/doublePendulum/sketch.js @@ -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]; +} \ No newline at end of file diff --git a/drawingCircles/index.html b/drawingCircles/index.html new file mode 100755 index 0000000..0da3c0f --- /dev/null +++ b/drawingCircles/index.html @@ -0,0 +1,14 @@ + + + + + + p5.js example + + + + + + + + diff --git a/drawingCircles/sketch.js b/drawingCircles/sketch.js new file mode 100755 index 0000000..ba8519b --- /dev/null +++ b/drawingCircles/sketch.js @@ -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); + } +} \ No newline at end of file diff --git a/fourierSeries/drawing.js b/fourierSeries/drawing.js new file mode 100755 index 0000000..9f90e43 --- /dev/null +++ b/fourierSeries/drawing.js @@ -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(); + } +} \ No newline at end of file diff --git a/fourierSeries/index.html b/fourierSeries/index.html new file mode 100755 index 0000000..e8b8795 --- /dev/null +++ b/fourierSeries/index.html @@ -0,0 +1,16 @@ + + + + + + + Fourier Series + + + + + + + + + diff --git a/fourierSeries/sketch.js b/fourierSeries/sketch.js new file mode 100755 index 0000000..b29e908 --- /dev/null +++ b/fourierSeries/sketch.js @@ -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]; +} \ No newline at end of file diff --git a/gridDraw/index.html b/gridDraw/index.html new file mode 100755 index 0000000..96e03d0 --- /dev/null +++ b/gridDraw/index.html @@ -0,0 +1,233 @@ + + + + + + + + + Grid Draw + + + + + + + + + + \ No newline at end of file diff --git a/linearRegressionTF/index.html b/linearRegressionTF/index.html new file mode 100755 index 0000000..26c9725 --- /dev/null +++ b/linearRegressionTF/index.html @@ -0,0 +1,24 @@ + + + + + + + linear regression + + + + + + + + + + + \ No newline at end of file diff --git a/linearRegressionTF/sketch.js b/linearRegressionTF/sketch.js new file mode 100755 index 0000000..df4c788 --- /dev/null +++ b/linearRegressionTF/sketch.js @@ -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= 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 { + 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)); + } +} \ No newline at end of file diff --git a/pendulumDrawing/index.html b/pendulumDrawing/index.html new file mode 100755 index 0000000..de30891 --- /dev/null +++ b/pendulumDrawing/index.html @@ -0,0 +1,16 @@ + + + + + + + Drawing shapes + + + + + + + + + diff --git a/pendulumDrawing/pendulum.js b/pendulumDrawing/pendulum.js new file mode 100755 index 0000000..6c36c2e --- /dev/null +++ b/pendulumDrawing/pendulum.js @@ -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(); + } +} diff --git a/pendulumDrawing/pnd.zip b/pendulumDrawing/pnd.zip new file mode 100755 index 0000000..8d0f6f5 Binary files /dev/null and b/pendulumDrawing/pnd.zip differ diff --git a/pendulumDrawing/sketch.js b/pendulumDrawing/sketch.js new file mode 100755 index 0000000..100d7e6 --- /dev/null +++ b/pendulumDrawing/sketch.js @@ -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]; +} \ No newline at end of file diff --git a/rayCasting/display.js b/rayCasting/display.js new file mode 100755 index 0000000..12ff5ae --- /dev/null +++ b/rayCasting/display.js @@ -0,0 +1,3 @@ +class Display{ + +} \ No newline at end of file diff --git a/rayCasting/index.html b/rayCasting/index.html new file mode 100755 index 0000000..987c0b8 --- /dev/null +++ b/rayCasting/index.html @@ -0,0 +1,26 @@ + + + + + + + p5.js example + + + + + + + + + + + + + + \ No newline at end of file diff --git a/rayCasting/player.js b/rayCasting/player.js new file mode 100755 index 0000000..8a8fc6a --- /dev/null +++ b/rayCasting/player.js @@ -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= 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; +} \ No newline at end of file diff --git a/rayCasting/sketch.js b/rayCasting/sketch.js new file mode 100755 index 0000000..f7300fb --- /dev/null +++ b/rayCasting/sketch.js @@ -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(); + } + } +} diff --git a/rayCasting/wall.js b/rayCasting/wall.js new file mode 100755 index 0000000..1a2cbd1 --- /dev/null +++ b/rayCasting/wall.js @@ -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); + } +} \ No newline at end of file diff --git a/textColorTF/data.js b/textColorTF/data.js new file mode 100755 index 0000000..7f7d7a3 --- /dev/null +++ b/textColorTF/data.js @@ -0,0 +1,6 @@ +class dataToTrain{ + constructor(){ + this.ys = [0,0,0,0,1,1,1,1,1,0,0,0,0,1,1,0,1,0,1,0,1,0,1,1,1,1,0,1,1,0,1,0,1,0,0,0,0,0,1,0,1,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1,1,0,1,0,0,1,1,1,1,0,0,0,1,1,0,1,0,1,0,1,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1,1,0,0,0,1,1,0,1,0,0,0,1,0,1,0,1,0,0,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,1,0,0,1,1,1,1,0,0,0,0,0,1,0,1,0,0,0,0,0,1,0,1,1,0,0,1,1,1,1,1,0,1,0,0,0,1,0,1,0,1,1,1,0,0,0,1,1,0,0,1,1,1,0,1,0,1,1,0,0,1,1,1,1,0,0,0,0,0,1,0,1,1,0,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,1,0,0,0,0,1,0,0,1,0,1,0,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,1,0,1,0,0,0,1,0,0,1,1,0,0,1,1,1,0,0,0,0,1,0,0,0,1,0,0,0,1,1,0,0,0,1,0,1,1,0,0,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,1,0,0,1,0,1,0,1,0,0,0,1,1,0,0,0,0,0,0,1,1,1,0,1,1,0,1,0,1,0,1,0,0,0,0,0,0,1,0,1,1,0,1,1,1,1,1,1,0,0,0,1,1,0,1,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,1,1,0,0,1,0,0,0,0,0,0,1,1,1,1,0,1,1,0,1,0,1,1,0,1,1,0,1,1,0,0,1,0,1,0,1,0,1,0,0,1,1,1,0,0,0,1,0,0,1,1,1,1,0,0,1,0,0,1,0,1,1,0,1,1,1,0,0,1,1,0,1,0,0,0,1,1,1,0,0,1,0,1,0,0,1,0,1,0,0,0,0,1,0,1,1,1,0,1,1,1,0]; + this.xs = [[109,96,203],[223,103,79],[170,236,215],[56,249,160],[98,102,125],[128,42,221],[164,23,121],[31,88,29],[52,25,234],[145,208,3],[3,166,6],[171,223,218],[94,216,216],[202,92,5],[170,42,224],[19,208,23],[116,78,97],[146,249,171],[36,54,255],[221,97,9],[12,76,171],[250,192,72],[140,57,71],[12,35,232],[20,128,187],[38,26,218],[120,223,79],[149,32,169],[68,9,37],[170,64,119],[1,54,157],[185,219,93],[93,81,145],[63,194,235],[236,224,156],[246,167,254],[231,16,217],[68,219,169],[86,134,68],[240,107,80],[163,117,124],[191,31,253],[75,45,185],[26,34,152],[151,6,145],[94,123,234],[205,203,155],[228,140,73],[197,127,95],[20,195,236],[228,78,35],[99,215,255],[45,144,251],[41,122,170],[172,139,27],[137,174,110],[102,157,137],[73,252,164],[55,188,131],[150,94,6],[65,171,2],[245,152,49],[39,183,243],[136,5,233],[149,239,14],[186,90,33],[69,66,225],[26,246,153],[249,143,135],[176,30,122],[60,63,63],[219,228,1],[177,78,39],[161,240,206],[36,243,207],[57,0,175],[151,82,99],[76,115,204],[45,17,114],[249,218,239],[212,251,106],[96,236,8],[8,82,72],[38,3,74],[124,170,181],[30,30,150],[201,153,153],[25,62,160],[251,88,141],[184,98,171],[191,203,115],[135,230,1],[18,149,111],[3,130,8],[18,213,7],[47,79,219],[204,108,228],[19,209,193],[80,189,149],[40,44,219],[52,81,87],[18,179,55],[141,123,42],[255,164,130],[232,119,240],[42,31,96],[124,87,221],[140,223,173],[206,85,162],[86,145,30],[116,158,41],[173,8,100],[155,33,178],[32,109,111],[216,20,114],[75,212,70],[186,199,121],[203,84,121],[43,140,98],[84,44,231],[250,123,244],[135,31,30],[208,28,228],[108,200,33],[188,162,195],[135,104,36],[187,73,117],[117,49,184],[187,157,126],[6,135,43],[165,219,159],[252,205,165],[1,166,198],[26,196,253],[235,145,28],[64,34,129],[240,110,249],[197,173,248],[57,202,27],[206,254,228],[36,86,148],[79,133,157],[186,208,101],[253,252,59],[76,224,225],[124,158,68],[106,215,111],[72,85,30],[78,208,19],[53,153,168],[249,79,168],[54,162,123],[76,61,18],[26,87,16],[178,46,46],[196,41,39],[97,155,245],[190,177,184],[208,103,150],[0,203,11],[104,205,99],[91,74,190],[218,79,87],[139,54,158],[34,194,73],[149,244,114],[246,122,82],[18,172,154],[242,114,241],[114,129,208],[63,152,213],[45,39,28],[126,94,18],[158,94,173],[234,162,239],[33,150,87],[43,138,244],[93,72,200],[32,163,163],[133,77,240],[118,243,190],[163,92,1],[205,200,33],[207,228,124],[47,225,176],[17,49,100],[142,176,198],[142,69,173],[140,191,69],[136,16,219],[123,58,132],[169,79,109],[32,252,119],[33,197,187],[79,193,165],[130,72,61],[167,86,108],[208,154,86],[166,206,43],[71,247,173],[47,99,20],[76,132,103],[207,215,128],[236,90,185],[13,212,121],[129,49,83],[82,69,82],[28,178,129],[128,252,202],[182,41,145],[162,107,85],[211,81,97],[92,14,75],[236,217,202],[228,182,181],[205,99,125],[118,186,210],[245,232,100],[66,102,8],[104,179,103],[19,159,216],[40,89,37],[186,154,226],[127,144,249],[233,254,196],[164,37,155],[92,158,15],[56,68,124],[28,142,184],[28,91,142],[90,77,223],[60,26,118],[40,102,29],[150,160,62],[110,213,4],[148,242,13],[68,155,134],[60,33,118],[71,19,138],[138,185,93],[214,101,107],[241,235,28],[229,97,121],[95,2,156],[212,41,238],[179,183,101],[47,23,148],[66,241,226],[250,87,190],[29,196,216],[75,155,158],[192,153,12],[164,252,254],[175,94,229],[89,212,204],[160,91,133],[166,225,117],[142,204,152],[169,44,164],[162,0,17],[226,11,9],[25,225,204],[80,143,233],[160,181,237],[182,73,162],[195,63,244],[181,154,60],[62,54,98],[47,57,77],[90,105,135],[96,120,4],[65,168,29],[39,228,31],[243,199,215],[179,211,81],[56,56,28],[215,14,175],[155,23,233],[125,174,131],[56,208,23],[215,208,220],[137,96,91],[247,95,139],[161,183,24],[36,145,189],[124,37,13],[139,158,86],[22,240,201],[93,13,56],[30,59,152],[6,115,197],[178,125,105],[174,89,128],[103,221,130],[69,227,33],[138,87,62],[209,143,17],[56,143,88],[138,65,107],[115,77,99],[108,142,104],[82,156,162],[62,155,197],[122,98,108],[82,44,221],[90,147,57],[253,112,63],[223,132,42],[146,70,218],[115,230,38],[16,92,61],[55,12,219],[155,189,177],[62,215,201],[161,6,192],[129,224,172],[143,122,118],[168,102,145],[113,143,57],[149,150,165],[213,57,177],[174,228,138],[42,252,137],[66,253,160],[181,69,8],[72,62,147],[67,165,182],[40,181,142],[209,92,145],[217,141,224],[6,97,201],[1,158,178],[254,229,12],[23,79,170],[34,173,199],[129,71,240],[74,197,100],[139,124,37],[143,211,70],[196,130,34],[231,97,120],[140,29,109],[12,57,194],[168,188,1],[88,183,82],[18,238,171],[3,244,177],[15,245,245],[74,207,57],[5,63,116],[156,160,144],[46,50,197],[30,242,173],[34,167,160],[29,19,102],[198,185,144],[165,104,226],[177,239,155],[143,140,0],[115,183,72],[14,120,253],[52,212,96],[195,132,174],[36,227,48],[39,246,138],[164,217,251],[234,212,7],[187,48,101],[12,253,159],[88,190,129],[7,157,136],[230,206,180],[236,47,19],[211,77,88],[70,164,6],[240,30,8],[99,104,247],[73,6,4],[137,82,246],[92,245,122],[223,79,254],[156,153,86],[243,64,5],[107,216,58],[151,18,91],[189,122,199],[204,42,1],[250,42,85],[188,86,166],[202,228,152],[222,177,182],[203,12,18],[109,233,235],[60,192,132],[200,137,215],[44,217,13],[14,215,221],[162,131,150],[81,238,30],[63,239,232],[156,10,128],[97,113,48],[252,123,165],[25,157,209],[141,78,118],[220,70,149],[54,91,186],[159,208,10],[214,209,4],[174,84,209],[177,243,85],[139,75,78],[131,76,79],[121,80,173],[17,49,243],[151,193,195],[194,46,95],[251,37,36],[161,181,143],[91,63,197],[171,252,152],[220,42,124],[6,29,247],[248,170,151],[143,123,243],[78,8,201],[185,244,31],[109,96,158],[136,1,85],[98,205,76],[164,195,177],[35,98,225],[140,180,19],[101,162,231],[156,248,15],[22,131,152],[53,186,143],[180,13,170],[14,187,169],[114,205,51],[143,63,123],[180,86,63],[218,42,90],[239,120,153],[15,243,213],[237,190,229],[211,94,192],[61,212,151],[244,249,139],[39,184,38],[122,132,139],[35,20,157],[238,42,20],[31,254,197],[245,221,188],[113,116,16],[54,211,114],[144,240,232],[106,7,179],[56,248,70],[28,148,147],[116,131,39],[58,209,79],[146,2,247],[3,22,46],[27,29,25],[157,213,119],[88,181,36],[42,69,123],[88,108,12],[115,208,118],[122,28,170],[42,213,13],[111,160,237],[110,154,62],[238,70,10],[243,24,72],[123,85,6],[141,214,10],[18,233,121],[172,145,5],[100,201,169],[28,46,205],[43,178,138],[215,113,119],[28,113,185],[245,99,182],[194,22,214],[6,187,74],[94,156,253],[101,174,18],[22,188,106],[33,36,51],[7,175,161],[141,23,110],[46,17,253],[46,125,132],[200,32,205],[166,55,72],[17,49,91],[20,65,65],[239,175,227]]; + } +} \ No newline at end of file diff --git a/textColorTF/index.html b/textColorTF/index.html new file mode 100755 index 0000000..8742330 --- /dev/null +++ b/textColorTF/index.html @@ -0,0 +1,27 @@ + + + + + + + Colors neural network + + + + + + + + + + + + + + \ No newline at end of file diff --git a/textColorTF/sketch.js b/textColorTF/sketch.js new file mode 100755 index 0000000..a24b75a --- /dev/null +++ b/textColorTF/sketch.js @@ -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); +} \ No newline at end of file