php 声波图,Canvas 美丽的声波图
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 美丽的声波图相关推荐
- html5花瓣掉落素材,HTML5/Canvas 美丽的花瓣纹理
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var lineNum = 20; var lineSpacing = 20; var canvas = d ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- php 声波图,绘制声波图(获取音频回调)
在纯音频连麦的过程中,我们经常有这种需求,展示当前是谁在发言,比如当某人说话时就在他的麦克风图标上做高亮处理.为了实现这种需求,我们就需要实时地去获取一个媒体流中正在播放的音频数据.在我们的场景中,这 ...
- scratch模拟动态声波图/steam教育/输入输出/声音物理学
用scratch模拟动态声波图是很早就有的一个想法,但是尝试了几次没有做出来. 首先想到的是克隆点,再把点排列成线,整体向前推进制造动态效果.但是单一角色的克隆体最多300个,连成的线长度有限,波形图 ...
- 【JavaScript】Canvas绘制美丽的网螺旋旋转图形
<!DOCTYPE html> <html> <head><meta http-equiv = "content-type" conten ...
- 【Canvas】JavaScript用Canvas制作美丽的对称图案
生活中有看到一个对称图案,看着很美,于是想到,试试用Canvas试着画对称图形来,想到就做,自己还真捣鼓出来了,自己弄了好多的对称图这里就不晒出来了,接下来讲讲怎么做,有兴趣的同学可以自己边学边动手做 ...
- HTML5 Canvas 北京的美丽园林和雾霾天气
通过若干个随机运动的小雾气图片(Particles)叠加而成的雾霾天气,绘制在Canvas元素上. 通过调整粒子的个数,可以看清绘制的过程和叠加效果.(还能看清雾霾背后的园林.树枝.塔吗?) 代码和在 ...
- Android 录音声波图
图像类: package com.akm.test;/*** Created by toge on 15/12/9.*/ import android.content.Context; import ...
- php声波模拟开门,PHP 根据wav文件绘制声波图
效果图: 参考: http://php.net/manual/zh/function.pack.php https://www.jianshu.com/p/947528f3dff8 http://bl ...
最新文章
- [转]EOS智能合约 私链激活 基本操作
- JavaScript装逼指南
- android 静态广播无效,Android8.0静态广播接收静态注册无效,并实现全局网络监听...
- 鸿蒙系统暗黑2,暗黑破坏神2为什么被称为神作!看看装备强化系统就知道有多完美...
- 简述相关与回归分析的关系_分类数据与分类数据的相关关系分析
- SAP License:ABC作业成本法-平行记帐
- 多用户在线人数监听(基于TomCat)
- Microsoft Visual Studio 2005 怎么更改安装路径?
- iOS TableView 使用详解
- JavaScript:对象转换为字符串、字符串转换为对象
- EM算法在二维高斯混合模型参数估计中的应用
- 商业流程中的traversedpath
- 网页特效——花间飞舞的蝴蝶
- 如何申请微信号测试账号,进行微信开发
- 用mobx-react框架wukong撸个电影网站
- 小白学习笔记之计算机要点
- 基于51单片机的自动浇花系统
- arduino交通信号灯
- java费诺编码_费诺编码的分析与实现.doc
- java程序员招聘有哪些要求
热门文章
- mysql 安装 运维_MySQL自动化运维之安装篇
- 单片机实用工具大全,超级赞,工程师必备!
- 基于verilog流水灯设计
- python中functools_functools模块2个常用函数
- 远程连接spark_spark内部原理篇之计算引擎和调度管理
- 代数式的书写规范八种_中考数学一轮复习-第2节代数式与整式运算
- html检查链接正确代码,Groovy脚本检查html坏链接
- 矩阵的二范数_Python Numpy中的范数
- 打开程序时固定位置_FANUC机器人:参考位置功能介绍与设定方法
- 升级php影响zabbix吗,zabbix2.0升级到zabbix3.0