AudioContext技术和音乐可视化(2)


Intro

转载请注明来源,可以在测试博客查看完成效果。

本篇讲述如何绘制动态的星空,其实关联到频域数据已经没什么悬念了。

一、使用Canvas绘图

1.1 位置和大小

绘制背景的第一要务便是把canvas元素放置在背景这一层次上,避免遮盖其他元素。

对我而言,个人习惯用css来设置大小和位置,用html来确定渲染顺序而不是z-index。

下面是html代码。

<html>

<body>
  <canvas id="background-canvas"></canvas>
  <!-- other elements -->
</body>

</html>

下面是css代码。

#background-canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}

fixed确保拖动页面不会令背景也跟随移动。

其余部分我想应该没什么有疑问的地方。

1.2 CanvasContext2D

对于canvas元素的绘图操作我想很多人应该接触过。

以绘制圆形为例,使用如下代码。

const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle='#fff';
ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2); // 参数分别为坐标x,y,半径,起始弧度,结束弧度
ctx.fill();

这样就画完了一个实心圆。

需要注意,canvas的大小通过css设置可能导致画面被拉伸变形模糊,所以最好的办法是绘制前确定一下canvas的大小。

此外需要注意的是,重置大小会导致画面清空,用这种方式可以替代fillRect或者clearRect,有的浏览器平台更快但也有浏览器更慢。可以查阅这篇博文来参考如何提升canvas绘图性能。

fillStyle可以使用css的颜色代码,也就是说我们可以写下诸如rgbahsla之类的颜色,这给我们编写代码提供了很多方便。

1.3 绘制星星

星空是由星星组成的这显然不用多说了,先来看如何绘制单个星星。

星星的绘制方法很多,贴图虽然便利但显然不够灵活,我们的星星是要随节奏改变亮度和大小的,利用贴图的话就只能在alpha值和drawImage缩放来处理了。虽然是一种不错的办法,不过这里我使用了RadialGradient来控制绘图。

PS:RadialGradient 的性能比较差,大量使用会导致明显的性能下降,这是一个显著降低绘制效率的地方。

那么,我们先画一个圆(加点细节预警)。

const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");

// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

// 参数分别为起始坐标x,y,半径,结束坐标x,y,半径
const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); 
gradient.addColorStop(0.025, "#fff"); // 中心的亮白色
gradient.addColorStop(0.1, "rgba(255, 255, 255, 0.9)"); // 核心光点和四周的分界线
gradient.addColorStop(0.25, "hsla(198, 66%, 75%, 0.9)"); // 核心亮点往四周发散的蓝光
gradient.addColorStop(0.75, "hsla(198, 64%, 33%, 0.4)"); // 蓝光边缘
gradient.addColorStop(1, "hsla(198, 64%, 33%, 0)"); // 淡化直至透明
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

可以在codepen查看效果或直接编辑你的星(圈)星(圈)。

看上去还不错?

让我们用代码控制它的亮度和大小。

const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");

// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

// 通过energy控制亮度和大小
let energy = 255;
let radius = 50;
let energyChangeRate = -1;

function draw() {
  requestAnimationFrame(draw); // 定时绘制,requestAnimationFrame比setTimeout更好。
  energy += energyChangeRate; // 见过呼吸灯吧?我们让它变亮~再变暗~反复循环~
  if (energy <= 0 || energy >= 255) energyChangeRate = -energyChangeRate;
    
  // 计算出当前的大小
  const r = radius + energy * 0.1;

  // 清空屏幕
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 参数分别为起始坐标x,y,半径,结束坐标x,y,半径
  const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, r);
  gradient.addColorStop(0.025, "#fff"); // 中心的亮白色
  gradient.addColorStop(0.1, "rgba(255, 255, 255, 0.9)"); // 核心光点和四周的分界线
  gradient.addColorStop(0.25, `hsla(198, 66%, ${Math.min(75+energy*0.01,100)}%, 0.9)`); // 核心亮点往四周发散的蓝光
  gradient.addColorStop(0.75, `hsla(198, 64%, ${Math.min(33+energy*0.01,100)}%, 0.4)`); // 蓝光边缘
  gradient.addColorStop(1, "hsla(198, 64%, 33%, 0)"); // 淡化直至透明
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(100, 100, r, 0, Math.PI * 2);
  ctx.fill();
}
draw();

