JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

//object

var Obj = {

circle: new Array(10),

radius: 200,

noise: 20,

speed: 0.3,

size: 700,

//color a = background color; color b = object color

color: {

a: 'hsla(280, 95%, 5%, 1)',

b: 'hsla(255, 255%, 255%, .8)'

},

//X & Y positions

X: function(x) {

return Obj.c.width / 2 + x;

},

Y: function(y) {

return Obj.c.height / 2 - y;

},

//behavior

Circle: function(i) {

this.r = Obj.radius - i * Obj.radius / Obj.circle.length;

this.e = i % 2 ? true : false;

this.max = Math.random() * Obj.noise;

this.min = -Math.random() * Obj.noise;

this.val = Math.random() * (this.max - this.min) + this.min;

},

//clearing

Clear: function() {

Obj.$.fillStyle = Obj.color.a;

Obj.$.fillRect(0, 0, Obj.c.width, Obj.c.height);

},

//shape changing

Change: function(C) {

for (var i = 0; i < Obj.size; i++) {

var a = i * Math.PI * 2 / Obj.size;

var x = Math.cos(a) * (C.r - C.val * Math.cos(i / 4));

var y = Math.sin(a) * (C.r - C.val * Math.cos(i / 4));

Obj.$.fillStyle = Obj.color.b;

Obj.$.fillRect(Obj.X(x), Obj.Y(y), 1, 1);

}

Obj.Check(C);

},

//noise level checks

Check: function(C) {

C.val = C.e ? C.val + Obj.speed : C.val - Obj.speed;

if (C.val < C.min) {

C.e = true;

C.max = Math.random() * Obj.noise;

}

if (C.val > C.max) {

C.e = false;

C.min = -Math.random() * Obj.noise;

}

},

//update object

Update: function() {

Obj.Clear();

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

Obj.Change(Obj.circle[i]);

}

},

//draw object

Draw: function() {

Obj.Update();

requestAnimationFrame(Obj.Draw, Obj.c);

},

//set circles

Set: function() {

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

Obj.circle[i] = new Obj.Circle(i);

}

},

//size control

Size: function() {

Obj.c.width = window.innerWidth / 2;

Obj.c.height = window.innerHeight / 2;

},

//get canvas

Run: function() {

Obj.c = document.querySelector('canvas');

Obj.$ = Obj.c.getContext('2d');

window.addEventListener('resize', Obj.size, false);

},

//start

Init: function() {

Obj.Run();

Obj.Size();

Obj.Set();

Obj.Draw();

}

};

Obj.Init();

php 声波图,Canvas 美丽的声波图相关推荐

  1. html5花瓣掉落素材,HTML5/Canvas 美丽的花瓣纹理

    JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var lineNum = 20; var lineSpacing = 20; var canvas = d ...

  2. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  3. php 声波图,绘制声波图(获取音频回调)

    在纯音频连麦的过程中,我们经常有这种需求,展示当前是谁在发言,比如当某人说话时就在他的麦克风图标上做高亮处理.为了实现这种需求,我们就需要实时地去获取一个媒体流中正在播放的音频数据.在我们的场景中,这 ...

  4. scratch模拟动态声波图/steam教育/输入输出/声音物理学

    用scratch模拟动态声波图是很早就有的一个想法,但是尝试了几次没有做出来. 首先想到的是克隆点,再把点排列成线,整体向前推进制造动态效果.但是单一角色的克隆体最多300个,连成的线长度有限,波形图 ...

  5. 【JavaScript】Canvas绘制美丽的网螺旋旋转图形

    <!DOCTYPE html> <html> <head><meta http-equiv = "content-type" conten ...

  6. 【Canvas】JavaScript用Canvas制作美丽的对称图案

    生活中有看到一个对称图案,看着很美,于是想到,试试用Canvas试着画对称图形来,想到就做,自己还真捣鼓出来了,自己弄了好多的对称图这里就不晒出来了,接下来讲讲怎么做,有兴趣的同学可以自己边学边动手做 ...

  7. HTML5 Canvas 北京的美丽园林和雾霾天气

    通过若干个随机运动的小雾气图片(Particles)叠加而成的雾霾天气,绘制在Canvas元素上. 通过调整粒子的个数,可以看清绘制的过程和叠加效果.(还能看清雾霾背后的园林.树枝.塔吗?) 代码和在 ...

  8. Android 录音声波图

    图像类: package com.akm.test;/*** Created by toge on 15/12/9.*/ import android.content.Context; import ...

  9. php声波模拟开门,PHP 根据wav文件绘制声波图

    效果图: 参考: http://php.net/manual/zh/function.pack.php https://www.jianshu.com/p/947528f3dff8 http://bl ...

最新文章

  1. [转]EOS智能合约 私链激活 基本操作
  2. JavaScript装逼指南
  3. android 静态广播无效,Android8.0静态广播接收静态注册无效,并实现全局网络监听...
  4. 鸿蒙系统暗黑2,暗黑破坏神2为什么被称为神作!看看装备强化系统就知道有多完美...
  5. 简述相关与回归分析的关系_分类数据与分类数据的相关关系分析
  6. SAP License:ABC作业成本法-平行记帐
  7. 多用户在线人数监听(基于TomCat)
  8. Microsoft Visual Studio 2005 怎么更改安装路径?
  9. iOS TableView 使用详解
  10. JavaScript:对象转换为字符串、字符串转换为对象
  11. EM算法在二维高斯混合模型参数估计中的应用
  12. 商业流程中的traversedpath
  13. 网页特效——花间飞舞的蝴蝶
  14. 如何申请微信号测试账号,进行微信开发
  15. 用mobx-react框架wukong撸个电影网站
  16. 小白学习笔记之计算机要点
  17. 基于51单片机的自动浇花系统
  18. arduino交通信号灯
  19. java费诺编码_费诺编码的分析与实现.doc
  20. java程序员招聘有哪些要求

热门文章

  1. mysql 安装 运维_MySQL自动化运维之安装篇
  2. 单片机实用工具大全,超级赞,工程师必备!
  3. 基于verilog流水灯设计
  4. python中functools_functools模块2个常用函数
  5. 远程连接spark_spark内部原理篇之计算引擎和调度管理
  6. 代数式的书写规范八种_中考数学一轮复习-第2节代数式与整式运算
  7. html检查链接正确代码,Groovy脚本检查html坏链接
  8. 矩阵的二范数_Python Numpy中的范数
  9. 打开程序时固定位置_FANUC机器人:参考位置功能介绍与设定方法
  10. 升级php影响zabbix吗,zabbix2.0升级到zabbix3.0