Processing.js 用简单线条构造的水母动画

Jellyfish, Source: http://marcinignac.com/blog/cindermedusae-making-generative-creatures/

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var sketch1 = function($p) {
    var shade = 50;
    var w = 950,
        h = 360,
        r = h * 0.35,
        m = (w - 2 * 3 * r) / 8;
    var segments1 = segments2 = segments3 = 32;
    var phiStep1 = phiStep2 = phiStep3 = Math.PI / segments1;

$p.size(w, h);
    $p.background(252, 236, 194);

$p.fill(0);
    $p.text('r', h / 2 + 60, h / 2 + 10);
    $p.noFill();

$p.translate(r + 2 * m, h / 2);

function evalVertex1(phi) {
        return {
            x: r * $p.cos(phi - Math.PI / 2),
            y: r * $p.sin(phi - Math.PI / 2)
        };
    };

for (var phi = 0; phi < 2 * Math.PI; phi += phiStep1) {
        $p.stroke(shade);
        var p1 = evalVertex1(phi),
            p2 = evalVertex1(phi + phiStep1);

$p.line(p1.x, p1.y, p2.x, p2.y);

if (phi < Math.PI / 2) {
            shade += 5;
            $p.line(p1.x, p1.y, 0, 0);
        }
    }

$p.translate(2 * r + 2 * m, 0);
    shade = 50;

function evalVertex2(phi) {
        var localR = r * (1 + 0.075 * $p.cos(phi * 10));
        return {
            x: localR * $p.cos(phi - Math.PI / 2),
            y: localR * $p.sin(phi - Math.PI / 2)
        };
    }

for (var phi = 0; phi < 2 * Math.PI; phi += phiStep2) {
        $p.stroke(shade);
        var p1 = evalVertex2(phi),
            p2 = evalVertex2(phi + phiStep2);

$p.line(p1.x, p1.y, p2.x, p2.y);

if (phi < Math.PI / 2) {
            shade += 5;
            $p.line(p1.x, p1.y, 0, 0);
        }
    }

$p.translate(2 * r + 2 * m, 0);
    shade = 50;

function evalVertex3(phi) {
        var localR = r * (1 + 0.075 * $p.cos(phi * 10));
        return {
            x: localR * $p.cos(phi - Math.PI / 2),
            y: localR * $p.sin(phi - Math.PI / 2)
        };
    }

var face = 0;
    for (var phi = 0; phi < 2 * Math.PI; phi += phiStep3) {
        $p.stroke(shade);
        var p1 = evalVertex3(phi),
            p2 = evalVertex3(phi + phiStep3);

$p.line(p1.x, p1.y, p2.x, p2.y);

if (face++ % 6 === 0) {
            $p.strokeWeight(3);
            $p.stroke(255, 0, 0);
            $p.line(p1.x, p1.y, p2.x, p2.y);
            $p.strokeWeight(1);
        }
    }
};