可以在codepen查看并编辑效果。

1.4 封装星星

通常来说粒子系统不大会把单个粒子封装成类,因为函数调用的开销还是蛮大的。。。

不过在这里我们这里就先这样了,方便理解和阅读。渲染的瓶颈解决之前,粒子函数调用这点开销根本不是回事儿。

const canvas = document.getElementById("background-canvas");
const ctx = canvas.getContext("2d");

// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

// 用javascript原生的class而不是prototype
class Star {
  constructor(x, y, radius, lightness) {
    this.radius = radius;
    this.x = x;
    this.y = y;
    this.lightness;
  }

  draw(ctx, energy) {
    // 计算出当前的大小
    const r = this.radius + energy * 0.1;

    // 参数分别为起始坐标x,y,半径,结束坐标x,y,半径
    const gradient = ctx.createRadialGradient(
      this.x,
      this.y,
      0,
      this.x,
      this.y,
      r
    );
    gradient.addColorStop(0.025, "#fff"); // 中心的亮白色
    gradient.addColorStop(0.1, "rgba(255, 255, 255, 0.9)"); // 核心光点和四周的分界线
    gradient.addColorStop(
      0.25,
      `hsla(198, 66%, ${Math.min(75 + energy * 0.01, 100)}%, 0.9)`
    ); // 核心亮点往四周发散的蓝光
    gradient.addColorStop(
      0.75,
      `hsla(198, 64%, ${Math.min(33 + energy * 0.01, 100)}%, 0.4)`
    ); // 蓝光边缘
    gradient.addColorStop(1, "hsla(198, 64%, 33%, 0)"); // 淡化直至透明
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(this.x, this.y, r, 0, Math.PI * 2);
    ctx.fill();
  }
}

const star = new Star(100, 100, 50);

let energy = 255;
let energyChangeRate = -1;

// 渲染函数来循环渲染!
function render() {
  requestAnimationFrame(render);
  energy += energyChangeRate;
  if (energy <= 0 || energy >= 255) energyChangeRate = -energyChangeRate;
  // 清空屏幕
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  star.draw(ctx, energy);
}

// 开始渲染动画!
render();

可以在codepen查看代码效果。

完成!

1.5 银河

绘制银河的核心在于随机分布的星星绕着同一中心点旋转,分为两步来讲,第一步是随机分布,这很简单,用Math.random就好了。

// star 部分略

class Galaxy {
  constructor(canvas) {
    this.stars = [];
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");

    this.energy = 255;
    this.energyChangeRate = -2;
  }

  init(num) {
    for (let i = 0; i < num; i++) {
      this.stars.push(
        // 随机生成一定数量的星星,初始化星星位置和大小。
        new Star(
          Math.random() * this.canvas.width,
          Math.random() * this.canvas.height,
          Math.random() * 10 + 1,
          Math.random() * 30 + 33
        )
      );
    }
  }

  render() {
    this.energy += this.energyChangeRate;
    if (this.energy <= 0 || this.energy >= 255)
      this.energyChangeRate = -this.energyChangeRate;

    // 清空屏幕
    this.ctx.fillStyle = "black";
    this.ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (const star of this.stars) {
      star.draw(this.ctx, this.energy);
    }
  }
}

const canvas = document.getElementById("background-canvas");
// 确保不会变形
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
const galaxy = new Galaxy(canvas);
galaxy.init(50);

function render() {
  requestAnimationFrame(render);
  galaxy.render();
}

render();

可以在codepen查看效果和完整代码。

1.6 旋转起来!

