谢林偏析模型演示动画

Schelling Segregation Model (SSM) 合金中各组成元素在结晶时分布不均匀的现象称为偏析。

Canvas

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = 75;
var h = 50;
var scale = 15;

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);

canvas.width = w * scale;
canvas.height = h * scale;
var context = canvas.getContext("2d");
context.scale(scale, scale);

var data = new Int8Array(w * h);
var freeLocations = [];

function init(data, w, h, freespacePrecentage) {

for (var i = 0; i < w * h; i++) {
        data[i] = 1 + parseInt(Math.random() * 4 - .5);
        if (Math.random() < freespacePrecentage) {
            data[i] = 0;
        }
    }
}

function iteration(data, sameAsMe) {

var stable = true;
    var change = [];
    var freespaces = [];
    var swaps = 0;
    for (var i = 0; i < data.length; i++) {
        if (data[i] == 0) {
            freespaces.push(i);
            continue;
        }

var type = data[i];

var count = 0; //non-empty spaces around pixel

count += (data[i - w - 1] != 0) ? 1 : 0;
        count += (data[i - w] != 0) ? 1 : 0;
        count += (data[i - w + 1] != 0) ? 1 : 0;
        count += (data[i - 1] != 0) ? 1 : 0;
        count += (data[i + 1] != 0) ? 1 : 0;
        count += (data[i + w - 1] != 0) ? 1 : 0;
        count += (data[i + w] != 0) ? 1 : 0;
        count += (data[i + w + 1] != 0) ? 1 : 0;

var sum = 0; //amount of similar pixels

sum += (data[i - w - 1] == type) ? 1 : 0;
        sum += (data[i - w] == type) ? 1 : 0;
        sum += (data[i - w + 1] == type) ? 1 : 0;
        sum += (data[i - 1] == type) ? 1 : 0;
        sum += (data[i + 1] == type) ? 1 : 0;
        sum += (data[i + w - 1] == type) ? 1 : 0;
        sum += (data[i + w] == type) ? 1 : 0;
        sum += (data[i + w + 1] == type) ? 1 : 0;

if (sum < sameAsMe || count - sum > sum) {
            swaps++;
            change.push(i);
            stable = false;
        }
    }

freespaces.sort(function(a, b) {
        return Math.random() > .5 ? -1 : 1;
    });

var tmp, r;
    for (i = 0; i < change.length; i++) {

tmp = data[freespaces[0]];
        data[freespaces[0]] = data[change[i]];
        data[change[i]] = tmp;

freespaces.shift();
        freespaces.push(change[i]);

}

if (!stable) {
        recurse = setTimeout(iteration, 0, data, sameAsMe);
    } else {
        console.log("stable")
    }
    render(data);

}

function render(data) {

context.fillStyle = "rgba( 48,0,64, 0.5 )";
    context.fillRect(0, 0, w, h);

for (var i = 0; i < data.length; i++) {
        if (data[i] == 0) continue;
        var value = ((data[i]) * 0xFF / 4);
        context.fillStyle = "#" + parseInt(value << 16 | value << 8 | value).toString(16);
        context.fillRect((i % w), parseInt(i / w), 1, 1);
    }

}

window.onmousedown = function() {
    clearTimeout(recurse);
    init(data, w, h, freespacePercentage);
    iteration(data, 3);
    render(data);
}
var recurse = null;
var freespacePercentage = .15;
init(data, w, h, freespacePercentage);
render(data);
iteration(data, 3);

window.CP.PenTimer.stopAllMonitoring = !0;

编译

CSS

HTML

Schelling Segregation Model (SSM) 合金中各组成元素在结晶时分布不均匀的现象称为偏析。

Canvas

编辑器支持Emmet

快捷键

Schelling Segregation Model (SSM) 合金中各组成元素在结晶时分布不均匀的现象称为偏析。

Canvas

CANVAS 各种齿数的轮状物漂浮演示动画

CANVAS 方向操控的动画演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：