html5 canvas花瓣,Canvas 花瓣状几何图形生成动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.onload = loadScene;

function backingScale(context) {

if ('devicePixelRatio' in window) {

if (window.devicePixelRatio > 1) {

return window.devicePixelRatio;

}

}

return 1;

}

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

var tempCtx = tempCanvas.getContext('2d');

var scaleFactor = backingScale(tempCtx);

var canvas, gl,

ratio,

vertices,

velocities,

freqArr,

cw,

ch,

colorLoc,

thetaArr,

velThetaArr,

velRadArr,

boldRateArr,

drawType,

numLines = 80000;

var targetArr = [];

var randomTargetXArr = [],

randomTargetYArr = [];

drawType = 2;

/**

* Initialises WebGL and creates the 3D scene.

*/

function Target(rad) {

this.x = 0;

this.y = 0;

this.rotate = 0;

this.radius = 0;

this.baseRad = rad;

this.update();

};

Target.prototype = {

freqSpecial: 0.0,

update: function() {

this.rotate_speed = curObject.rotateSpeed + Math.random() * curObject.rotateSpeedRandom; //Math.random(1) * 0.2 + 0.001;

//this.friction = Math.random(1) * 0.8 + 0.1;

this.speed = Math.random(1) * curObject.speed + curObject.speed;

this.step = Math.random() * curObject.stepRandom + curObject.step;

this.freq = curObject.freq + curObject.freqRandom * Math.random() + this.freqSpecial;

this.bold_rate = this.baseRad * (curObject.boldRate + Math.random() * curObject.boldRandom);

//console.log(this.)

}

}

var curObject = {

rotateSpeed: 0.000,

rotateSpeedRandom: 0,

speed: 0.03,

speedRandom: 0.0,

step: 0,

stepRandom: 0.0,

freq: 0.01,

freqSpecial: 0.0,

freqRandom: 0.00,

boldRate: 1.0,

boldRandom: 0,

update: function() {

onControllerChange(0);

}

};

var onControllerChange = function(value) {

for (var ii = 0; ii < targetArr.length; ii++) {

targetArr[ii].update();

}

};

var incNum = 0.02;

var incSign = +1;

var count = 0;

function onChangeTimer() {

curObject.step += incNum * incSign * (count + 1);

curObject.freq += incNum * incSign * (count + 1);

onControllerChange(0);

//count = count + count + 1;

count++;

if (count < 4) setTimeout(onChangeTimer, 500);

else setTimeout(backTimer, 500);

}

circleCount = 1;

function backTimer() {

circleCount++;

if (circleCount > 8) {

circleCount = 1;

targetArr = [];

var targetRad = 0.9;

var target = new Target(targetRad);

targetArr.push(target);

} else {

for (var ii = (circleCount - 1) * (circleCount - 1); ii < circleCount * circleCount; ii++) {

var targetRad = 0.9;

var target = new Target(targetRad);

targetArr.push(target);

}

var targetNumber = targetArr.length;

var kankaku = 2.0 / (circleCount);

for (var xx = 0; xx < circleCount; xx++) {

for (var yy = 0; yy < circleCount; yy++) {

var num = xx + yy * circleCount;

targetArr[num].baseRad = .9 / circleCount;

targetArr[num].x = 1.0 - kankaku * (xx + .5);

targetArr[num].y = 1.0 - kankaku * (yy + .5);

targetArr[num].freqSpecial = (xx + yy) * 0.01;

}

}

}

count = 0;

curObject.step = 0.00;

curObject.freq = 0.01;

onControllerChange(0);

setTimeout(onChangeTimer, 300);

}

/*

rotSpeedController.onChange(function(value) {

// Fires on every change, drag, keypress, etc.

console.log("change")

});

*/

function loadScene() {

// Get the canvas element

canvas = document.getElementById("c");

// Get the WebGL context

gl = canvas.getContext("experimental-webgl");

// Check whether the WebGL context is available or not

// if it's not available exit

if (!gl) {

alert("There's no WebGL context available.");

return;

}

// Set the viewport to the canvas width and height

cw = window.innerWidth;

ch = window.innerHeight;

canvas.width = cw;

canvas.height = ch;

gl.viewport(0, 0, canvas.width, canvas.height);

var vertexShaderScript = document.getElementById("shader-vs");

var vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, vertexShaderScript.text);

gl.compileShader(vertexShader);

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {

alert("Couldn't compile the vertex shader");

gl.deleteShader(vertexShader);

return;

}

var fragmentShaderScript = document.getElementById("shader-fs");

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, fragmentShaderScript.text);

gl.compileShader(fragmentShader);

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {

alert("Couldn't compile the fragment shader");

gl.deleteShader(fragmentShader);

return;

}

// Create a shader program.

gl.program = gl.createProgram();

gl.attachShader(gl.program, vertexShader);

gl.attachShader(gl.program, fragmentShader);

gl.linkProgram(gl.program);

if (!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) {

alert("Unable to initialise shaders");

gl.deleteProgram(gl.program);

gl.deleteProgram(vertexShader);

gl.deleteProgram(fragmentShader);

return;

}

gl.useProgram(gl.program);

var vertexPosition = gl.getAttribLocation(gl.program, "vertexPosition");

gl.enableVertexAttribArray(vertexPosition);

gl.clearColor(0.1, 0.1, 0.12, 1.0);

gl.clearDepth(1.0);