var sketch2 = function($p) {
    var shade = 50;
    var w = 950,
        h = 360,
        r = h * 0.35,
        m = (w - 2 * 3 * r) / 8;
    var segments1 = 8,
        segments2 = 16,
        segments3 = 32;
    var thetaStep1 = Math.PI / segments1,
        thetaStep2 = Math.PI / segments2,
        thetaStep3 = Math.PI / segments3;

with($p) {
        size(w, h);
        background(252, 236, 194);

fill(0);

text("x, y", r + 2 * m - 60, h / 2 - r);
        text("x', y'", r + 2 * m + 40, h / 2 - r);
        ellipse(r + 2 * m + r * cos(thetaStep1 + Math.PI / 2), h / 2 - r * sin(thetaStep1 + Math.PI / 2), 5, 5);
        ellipse(r + 2 * m - r * cos(thetaStep1 + Math.PI / 2), h / 2 - r * sin(thetaStep1 + Math.PI / 2), 5, 5);
        noFill();
    }

$p.translate(r + 2 * m, h / 2);
    shade = 50;

function evalVertex1(theta) {
        return {
            x: r * $p.cos(theta - Math.PI / 2),
            y: r * $p.sin(theta - Math.PI / 2)
        };
    }

for (var theta = 0; theta < Math.PI; theta += thetaStep1) {
        $p.stroke(shade);

var p1 = evalVertex1(theta),
            p2 = evalVertex1(theta + thetaStep1);

$p.line(p1.x, p1.y, p2.x, p2.y);
        $p.line(-p1.x, p1.y, -p2.x, p2.y);

if (theta < Math.PI / 2) {
            shade += 30;
            $p.line(p1.x, p1.y, 0, 0);
            $p.line(-p1.x, p1.y, 0, 0);
        }
    }

$p.translate(2 * r + 2 * m, 0);
    $p.stroke(100);

var wrapAngle = Math.PI / 2 + thetaStep2;

function evalVertex2(theta) {
        return {
            x: r * $p.cos(theta - Math.PI / 2),
            y: theta < wrapAngle ? r * $p.sin(theta - Math.PI / 2) : -r * $p.sin(theta - Math.PI / 2) + r * 0.5
        }
    }

for (var theta = 0; theta < Math.PI; theta += thetaStep2) {
        var p1 = evalVertex2(theta),
            p2 = evalVertex2(theta + thetaStep2);

$p.line(p1.x, p1.y, p2.x, p2.y);
        $p.line(-p1.x, p1.y, -p2.x, p2.y);
    }

$p.translate(2 * r + 2 * m, 0);
    $p.stroke(100);

var wrapAngle = Math.PI / 2 + thetaStep3 * 3;
    var smoothRange = thetaStep3 * 4;

function evalVertex3(theta) {
        if (theta < wrapAngle) return {
            x: r * $p.cos(theta - Math.PI / 2),
            y: r * $p.sin(theta - Math.PI / 2)
        };

if (theta <= wrapAngle + smoothRange + 0.01) {
            var t = $p.map(theta, wrapAngle, wrapAngle + smoothRange, 0, Math.PI / 2);
            return {
                x: r * $p.cos(theta - Math.PI / 2),
                y: r * $p.sin(wrapAngle - Math.PI / 2) + 20 * $p.sin(t)
            };
        }

var t = $p.map(theta, wrapAngle + smoothRange, Math.PI, Math.PI / 2, 0);
        return {
            x: 0.75 * r * $p.cos(t - Math.PI / 2),
            y: 0.75 * r * $p.sin(t - Math.PI / 2) + r * 0.5
        }
    }

for (var theta = 0; theta < Math.PI; theta += thetaStep3) {
        var p1 = evalVertex3(theta),
            p2 = evalVertex3(theta + thetaStep3);

$p.line(p1.x, p1.y, p2.x, p2.y);
        $p.line(-p1.x, p1.y, -p2.x, p2.y);
    }
};

