https://github.com/matiasvlevi/dann-p5

p5js graphics for Dannjs
https://github.com/matiasvlevi/dann-p5

dannjs p5js

Last synced: about 2 months ago
JSON representation

p5js graphics for Dannjs

• Host: GitHub
• URL: https://github.com/matiasvlevi/dann-p5
• Owner: matiasvlevi
• License: mit
• Created: 2021-09-03T13:23:49.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-09-10T16:09:15.000Z (over 3 years ago)
• Last Synced: 2023-03-10T07:02:09.251Z (almost 2 years ago)
• Topics: dannjs, p5js
• Language: JavaScript
• Homepage:
• Size: 41.9 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        



  





        



p5js graphics for Dannjs



    Display any Dann model & customize themes!

 

  

  


  


    

  





    This library is still in the early stages of development, contributors are more than welcome!





### CDN

```html

```

p5js & Dannjs are included in this CDN




# Getting started

#### Setup a graph for a model.

```js

// Create Dann model

let nn = new Dann(4, 4);

nn.addHiddenLayer(12);

nn.makeWeights();

let graph;

function setup() {

  createCanvas(600, 600);

  // Create graph

  graph = createNetGraph(10, 10, 200, 125);

  graph.setModel(nn);

}

function draw() {

  background(51);

  // Display graph

  graph.show();

}

```




#### Customize the graph's theme

```js

// Create Dann model

let nn = new Dann(4, 4);

nn.addHiddenLayer(12);

nn.makeWeights();

let graph;

function setup() {

  createCanvas(600, 600);

  // Create graph

  graph = createNetGraph(10, 10, 200, 125);

  graph.setMode(FIXED);

  graph.setStrokeWeight('weight', 4);

  graph.setColor('neuron.max', [255,0,0,255]);

  graph.setColor('neuron.min', [0,0,255,255]);

  graph.setSpacing(16);

  graph.setTheme(ROBOT);

  graph.setModel(nn);

}

function draw() {

  background(51);

  // Display graph

  graph.show();

}

```




# All available options

```js

// Set a Dann model

graph.setModel(model);

// Set theme preset

graph.setTheme(theme); // CLASSIC, MODERN, ROBOT, STANDARD

// Set an individual color

graph.setColor(key, [r, g, b, a]);

/*Available keys:

* background

* neuron.min

* neuron.max

* weights.min

* weights.max

* stroke.contour

* stroke.neuron

*/

// Set display mode

graph.setMode(mode);   // SQUARE, FIXED, FIXED_UP

// Set graph position

graph.setPos(x, y);

// Set stroke weight

graph.setStrokeWeight(key, value);

/* Available keys:

* weight

* neuron

*/

// Set value spread (the bigger, the less change in color)

graph.setSpread(value)

// Set neuron spacing (only with FIXED modes)

graph.setSpacing(value);

// Set neuron size

graph.setNeuronSize(value);

// Set orientation of the graph

graph.setOrientation(orientation); // VERTICAL, HORIZONTAL

```





# Socials

























	







## Contributors 

  

    
Matias Vazquez-Levi
💻 📖

    
EL Ramos
📖

  




## Licence

MIT