P5.js 东倒西歪的小圆圈

grid: drunk circles 可用于艺术类网站背景图片。

canvas, circle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var edge, padding, bigSegment;
var bg = 238;

function setup() {
    createCanvas(windowWidth, windowHeight - 4);
    rectMode(CENTER);
    edge = 50;
    padding = 20;
    bigSegment = 200 - padding;

drawStuff();
}

function draw() {

}

function drawSquare(x, y) {
    var cols = 5,
        segment = bigSegment / cols;
    push();
    translate(x + padding / 2, y + padding / 2);
    for (var x = segment / 2; x < bigSegment; x += segment) {
        for (var y = segment / 2; y < bigSegment; y += segment) {
            noStroke();
            fill(35);
            var scal = random(0.4, 0.9);
            ellipse(x, y, segment * scal, segment * scal);
            fill(bg);
            scal = random(0.2, 0.7);
            var r = 5;
            var xx = random(-r, r);
            var yy = random(-r, r);
            ellipse(x + xx, y + yy, segment * scal, segment * scal);

}
    }
    colorMode(RGB);
    pop();
}

function mouseReleased() {
    drawStuff();
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight - 4);
    drawStuff();
}

编译

CSS

HTML

grid: drunk circles 可用于艺术类网站背景图片。

canvas, circle

编辑器支持Emmet

快捷键

grid: drunk circles 可用于艺术类网站背景图片。

canvas, circle

HTML5 P5.js使用噪音算法实现的超炫彩虹曲线

HTML5 P5.js 曼荼罗花的轮廓线变换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：