gl.enable(gl.BLEND);

gl.disable(gl.DEPTH_TEST);

gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

var vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

// ------------------

setup();

// ------------------

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Define the viewing frustum parameters

// More info: http://en.wikipedia.org/wiki/Viewing_frustum

// More info: http://knol.google.com/k/view-frustum

var fieldOfView = 30.0;

var aspectRatio = canvas.width / canvas.height;

var nearPlane = 1.0;

var farPlane = 10000.0;

var top = nearPlane * Math.tan(fieldOfView * Math.PI / 360.0);

var bottom = -top;

var right = top * aspectRatio;

var left = -right;

// Create the perspective matrix. The OpenGL function that's normally used for this,

// glFrustum() is not included in the WebGL API. That's why we have to do it manually here.

// More info: http://www.cs.utk.edu/~vose/c-stuff/opengl/glFrustum.html

var a = (right + left) / (right - left);

var b = (top + bottom) / (top - bottom);

var c = (farPlane + nearPlane) / (farPlane - nearPlane);

var d = (2 * farPlane * nearPlane) / (farPlane - nearPlane);

var x = (2 * nearPlane) / (right - left);

var y = (2 * nearPlane) / (top - bottom);

var perspectiveMatrix = [

x, 0, a, 0,

0, y, b, 0,

0, 0, c, d,

0, 0, -1, 0

];

// Create the modelview matrix

// More info about the modelview matrix: http://3dengine.org/Modelview_matrix

// More info about the identity matrix: http://en.wikipedia.org/wiki/Identity_matrix

var modelViewMatrix = [

1, 0, 0, 0,

0, 1, 0, 0,

0, 0, 1, 0,

0, 0, 0, 1

];

// Get the vertex position attribute location from the shader program

var vertexPosAttribLocation = gl.getAttribLocation(gl.program, "vertexPosition");

// Specify the location and format of the vertex position attribute

gl.vertexAttribPointer(vertexPosAttribLocation, 3.0, gl.FLOAT, false, 0, 0);

//gl.vertexAttribPointer(colorLoc, 4.0, gl.FLOAT, false, 0, 0);

// Get the location of the "modelViewMatrix" uniform variable from the

// shader program

var uModelViewMatrix = gl.getUniformLocation(gl.program, "modelViewMatrix");

// Get the location of the "perspectiveMatrix" uniform variable from the

// shader program

var uPerspectiveMatrix = gl.getUniformLocation(gl.program, "perspectiveMatrix");

// Set the values

gl.uniformMatrix4fv(uModelViewMatrix, false, new Float32Array(perspectiveMatrix));

gl.uniformMatrix4fv(uPerspectiveMatrix, false, new Float32Array(modelViewMatrix));

animate();

setTimeout(timer, 1500);

}

var count = 0;

var cn = 0;

function animate() {

requestAnimationFrame(animate);

drawScene();

}

function drawScene() {

draw();

gl.lineWidth(2);

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

//gl.drawArrays( gl.LINES_STRIP, 0, numLines );

gl.drawArrays(gl.LINES, 0, numLines);

//gl.drawArrays( gl.QUAD_STRIP, 0, numLines );

gl.flush();

}

// ===================================

function setup() {

setup00();

setTimeout(onChangeTimer, 300);

}

function draw() {

/*

switch (drawType) {

case 0:

draw0();

break;

case 1:

draw1();

break;

case 2:

draw2();

break;

}

*/

draw00();

}

// ===================================

function setup00() {

vertices = [];

velThetaArr = [];

velRadArr = [];

ratio = cw / ch;

velocities = [];

thetaArr = [];

freqArr = [];

boldRateArr = [];

// -------------------------------

//var minSize = Math.min(window.innerWidth, scale.innerHeight);

var widthScale = window.innerWidth / window.innerHeight;

var height = 340 * scaleFactor;

var X_MAX_NUM = parseInt(window.innerWidth / height);

var Y_MAX_NUM = parseInt(window.innerHeight / height);

// 2 -> window.innerHeight

// ? -> 50

var targetRad = 1.0;

var xPos, yPos;

var target = new Target(targetRad);

target.x = 0;

target.y = 0;

targetArr.push(target);

for (var ii = 0; ii < numLines; ii++) {

vertices.push(0, 0, 1.83);

vertices.push(0, 0, 1.83);

}

vertices = new Float32Array(vertices);

velocities = new Float32Array(velocities);

}

// -------------------------------

function draw00() {

for (var ii = 0; ii < targetArr.length; ii++) {

targetArr[ii].rotate += targetArr[ii].rotate_speed;

}

var tRad, tX, tY;

var bp, px, py;

var target;

var side = .5 / window.innerHeight;

for (var ii = 0; ii < numLines * 2; ii += 2) {

bp = ii * 3;

target = targetArr[(ii / 2) % targetArr.length];

tRad = Math.cos(target.rotate * 2.321 + target.freq * ii) * target.bold_rate;

tX = target.x + Math.cos(target.rotate + target.step * ii) * tRad;

tY = target.y + Math.sin(target.rotate + target.step * ii) * tRad;

px = vertices[bp + 3];

py = vertices[bp + 4];

px += (tX - px) * .3;

py += (tY - py) * .3;

vertices[bp + 3] = px;

vertices[bp + 4] = py;

vertices[bp] = px - side;

vertices[bp + 1] = py - side;

}

}