cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              //変数の範囲の変更
function map(value, start1, end1, start2, end2) {
  return Math.floor(start2 + (end2 - start2) * ((value - start1) / (end1 - start1)));
}
//ラジアンを返す
var PI = Math.PI;
var TWO_PI = Math.PI * 2;
function angleToRadians(angle){
  return angle * PI / 180;
}
//最大値最小値を超えないように調整
function constrain(amt, low, high){
  if(amt < low){
    return low;
  } else if(high < amt){
    return high;
  } else {
    return amt;
  }
}
//aとbの間の、比cで指定される値を求める
function lerp(value1, value2, amount){
   return value1 + (value2 - value1)* amount;
}
class Vector {
	constructor(x, y) {
			this.x = x;
			this.y = y;
			return this;
		}
		//加算
	add(x, y) {
		if (x instanceof Vector) {
			this.x += x.x;
			this.y += x.y;
			return this;
		} else {
			this.x += x;
			this.y += y;
			return this;
		}
	}
	static add(vectorA, vectorB) {
			var x = vectorA.x + vectorB.x;
			var y = vectorA.y + vectorB.y;
			return new Vector(x, y);
		}
		//減算
	sub(x, y) {
		if (x instanceof Vector) {
			this.x -= x.x;
			this.y -= x.y;
			return this;
		} else {
			this.x -= x;
			this.y -= y;
			return this;
		}
	}
	static sub(vectorA, vectorB) {
			var x = vectorA.x - vectorB.x;
			var y = vectorA.y - vectorB.y;
			return new Vector(x, y);
		}
		// ベクトル乗算
	mult(n) {
			this.x = this.x * n;
			this.y = this.y * n;
			return this;
		}
		//ベクトル除算
	div(n) {
			this.x = this.x / n;
			this.y = this.y / n;
			return this;
		}
		//ベクトルの大きさを返す
	mag() {
			return Math.sqrt(this.x * this.x + this.y * this.y);
		}
		//正規化する
	normalize() {
			var size = this.mag();
			if (size === 0) {
				return this;
			}
			this.x = this.x * (1 / size);
			this.y = this.y * (1 / size);
			return this;
		}
		//最大値
	limit(max) {
			if (this.mag() > max) {
				return this.normalize().mult(max);
			} else {
				return this;
			}
		}
		//回転
	rotate(angle) {
			var cos = Math.cos(angle);
			var sin = Math.sin(angle);

			var newX = this.x * cos - this.y * sin;
			var newY = this.x * sin + this.y * cos;
			this.x = newX;
			this.y = newY;
			return this;
		}
		//ベクトルの角度を返す
	static angle(vectorA) {
			var theta = Math.atan2(vectorA.y, vectorA.x);
			return theta;
		}
		//長さ1のランダムな値を返す
	static random2D() {
			this.x = (Math.random() * 2) - 1;
			this.y = (Math.random() * 2) - 1;
			return this.normalize();
		}
		//角度から長さ1のベクトルを返す
	static fromAngle(angle) {
			return new Vector(Math.cos(angle), Math.sin(angle));
		}
		//同じ値をもったVectorを返す
	static copy(vectorA) {
			return new Vector(vectorA.x, vectorA.y);
		}
		//ベクトル内積
	static dot(vectorA, vectorB) {
			return vectorA.x * vectorB.x + vectorA.y * vectorB.y;
		}
		//ベクトル間の角度を返す
	static angleBetween(vectorA, vectorB) {
		var theta = Math.acos((this.dot(vectorA, vectorB)) / (vectorA.mag() * vectorB.mag()));
		return theta;
	}
}
class Canvas {
	constructor(id, width, height, color) {
		this.elm = document.getElementById(id);
		this.ctx = this.elm.getContext('2d');
		this.width = width;
		this.height = height;
		this.color = color;
		this.init();
	}
	init() {
		this.elm.width = this.width;
		this.elm.height = this.height;
		this.ctx.fillStyle = this.color;
		this.ctx.fillRect(0, 0, this.width, this.height);
	}
	clear() {
		this.ctx.clearRect(0, 0, this.width, this.height);
	}
	repaint(color) {
		this.color = color;
		this.ctx.fillStyle = this.color;
		this.ctx.fillRect(0, 0, this.width, this.height);
	}
}
class Connection{
  constructor(nuronFrom, nuronTo, weight){
    this.from  = nuronFrom;
    this.to = nuronTo;
    this.weight = weight;
    this.isSending = false;
    this.sender = null;
    this.output = null;
  }
  update(){
    if(this.isSending){
      this.sender.x = lerp(this.sender.x, this.to.position.x, 0.1);
      this.sender.y = lerp(this.sender.y, this.to.position.y, 0.1);
      var distance = Vector.sub(this.sender, this.to.position).mag();
      if(distance < 1){
        this.to.feedforward(this.output);
        this.isSending = false;
      }
    }
  }
  feedforward(input){
    this.isSending = true;
    this.sender = Vector.copy(this.from.position);
    this.output = input * this.weight;
  }
  draw(ctx){
    if(this.isSending){
      ctx.fillStyle = 'rgb(175,205,228)';
      ctx.beginPath();
      ctx.arc(this.sender.x, this.sender.y, 4, 0, TWO_PI, false);
      ctx.closePath();
      ctx.fill();
    }
  }
}
class Neuron{
  constructor(x, y){
    this.position = new Vector(x, y);
    this.connections = [];
    this.sum = 0;
    this.r = 10;
  }
  feedforward(input){
    //活性化関数
    this.sum += input;
    if(this.sum > 1){
      this.r = 30;
      this.fire(input);
      this.sum = 0;
    }
  }
  fire(input){
    for (var i = 0; i < this.connections.length; i++) {
      this.connections[i].feedforward(input);
    }
  }
  //ニューロンつなぐ
  addConnection(connection){
    this.connections.push(connection);
  }
  //描く
  draw(ctx){
    ctx.fillStyle = 'rgb(247,252,254)';
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.r, 0, TWO_PI, false);
    ctx.closePath();
    ctx.fill();
    this.r = lerp(this.r, 10, 0.1);
  }
}
class Network{
  constructor(x, y, canvas){
    this.position = new Vector(x, y);
    this.neurons = [];
    this.connections = [];
    this.canvas = canvas;
  }
  //ニューロンを追加
  addNeuron(neuron){
    this.neurons.push(neuron);
  }
  //ニューロンつなぐ
  connect(nuronFrom, nuronTo, weight){
    var connection = new Connection(nuronFrom, nuronTo, weight);
    nuronFrom.addConnection(connection);
    this.connections.push(connection);
  }
  //最初のニューロンの入力を処理
  feedforward(input){
    this.neurons[0].feedforward(input);
  }
  //状態の更新
  update(){
    for (var i = 0; i < this.connections.length; i++) {
      this.connections[i].update();
    }
  }
  //描く
  draw(){
    for (var i = 0; i < this.neurons.length; i++) {
      this.neurons[i].draw(this.canvas.ctx);
    }

    for (var i = 0; i < this.connections.length; i++) {
      this.connections[i].draw(this.canvas.ctx);
    }
  }
}
'use strict';
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var halfWindowWidth = windowWidth / 2;
var halfWindowHeight = windowHeight / 2;

