HTML5 P5.js 百足蜈蚣动画

恶心的多足爬虫

html5, centipede

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var segment_x = [];
var segment_y = [];
var total_segments = 9;

for (var i = 0; i < total_segments; i++) {
    segment_x[i] = 0;
    segment_y[i] = 0;
}

var EIGHTH_PI, xscale, yscale, step, walker, segment_length, segment_width, PAUSED, leg_phase;

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

EIGHTH_PI = (QUARTER_PI / 2);
    xscale = (1920 / displayWidth);
    yscale = (1080 / displayHeight);
    step = ((displayWidth / 1100) * xscale);
    segment_length = (step * 20);
    segment_width = (segment_length / 2);
    segment_hwidth = (segment_width / 2);
    PAUSED = false;
    leg_phase = 0;

walker = new Walker();
}

function Walker() {
    this.angle = random(TAU);
    this.vec_pos = createVector((width / 2), (height / 2));
    this.vec_vel = createVector(0.0);
    this.vel_limit = (step * 5);

this.update = function() {
        if (!PAUSED) {
            var temp = 0;
            var x = this.vec_pos.x;
            var y = this.vec_pos.y;
            var prev_angle = this.angle;
            var adjust = false;
            var vectorCreated = false;

if (x <= segment_length) {
                temp = createVector(step, 0);
                vectorCreated = true;
                adjust = true;
            }
            if (x >= (width - segment_length)) {
                if (vectorCreated) {
                    temp.add(createVector(-step, 0));
                } else {
                    temp = createVector(-step, 0);
                }
                vectorCreated = true;
                adjust = true;
            }
            if (y <= segment_length) {
                if (vectorCreated) {
                    temp.add(createVector(0, step));
                } else {
                    temp = createVector(0, step);
                }
                vectorCreated = true;
                adjust = true;
            }
            if (y >= (height - segment_length)) {
                if (vectorCreated) {
                    temp.add(createVector(0, -step));
                } else {
                    temp = createVector(0, -step);
                }
                adjust = true;
            }

if (adjust) {
                var adjustment = angDiff(this.vec_acc.heading(), temp.heading());
                this.angle = (prev_angle + (adjustment / 15) + random(-EIGHTH_PI, EIGHTH_PI));
            } else {
                this.angle = (prev_angle + random(-EIGHTH_PI, EIGHTH_PI));
            }

this.vec_acc = createVector((cos(this.angle) * step), (sin(this.angle) * step));

this.vec_vel.add(this.vec_acc);
            this.vec_vel.limit(this.vel_limit);

this.vec_prev_x = this.vec_pos.x;
            this.vec_prev_y = this.vec_pos.y;
            this.vec_pos.add(this.vec_vel);

this.vec_pos.x = max(segment_length, min(this.vec_pos.x, (width - segment_length)));
            this.vec_pos.y = max(segment_length, min(this.vec_pos.y, (height - segment_length)));

segment_x[0] = this.vec_pos.x;
            segment_y[0] = this.vec_pos.y;
            for (i = 0; i < total_segments - 1; i++) {
                var angle = atan2((segment_y[i] - segment_y[i + 1]), (segment_x[i] - segment_x[i + 1]));
                segment_x[i + 1] = (segment_x[i] - (cos(angle) * segment_length));
                segment_y[i + 1] = (segment_y[i] - (sin(angle) * segment_length));
            }

leg_phase += (dist(this.vec_prev_x, this.vec_prev_y, this.vec_pos.x, this.vec_pos.y) / 8);
        }
    }

this.display = function() {
        var width_mod = (sin((frameCount + 100) / 15) * (segment_width / 4));
        var begin_angle = atan2((segment_y[1] - segment_y[0]), (segment_x[1] - segment_x[0]));
        var begin_width = (segment_width + width_mod);
        var leg_wave = (sin(leg_phase) * QUARTER_PI);
        var leg_angle1 = (begin_angle + EIGHTH_PI + leg_wave);
        var leg_angle2 = (begin_angle - EIGHTH_PI - leg_wave);
        var leg_length = (segment_width + (begin_width / 2));

var whisker_length = (segment_length + (width_mod / 2));
        var whisker1_x = (this.vec_pos.x + (cos(this.angle - EIGHTH_PI) * whisker_length));
        var whisker1_y = (this.vec_pos.y + (sin(this.angle - EIGHTH_PI) * whisker_length));
        var whisker2_x = (this.vec_pos.x + (cos(this.angle + EIGHTH_PI) * whisker_length));
        var whisker2_y = (this.vec_pos.y + (sin(this.angle + EIGHTH_PI) * whisker_length));
        var r = (segment_width / 2);

strokeWeight(segment_width / 5);
        fill(255);
        stroke(115);
        line(this.vec_pos.x, this.vec_pos.y, whisker1_x, whisker1_y);
        line(this.vec_pos.x, this.vec_pos.y, whisker2_x, whisker2_y);
        ellipse(whisker1_x, whisker1_y, r, r);
        ellipse(whisker2_x, whisker2_y, r, r);

triangle((segment_x[0] + (cos(begin_angle - HALF_PI) * begin_width)), (segment_y[0] + (sin(begin_angle - HALF_PI) * begin_width)), (segment_x[0] + (cos(begin_angle + HALF_PI) * begin_width)), (segment_y[0] + (sin(begin_angle + HALF_PI) * begin_width)), (segment_x[0] + (cos(begin_angle - PI) * begin_width)), (segment_y[0] + (sin(begin_angle - PI) * begin_width)));

beginShape(TRIANGLE_STRIP);
        line(segment_x[0], segment_y[0], (segment_x[0] + (cos(leg_angle1) * leg_length)), (segment_y[0] + (sin(leg_angle1) * leg_length)));
        line(segment_x[0], segment_y[0], (segment_x[0] + (cos(leg_angle2) * leg_length)), (segment_y[0] + (sin(leg_angle2) * leg_length)));
        vertex((segment_x[0] + (cos(begin_angle + HALF_PI) * begin_width)), (segment_y[0] + (sin(begin_angle + HALF_PI) * begin_width)));
        vertex((segment_x[0] + (cos(begin_angle - HALF_PI) * begin_width)), (segment_y[0] + (sin(begin_angle - HALF_PI) * begin_width)));

for (i = 0; i < total_segments - 1; i++) {
            var multiplier = (1 - ((i + 1) / total_segments));
            width_mod = (sin((frameCount + (multiplier * 100)) / 15) * (segment_width / 4));
            var end_angle = atan2((segment_y[i + 1] - segment_y[i]), (segment_x[i + 1] - segment_x[i]));
            var end_width = max(((segment_width * multiplier) + width_mod), 1);

leg_wave = (sin(leg_phase * multiplier) * QUARTER_PI);
            leg_angle1 = (begin_angle + EIGHTH_PI + leg_wave);
            leg_angle2 = (begin_angle - EIGHTH_PI - leg_wave);
            leg_length = (segment_width + (end_width / 2));

line(segment_x[i + 1], segment_y[i + 1], (segment_x[i + 1] + (cos(leg_angle1) * leg_length)), (segment_y[i + 1] + (sin(leg_angle1) * leg_length)));
            line(segment_x[i + 1], segment_y[i + 1], (segment_x[i + 1] + (cos(leg_angle2) * leg_length)), (segment_y[i + 1] + (sin(leg_angle2) * leg_length)));

if ((i & 1) === 0) {
                vertex((segment_x[i + 1] + (cos(begin_angle - HALF_PI) * begin_width)), (segment_y[i + 1] + (sin(begin_angle - HALF_PI) * begin_width)));
                vertex((segment_x[i + 1] + (cos(begin_angle + HALF_PI) * begin_width)), (segment_y[i + 1] + (sin(begin_angle + HALF_PI) * begin_width)));
            } else {
                vertex((segment_x[i + 1] + (cos(begin_angle + HALF_PI) * begin_width)), (segment_y[i + 1] + (sin(begin_angle + HALF_PI) * begin_width)));
                vertex((segment_x[i + 1] + (cos(begin_angle - HALF_PI) * begin_width)), (segment_y[i + 1] + (sin(begin_angle - HALF_PI) * begin_width)));
            }

begin_angle = end_angle;
            begin_width = end_width;
        }
        endShape();
    }
}

function keyReleased() {
    if (key === ' ') {
        PAUSED = !PAUSED;
    }
}

function touchStarted() {
    PAUSED = !PAUSED;
}

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

function draw() {
    background(0);
    walker.display();
    walker.update();

//textAlign(RIGHT, BOTTOM);
    //text(round(frameRate()), width, height)
}

// Signed delta angle
function angDiff(source, target) {
    var a = (target - source);
    return ((a > PI) ? (a -= TAU) : (a < -PI) && (a += TAU), a);
}

编译

CSS

HTML

恶心的多足爬虫

html5, centipede

编辑器支持Emmet

快捷键

恶心的多足爬虫

html5, centipede

HTML5 P5.js不规则圆形动画

HTML5 P5.js光芒生成图案动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：