【加点细节预警】

接下来我们为星星准备轨道参数,让它们动起来!

首先修改Star类,加入几个字段。

class Star {
  constructor(x, y, radius, lightness, orbit, speed, t) {
    this.radius = radius;
    this.x = x;
    this.y = y;
    this.lightness;
    this.orbit = orbit; // 轨道
    this.speed = speed; // 运动速度
    this.t = t; // 三角函数x轴参数,用 sin/cos 组合计算位置
  }
    // 下略
}

修改初始化代码。

// 前略  
  init(num) {
    const longerAxis = Math.max(this.canvas.width, this.canvas.height);
    const diameter = Math.round(
      Math.sqrt(longerAxis * longerAxis + longerAxis * longerAxis)
    );
    const maxOrbit = diameter / 2;

    for (let i = 0; i < num; i++) {
      this.stars.push(
        // 随机生成一定数量的星星,初始化星星位置和大小。
        new Star(
          Math.random() * this.canvas.width,
          Math.random() * this.canvas.height,
          Math.random() * 10 + 1,
          Math.random() * 30 + 33,
          Math.random() * maxOrbit, // 随机轨道
          Math.random() / 1000, // 随机速度
          Math.random() * 100 // 随机位置
        )
      );
    }
  // 后略

然后在Galaxy里加入控制移动的代码。

move() {
    for (const star of this.stars) {
      console.log(star.orbit)
      star.x = this.canvas.width/2+ Math.cos(star.t) * star.orbit;
      star.y = this.canvas.height/2+ Math.sin(star.t) * star.orbit/2;
      star.t += star.speed;
    }

然后每一帧进行移动!

function render() {
  requestAnimationFrame(render);
  galaxy.render();
  galaxy.move(); // 动起来!
}

大功告成!

codepen查看完整源码!

1.7 待续

PS:不保证粘贴的代码都能跑,反正codepen上是都能的。

本文发表于2018年11月09日 10:00
(c)注:本文转载自https://my.oschina.net/u/3888259/blog/2873868,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 14 讨论 0 喜欢 0

讨论

周娱

君子和而不同
按照自己的方式,去度过人生

4601 1243792
抢先体验

扫码体验
趣味小程序
文字表情生成器

加入组织

扫码添加周娱微信
备注“加入组织”
邀请进开发群

闪念胶囊

不积跬步无以至千里,越焦虑越要扎实干。

不要试图鹤立鸡群,趁早离开那群鸡!

程序员过节需要的不是美女、不是美食、不是不加班!他们需要的是写代码,一群人写、往死里写、通宵写!!那种暗流涌动的狂欢,远比虚无庸俗的食色更让他们振奋!! by芋头

面试的时候,常常会问数组和链表的区别,很多人都回答说,“链表适合插入、删除,时间复杂度 O(1);数组适合查找,查找时间复杂度为 O(1)”。 实际上,这种表述是不准确的。数组是适合查找操作,但是查找的时间复杂度并不为 O(1)。即便是排好序的数组,你用二分查找,时间复杂度也是 O(logn)。 所以,正确的表述应该是,数组支持随机访问,根据下标随机访问的时间复杂度为 O(1)。

找一个bug就好比从一泡烂泥里找一条泥鳅,写一个bug就好比往一泡烂泥里丢一条泥鳅进去

数据结构在某种程度上和设计模式类似,都是前辈的武功套路。不同的是,设计模式是近几十年的卓越程序员的智慧结晶,而数据结构是几百上千年的无数科学家、数学家的智慧沉淀,更加具有深厚的背景。

18年元旦立下的flag要集中突击一下了.....

人生是一场马拉松,起跑的优劣对于整段路途而言并没有那么重要,笑到最后的都是一直在跑的人,也就是一辈子都在学习的人。

角色是谁并不重要,重要的是会不会抢戏~

Copyright © 2016 - 2018 Cion.
All Rights Reserved.
备案:鲁ICP备16007319号.