P5.js 数据可视化节点包络图

P5 data visualization

数据可视化

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2353
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var sketch = function(p5) {
    var width = 700;
    var height = 450;
    var x = width / 2;
    var y = height / 2;
    var particles = [];
    var etages = [];
    var etagesPosition = [];
    var trajets = [];
    var stepWidth = (width / 7) - 30;

p5.setup = function() {
        var canvas = p5.createCanvas(width, height);
        canvas.parent('canvasHolder');
        p5.background(51);
        p5.smooth();

etageSetup();
        trajetSetup();
    };

p5.draw = function() {
        //particuleManager();
        p5.background(51);

trajetManager();
        etageManager();
    };

var etageManager = function() {
        // Looping through backwards to delete
        for (var i = etages.length - 1; i >= 0; i--) {
            var etage = etages[i];
            etage.run();

}
    };

var etageSetup = function() {
        var size = 30;
        var top = (height / 2);
        var color = [];

color[0] = p5.createVector(81, 159, 204);
        color[1] = p5.createVector(137, 147, 153);
        color[2] = p5.createVector(126, 255, 233);
        color[3] = p5.createVector(255, 199, 190);
        color[4] = p5.createVector(204, 81, 85);
        color[5] = p5.createVector(63, 127, 116);
        color[6] = p5.createVector(101, 127, 123);
        color[7] = p5.createVector(255, 232, 126);

for (var i = 0; i <= 7; i++) {
            var position = p5.createVector(stepWidth * (i + 1), top);
            etages.push(new Etage(p5, position, size, i, trajets));
            etages[i].setup(color[i]);
            etagesPosition.push(position);
        };
    };

var trajetSetup = function() {
        var randomTime = p5.random(20, 50);
        for (var i = 0; i < randomTime; i++) {
            var randomEtageStart = parseInt(p5.random(0, 8));
            var randomEtageEnd = parseInt(p5.random(0, 8));
            trajets.push(new Trajet(p5, etagesPosition, randomEtageStart, randomEtageEnd, stepWidth, etages[randomEtageStart]));
        };

for (var i = trajets.length - 1; i >= 0; i--) {
            var trajet = trajets[i];
            trajet.setup();
        }

};

var trajetManager = function() {

for (var i = trajets.length - 1; i >= 0; i--) {
            var trajet = trajets[i];
            trajet.run();
        }

};

var Etage = function(p5, position, originalSize, floor) {

this.position = position;
    this.originalSize = originalSize;
    this.size = this.originalSize;
    this.color;
    this.floor = floor;
    this.state = 0;

this.setup = function(color) {
        this.color = color;
    };

this.run = function() {
        this.update();
        this.display();
    };

// Method to update position
    this.update = function() {
        p5.noStroke();
        var dist = p5.dist(p5.mouseX, p5.mouseY, this.position.x, this.position.y);
        p5.fill(this.color.x, this.color.y, this.color.z);

if (dist >= this.size / 2) {
            this.size = this.originalSize;
            this.state = 0;
        } else {
            this.size = this.originalSize * 1.3;
            this.state = 1;
        }
    };

// Method to display
    this.display = function() {
        p5.ellipse(this.position.x, this.position.y, this.size, this.size);
        p5.fill(0);
        p5.text(this.floor, position.x - 3, position.y + 4);
    };

//getters 
    this.setPosition = function(x, y) {
        this.position.x = x;
        this.position.y = y;
    };

//setters
    this.getPosition = function() {
        return this.position;
    }

this.getColor = function() {
        return this.color;
    };

this.getState = function() {
        return this.state;
    };

};

var Trajet = function(p5, etagesPosition, etageStart, etageEnd, stepWidth, etage) {

this.start = etagesPosition[etageStart];
    this.end = etagesPosition[etageEnd];
    this.orientation = 1;
    this.middle = 0;
    this.color = p5.createVector(255, 255, 255);

this.setup = function() {
        this.middle = this.findMiddle();
        this.r1 = p5.random(0, this.middle);
        this.r2 = p5.random(0, this.middle);
        this.rh = p5.random(0, this.middle / 8);

this.color = etage.getColor();
    };

this.run = function() {
        this.display();

};

// Method to display
    this.display = function() {
        if (etage.getState() == 1) {
            p5.stroke(this.color.x, this.color.y, this.color.z);
            p5.fill(this.color.x, this.color.y, this.color.z, 50);
        } else {
            p5.stroke(this.color.x, this.color.y, this.color.z, 50);
            p5.fill(this.color.x, this.color.y, this.color.z, 5);
        }

var bezierVariation1 = this.middle - this.r1;
        var bezierVariation2 = this.middle + this.r2;
        var hauteur = this.middle + this.rh;

if (etageStart < etageEnd) {
            p5.bezier(
                this.start.x, this.start.y,
                this.start.x + bezierVariation1, this.start.y - hauteur,
                this.start.x + bezierVariation2, this.start.y - hauteur,
                this.end.x, this.end.y);
        } else {
            p5.bezier(
                this.start.x, this.start.y,
                this.start.x - bezierVariation1, this.start.y + hauteur,
                this.start.x - bezierVariation2, this.start.y + hauteur,
                this.end.x, this.end.y);
        }
    }

//Helpers
    this.findMiddle = function() {
        var lenght;
        if (etageStart < etageEnd) {
            var lenght = ((etageEnd - etageStart) * stepWidth) / 2;
        } else {
            var lenght = ((etageStart - etageEnd) * stepWidth) / 2;
        }
        return lenght;
    };

this.setColor = function() {

};

var myp5 = new p5(sketch);

编译

CSS

HTML

P5 data visualization

数据可视化

编辑器支持Emmet

快捷键

P5 data visualization

数据可视化

基于ReactJS实现的数据可视化状态图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：