//キャンバスの用意
var canvas = new Canvas('canvas', windowWidth, windowHeight, 'rgb(25,48,24)');

//ネットワークの初期化
var netWork = new Network(halfWindowWidth, halfWindowHeight, canvas);
var neurons = [];
var rowLength = 3;
var columnLength = 4;
var space = windowHeight / rowLength;

//ニューロンの初期化
for (var i = 0; i < rowLength; i++) {
  neurons[i] = [];
  for (var j = 0; j < columnLength; j++) {
    var x = space * j + Math.random() * space / 2;
    var y = space * i  + Math.random() * space / 2;
    neurons[i][j] = new Neuron(x, y);
  }
}

//結合部作成
for (var i = 0; i < rowLength; i++) {
  for (var j = 0; j < columnLength - 1; j++) {
    if(i !== 0){
    netWork.connect(neurons[i][j], neurons[i - 1][j + 1], Math.random());
    }
    netWork.connect(neurons[i][j], neurons[i][j + 1], Math.random());
    if(i !== rowLength - 1){
      netWork.connect(neurons[i][j], neurons[i + 1][j + 1], Math.random());
    }
  }
}

//ネットワークに追加する
for (var i = 0; i < rowLength; i++) {
  for (var j = 0; j < columnLength; j++) {
    netWork.addNeuron(neurons[i][j]);
  }
}

var count = 0;
update();
function update(){
  //50フレームごとランダムな数を渡す
  if(count % 50 === 0){
    netWork.feedforward(Math.random());
    count = 0;
  }
  count ++;
  canvas.repaint('rgba(13,13,13,0.2)');
  netWork.update();
  netWork.draw();
  window.requestAnimationFrame(update);
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console