var sketch3 = function($p) {
    var shade = 50;
    var w = 950,
        h = 360,
        r = h * 0.35,
        m = (w - 2 * 3 * r) / 8;
    var segments1 =
        segments2 =
        segments3 = 32;
    var thetaStep1 =
        thetaStep2 =
        thetaStep3 = Math.PI / segments3;

$p.setup = function() {
        with($p) {
            size(w, h);
            background(252, 236, 194);
        }
    }

var wrapAngle = Math.PI / 2 + thetaStep3 * 3;
    var smoothRange = thetaStep3 * 4;
    var prevTime = $p.millis();
    var animTime = 0;

function evalVertex3(theta) {
        if (theta < wrapAngle) return {
            x: r * $p.cos(theta - Math.PI / 2),
            y: r * $p.sin(theta - Math.PI / 2)
        }

function evalNormal3(theta) {
        var p1 = evalVertex3(theta),
            p2 = evalVertex3(theta - thetaStep3 / 2);

return normalize({
            x: -(p2.y - p1.y),
            y: p2.x - p1.x
        }, 10);
    }

function normalize(v, newLen) {
        newLen = newLen || 1;

var len = $p.sqrt(v.x * v.x + v.y * v.y);
        if (len === 0) return v;

v.x = (v.x / len) * newLen;
        v.y = (v.y / len) * newLen;

return v;
    };

$p.draw = function() {
        var time = $p.millis();
        var delta = time - prevTime;
        animTime += delta / 500;
        prevTime = time;

$p.background(252, 236, 194);

$p.translate(1 * r + 2 * m, h * 0.6);

for (var theta = 0; theta < Math.PI; theta += thetaStep3) {
            var p1 = evalVertex3(theta),
                p2 = evalVertex3(theta + thetaStep3);

var n1 = evalNormal3(theta),
                n2 = evalNormal3(theta + thetaStep3);

with($p) {
                stroke(100);
                line(p1.x, p1.y, p2.x, p2.y);
                line(-p1.x, p1.y, -p2.x, p2.y);

stroke(255, 0, 0);
                line(p1.x, p1.y, p1.x + n1.x, p1.y + n1.y);
                line(-p1.x, p1.y, -p1.x - n1.x, p1.y + n1.y);
            }
        }

$p.translate(r + 2 * m, -h * 0.1);

var prevwx = 0,
            prevwy = 20 * $p.sin(animTime);

for (var t = 1; t < 2 * r; t += 5) {
            var wx = t,
                wy = 20 * $p.sin(animTime + Math.PI * 3 * t / (2 * r));

$p.line(prevwx, prevwy, wx, wy);
            prevwx = wx;
            prevwy = wy;
        }

$p.translate(3 * r + 2 * m, h * 0.1);

for (var theta = 0; theta < Math.PI; theta += thetaStep3) {
            var p1 = evalVertex3(theta),
                p2 = evalVertex3(theta + thetaStep3);

var n1 = evalNormal3(theta),
                n2 = evalNormal3(theta + thetaStep3);

var f = 0.05;
            with($p) {
                p1.x += n1.x * sin(-animTime + p1.y * f);
                p1.y += n1.y * sin(-animTime + p1.y * f);
                p2.x += n2.x * sin(-animTime + p2.y * f);
                p2.y += n2.y * sin(-animTime + p2.y * f);

stroke(100);
                line(p1.x, p1.y, p2.x, p2.y);
                line(-p1.x, p1.y, -p2.x, p2.y);

stroke(255, 0, 0);
                line(p1.x, p1.y, p1.x + n1.x, p1.y + n1.y);
                line(-p1.x, p1.y, -p1.x - n1.x, p1.y + n1.y);
            }
        }
    };
};

var sketch4 = function($p) {
    var shade = 50;
    var w = 300,
        h = 600,
        r = h / 2 * 0.35,
        m = (w - r) / 8;
    var segments = 32;
    var thetaStep = Math.PI / segments;

$p.setup = function() {
        $p.size(w, h);
    }

var wrapAngle = Math.PI / 2 + thetaStep * 3;
    var smoothRange = thetaStep * 4;
    var prevTime = $p.millis();
    var animTime = 0;

function evalVertex(theta) {
        if (theta < wrapAngle) return {
            x: r * $p.cos(theta - Math.PI / 2),
            y: r * $p.sin(theta - Math.PI / 2)
        }

function evalNormal(theta) {
        var p1 = evalVertex(theta),
            p2 = evalVertex(theta - thetaStep / 2);

return normalize({
            x: -(p2.y - p1.y),
            y: p2.x - p1.x
        }, 10);
    }

function normalize(v, newLen) {
        newLen = newLen || 1;

var len = $p.sqrt(v.x * v.x + v.y * v.y);
        if (len === 0) return v;

v.x = (v.x / len) * newLen;
        v.y = (v.y / len) * newLen;

return v;
    };

$p.draw = function() {
        var time = $p.millis();
        var delta = time - prevTime;
        animTime += delta / 500;
        prevTime = time;

$p.background(0, 0);

$p.translate(1 * r + 2 * m, h * 0.2);

var f = 0.05;

for (var theta = 0; theta < Math.PI * 1.01; theta += thetaStep) {
            var p1 = evalVertex(theta),
                p2 = evalVertex(theta + thetaStep);

var n1 = evalNormal(theta),
                n2 = evalNormal(theta + thetaStep);

with($p) {
                p1.x += n1.x * sin(-animTime + p1.y * f);
                p1.y += n1.y * sin(-animTime + p1.y * f);
                p2.x += n2.x * sin(-animTime + p2.y * f);
                p2.y += n2.y * sin(-animTime + p2.y * f);

stroke(0, 0, 255);
                strokeWeight(3);
                line(p1.x, p1.y, p2.x, p2.y);
                line(-p1.x, p1.y, -p2.x, p2.y);
                strokeWeight(1);

if (theta <= wrapAngle + smoothRange + 0.01) {
                    stroke(0, 0, 180);

line(p1.x, p1.y, p1.x - n1.x, p1.y - n1.y);
                    line(-p1.x, p1.y, -p1.x + n1.x, p1.y - n1.y);
                } else {
                    stroke(100, 0, 0);

var l = {
                        x1: p1.x,
                        y1: p1.y,
                        x2: p1.x,
                        y2: p1.y + n1.y + abs((pow(theta, 7) / 6) * sin(-animTime * f))
                    };

line(l.x1, l.y1, l.x2, l.y2);

l = {
                        x1: -p1.x,
                        y1: p1.y,
                        x2: -p1.x,
                        y2: p1.y + n1.y + abs((pow(theta, 7) / 6) * sin(-animTime * f))
                    };

line(l.x1, l.y1, l.x2, l.y2);
                }
            }
        }
    };
};

window.onload = function() {
    //var canvas = document.getElementById('processingCanvas1');
    //var p = new Processing(canvas, sketch1);

//var canvas = document.getElementById('processingCanvas2');
    //var p = new Processing(canvas, sketch2);

//var canvas = document.getElementById('processingCanvas3');
    //var p = new Processing(canvas, sketch3);

var canvas = document.getElementById('processingCanvas4');
    var p = new Processing(canvas, sketch4);
};

编译

CSS

HTML

Jellyfish, Source: http://marcinignac.com/blog/cindermedusae-making-generative-creatures/

编辑器支持Emmet

快捷键

Jellyfish, Source: http://marcinignac.com/blog/cindermedusae-making-generative-creatures/

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：