P5.js 运动着的星空

[p5.js] Starfield

P5.js

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var stars = [], // Array that contains the stars
    WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FPS = 15, // Frames per second
    NUM_STARS = WIDTH * 2; // Number of stars

function setup() {
    createCanvas(WIDTH, HEIGHT);

// Push stars to array
    for (var i = 0; i < NUM_STARS; i++) {
        stars.push({
            x: 0,
            y: 0,
            offset: Math.random() * 360,
            // Weight orbit a little to be outside origin
            orbit: (Math.random() + 0.01) * max(WIDTH, HEIGHT),
            radius: Math.random() * 2,
            vx: Math.floor(Math.random() * 10) - 5,
            vy: Math.floor(Math.random() * 10) - 5
        });
    }

frameRate(FPS);
    loop();
}

function draw() {
    background(24, 24, 24);
    push();
    noFill();
    colorMode(RGB, 255, 255, 255, 1);
    stroke(255, 255, 255, 1);
    strokeCap(1);
    strokeWeight(2);
    for (var i = 0, x = stars.length; i < x; i++) {
        var s = stars[i];
        ellipse(s.x, s.y, s.radius, 0);
    }
    pop();
    update();
}

function update() {
    var originX = WIDTH / 2;
    var originY = HEIGHT / 2;

for (var i = 0, x = stars.length; i < x; i++) {
        var s = stars[i];

var rad = (frameCount * (1 / (s.orbit * 2 + s.offset)) + s.offset) % TAU;
        s.x = (originX + cos(rad) * (s.orbit * 2));
        s.y = (originY + sin(rad) * (s.orbit));
    }
}

编译

CSS

HTML

[p5.js] Starfield

P5.js

编辑器支持Emmet

快捷键

[p5.js] Starfield

P5.js

P5.js 漂亮的数学曲线图案动画

P5.js 正方形/圆/十字形组合成的动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：