html p5 绘制图片,HTML5/P5.js谐波线图案自动生成动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

console.clear();

var Harmony = function() {

this.numberofbeams = 2;

this.skip = 2;

this.ratio = 1.5;

this.lengthChange = 1;

this.speedMod = 4;

this.goldenRatio = true;

this.spokes = true;

this.noticableSpokes = false;

this.marking = false;

this.persistant = -1;

};

var beams = [];

var numberofbeams = 2;

var skip = 2;

var ratio = 1.618;

var length = 0;

var lengthchange = 1;

var speedMod = 4;

var dpx = 0;

var dpy = 0;

var harmony = new Harmony();

var gui = new dat.GUI();

var num_controller = gui.add(harmony, 'numberofbeams', 1, 12).step(1),

skip_controller = gui.add(harmony, 'skip', 1, 12).step(1),

ratio_controller = gui.add(harmony, 'ratio', 1, 12).step(0.5),

goldenRatio_controller = gui.add(harmony, 'goldenRatio'),

length_controller = gui.add(harmony, 'lengthChange', 0, 2).step(0.25),

speedMod_controller = gui.add(harmony, 'speedMod', 0.5, 10).step(0.5),

spoke_controller = gui.add(harmony, 'spokes'),

noticableSpokes_controller = gui.add(harmony, 'noticableSpokes'),

marking_controller = gui.add(harmony, 'marking'),

persistant_controller = gui.add(harmony, 'persistant', -1, 255).step(1);

num_controller.onFinishChange(function(value) {

numberofbeams = value;

restart();

});

skip_controller.onFinishChange(function(value) {

skip = value;

restart();

});

noticableSpokes_controller.onFinishChange(function(value) {

restart();

});

ratio_controller.onFinishChange(function(value) {

if (!harmony.goldenRatio) {

ratio = value;

restart();

}

});

length_controller.onFinishChange(function(value) {

lengthchange = 1 / value;

restart();

});

speedMod_controller.onFinishChange(function(value) {

speedMod = value;

restart();

});

goldenRatio_controller.onFinishChange(function(value) {

if (value) {

ratio = (Math.sqrt(5) + 1) / 2;

} else {

ratio = harmony.ratio;

}

restart();

});

spoke_controller.onFinishChange(function(value) {

restart();

});

marking_controller.onFinishChange(function(value) {

restart();

});

function restart() {

beams.splice(0, beams.length);

background(0);

start();

}

function Beam(_x, _y, s, l, dir, d) {

this.cx = _x;

this.cy = _y;

this.lx;

this.ly;

this.previous_lx;

this.previous_ly;

this.rotation = 0;

this.speed = s;

this.length = l;

this.direction = dir;

this.draw = d;

this.update = function(__x, __y) {

this.cx = __x;

this.cy = __y;

this.rotation += (this.speed * (this.direction ? 1 : -1));

//this.rotation %= 360;

this.lx = this.cx + l * Math.sin(this.rotation);

this.ly = this.cy + l * Math.cos(this.rotation);

stroke(255);

strokeWeight(4);

if (this.draw) {

line(this.previous_lx, this.previous_ly, this.lx, this.ly);

}

strokeWeight(1);

if (harmony.spokes) {

if (harmony.noticableSpokes) {

stroke(255, 255, 255, 128);

} else {

stroke(128, 128, 128, 16);

}

line(__x, __y, this.lx, this.ly);

}

if (harmony.marking) {

stroke(0, 255, 0);

line(this.cx, this.cy, this.lx, this.cy);

line(this.cx, this.cy, this.cx, this.ly);

}

/*console.log(this.rotation);*/

this.previous_lx = this.lx;

this.previous_ly = this.ly;

}

}

function setup() {

$("canvas").width($(window).width());

$("canvas").height($(window).height());

w = $("canvas").width();

h = $("canvas").height();

createCanvas(w, h);

start();

}

function start() {

$("canvas").width($(window).width());

$("canvas").height($(window).height());

w = $("canvas").width();

h = $("canvas").height();

var nums = 1,

mod = 1;

for (var i = 0; i < numberofbeams; i++) {

nums += mod;

mod /= lengthchange;

}

length = (Math.min(w / 2, h / 2) - 40) / nums;

var l = h / 2;

dpx = w / 2;

dpy = h / 2;

var speed = (0.02 / (numberofbeams * (ratio * ratio))) * speedMod;

for (var i = 0; i < numberofbeams; i++) {

speed *= ratio;

beams.push(new Beam(w / 2, dpy, speed, length, i % skip == 0, i + 1 == numberofbeams));

console.log(i + 1 == numberofbeams);

length /= lengthchange;

}

}

function draw() {

if (harmony.persistant > -1) {

background(0, 0, 0, harmony.persistant);

}

w = $("canvas").width();

h = $("canvas").height();

var px = dpx;

var py = dpy;

var pr = 0;

for (var i = 0; i < beams.length; i++) {

beams[i].update(px, py);

px = beams[i].lx;

py = beams[i].ly;

}

}