html5 canvas花瓣,Canvas数学之美 - 花瓣引力场

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var hc = {

worlds: [],

startTime: null,

anim: null,

summon: function() {

for (var key in arguments) {

this.worlds.push(arguments[key]);

}

},

ignite: function() {

this.startTime = new Date().getTime();

this.igniteWorlds();

this.frame();

},

frame: function() {

hc.paint(new Date().getTime());

hc.anim = window.requestAnimationFrame(hc.frame);

},

paint: function(t) {

for (var key in hc.worlds) {

(function(k) {

setTimeout(function() {

hc.worlds[k].world.update(t - hc.startTime);

}, hc.worlds[k].timeout);

})(key);

}

},

igniteWorlds: function() {

for (var key in hc.worlds) {

hc.worlds[key].world.ignite(hc.worlds[key].args);

}

}

};

/**

* JS for Hartcore hc_base

* Alexandre Andrieux @2016

* Base structure for a new world

*/

var hc_base = {

name: "base",

ignite: function(args) {

// Store arguments

this.hue = args.hue || 0; // That's an example.

this.seedsPop = args.seedsPop || 3;

// Initialize own canvas

var canvas = document.createElement('canvas');

canvas.class = 'hart';

canvas.id = this.name;

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

document.body.appendChild(canvas);

// Get and store canvas context

this.canvas = document.getElementById(canvas.id);

this.ctx = this.canvas.getContext('2d');

// Variable 1

this.var1 = 0;

this.var1count = 0;

this.var1var = 200;

// Variable 2

this.var2 = 0;

this.var2count = 0;

this.var2var = 200;

// Steps

this.stepCount = 0;

this.birthPeriod = 5;

// Particles

this.seeds = [];

Start point

this.xC = this.canvas.width / 2;

this.yC = this.canvas.height / 2;

Central star

this.xStar = this.xC;

this.yStar = this.yC;

this.starRadius = 0;

this.starAngle = 0;

this.starAngularSpeed = 0.001;

// Physical properties

this.gravity = 60000;

Unleash generation 1

for (var i = 0; i < this.seedsPop; i++) {

this.birth();

}

// Draw background

this.background();

},

background: function() {

this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);

this.ctx.fillStyle = "black";

this.ctx.fill();

},

update: function(t) {

this.evolve(t);

this.move();

this.draw();

},

evolve: function(t) {

// Laws (increasing a variable)

this.stepCount++;

this.evolutionStar();

// Effects (when this variable reaches a threshold, do sth)

if (this.stepCount % this.birthPeriod == 0 && this.stepCount < 30000) {

this.birth();

}

},

evolutionStar: function() {

this.starAngle += this.starAngularSpeed;

this.starRadius += 0;

this.xStar = this.xC + this.starRadius * Math.cos(this.starAngle);

this.yStar = this.yC + this.starRadius * Math.sin(this.starAngle);

},

birth: function(seed) {

/*var launchAngle = (function(a) {

return (Math.PI / (2*a) + 1/a * Math.floor(a * Math.random()) * 2*Math.PI);

})(3);*/

var launchAngle = 0;

var launchSpeed = 6;

var launchY = Math.random() * this.stepCount / 20;

var launchX = 0;

var seed = seed || {

xLast: launchX,

x: launchX,

xSpeed: launchSpeed * Math.cos(launchAngle),

yLast: launchY,

y: launchY,

ySpeed: launchSpeed * Math.sin(launchAngle)

};

this.seeds.push(seed);

},

move: function() {

// Move all particles

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

var seed = this.seeds[i];

// Save last position

seed.xLast = seed.x;

seed.yLast = seed.y;

// Acceleration and calmer

var distToStar = Math.sqrt(Math.pow(seed.x - this.xStar, 2) + Math.pow(seed.y - this.yStar, 2));

var acc = -this.gravity * Math.min(Math.pow(distToStar, -2), 0.0001);

// Speed

seed.xSpeed += acc / distToStar * (seed.x - this.xStar);

seed.ySpeed += acc / distToStar * (seed.y - this.yStar);

// Position

seed.x += seed.xSpeed;

seed.y += seed.ySpeed;

}

},

draw: function() {

for (var key in this.seeds) {

var seed = this.seeds[key];

// HSLA

var h = 250;

var sat = '80%';

var lum = '100%';

var opa = 0.01;

// Line width

var wLine = 1;

// Stroke

this.ctx.strokeStyle = 'hsla(' + h + ', ' + sat + ', ' + lum + ", " + opa + ")";

this.ctx.lineWidth = wLine;

this.ctx.lineCap = "round";

this.ctx.beginPath();

this.ctx.moveTo(seed.xLast, seed.yLast);

this.ctx.lineTo(seed.x, seed.y);

this.ctx.stroke();

}

},

spaceShift: function(r, theta) {

var x = this.xC + r * Math.cos(theta);

var y = this.yC - r * Math.sin(-theta);

return {

x: x,

y: y

};

}

};

// To clone worlds and summon with different arguments

/*

------- Add Underscore.js, and uncomment this -------

var hc_base2 = _.cloneDeep(hc_base);

hc_base2.name = 'base2';

*/

// Go go go!

hc.summon({

world: hc_base,

timeout: 0,

args: {

seedsPop: 1

}

});

hc.ignite();