使用P5.js实现的3D辐射线动画

3D Starburst p5.js

p5, cloud

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var boxSz = 250;
var numLines = 300;
var lines = [];

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);

for (var i = 0; i < numLines; i++) {
        lines[i] = createVector(
            random(-boxSz, boxSz),
            random(-boxSz, boxSz),
            random(-boxSz, boxSz)
        );
    }
}

function draw() {
        background(35, 25, 90);

// rotate scene
        rotateY(frameCount * 0.01);

push();
        //rotateX(frameCount *0.02);

for (var i = 0; i < lines.length; i++) {
            push();
            line(0, 0, 0, lines[i].x, lines[i].y, lines[i].z);
            pop();
        }
        pop();

drawBox();
    } // draw
function drawBox() {
    // DRAW OUTLINE BOX
    stroke(255);
    //front
    line(-boxSz, -boxSz, boxSz, boxSz, -boxSz, boxSz);
    line(-boxSz, boxSz, boxSz, boxSz, boxSz, boxSz);
    line(-boxSz, -boxSz, boxSz, -boxSz, boxSz, boxSz);
    line(boxSz, -boxSz, boxSz, boxSz, boxSz, boxSz);

//back
    line(-boxSz, -boxSz, -boxSz, boxSz, -boxSz, -boxSz);
    line(-boxSz, boxSz, -boxSz, boxSz, boxSz, -boxSz);
    line(-boxSz, -boxSz, -boxSz, -boxSz, boxSz, -boxSz);
    line(boxSz, -boxSz, -boxSz, boxSz, boxSz, -boxSz);

//left top
    line(-boxSz, -boxSz, boxSz, -boxSz, -boxSz, -boxSz);
    //left bottom
    line(-boxSz, boxSz, -boxSz, -boxSz, boxSz, boxSz);
    //right top
    line(boxSz, -boxSz, boxSz, boxSz, -boxSz, -boxSz);
    // // right bottom
    line(boxSz, boxSz, -boxSz, boxSz, boxSz, boxSz);

}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

编译

CSS

HTML

3D Starburst p5.js

p5, cloud

编辑器支持Emmet

快捷键

3D Starburst p5.js

p5, cloud

使用P5.js实现的3D空间粒子追踪动画

P5.js实现的P5.js实现的3D立方体波动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：