使用Tone.js实现的欧几里得节拍

Euclidean Rhythms

h5, audio

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3099
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function buildPattern(k, n, visEl, centerX, centerY, radius) {
  let evts = bjorklund(k, n);
  let pattern = evts.map((evt, i) => {
    let angle = i / n * Math.PI * 2;

let width = evt ? radius / 3 : radius / 5;
    let height = evt ? radius / 7 : radius / 10;
    let x = centerX + Math.cos(angle) * radius;
    let y = centerY + Math.sin(angle) * radius;

let node = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    node.setAttribute('x', x - width / 2);
    node.setAttribute('y', y - height / 2);
    node.setAttribute('rx', 5);
    node.setAttribute('ry', 5);
    node.setAttribute('width', width);
    node.setAttribute('height', height);
    node.setAttribute('class', `event ${evt ? 'active' : ''}`);
    group.appendChild(node);

return { evt, angle, node, group };
  });
  return pattern;
}

function startPattern(k, n, players, containerEl) {
  let visEl = containerEl.querySelector('.vis');
  let width = visEl.getBoundingClientRect().width;
  let height = visEl.getBoundingClientRect().height;
  let size = Math.min(width, height);
  let centerX = width / 2;
  let centerY = height / 2;
  let radius = size / 4;

let handEl = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  handEl.setAttribute('x1', centerX);
  handEl.setAttribute('y1', centerY);
  handEl.setAttribute('x2', centerX + radius + 10);
  handEl.setAttribute('y2', centerY);
  handEl.setAttribute('class', 'hand');
  visEl.appendChild(handEl);

let centerEl = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'circle'
  );
  centerEl.setAttribute('cx', centerX);
  centerEl.setAttribute('cy', centerY);
  centerEl.setAttribute('r', 3);
  centerEl.setAttribute('class', 'center');
  visEl.appendChild(centerEl);

let pattern = buildPattern(k, n, visEl, centerX, centerY, radius);

return { centerX, centerY, seq, handEl };
}

Tone.Buffer.on('load', () => {
  const patternElements = Array.from(document.querySelectorAll('.pattern'));
  let e3Pattern = startPattern(3, 7, e3Players, patternElements[0]);
  let fs4Pattern = startPattern(1, 8, fs4Players, patternElements[1]);
  let a3Pattern = startPattern(4, 10, a3Players, patternElements[2]);
  let cs4Pattern = startPattern(2, 5, cs4Players, patternElements[3]);
  Tone.Transport.start();

function updateHand({ handEl, centerX, centerY, seq }) {
    handEl.setAttribute(
      'transform',
      `translate(${centerX} ${centerY}) rotate(${seq.progress *
        360}) translate(${-centerX} ${-centerY})`
    );
  }

function animateHands() {
    updateHand(e3Pattern);
    updateHand(fs4Pattern);
    updateHand(a3Pattern);
    updateHand(cs4Pattern);
    requestAnimationFrame(animateHands);
  }
  requestAnimationFrame(animateHands);
});

StartAudioContext(Tone.context, document.documentElement);

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu:500);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* {
    font-family: "Raleway";
    /* Ubuntu */
}
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    background: #536976;
    /* fallback for old browsers */
    
    background: -webkit-linear-gradient(to right, #292E49, #536976);
    /* Chrome 10-25, Safari 5.1-6 */
    
    background: linear-gradient(to right, #292E49, #536976);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.patterns {
    display: flex;
    width: 100%;
    height: 100%;
}
.space {
    flex: 0.33;
}
.pattern {
    flex: 1;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}
.vis {
    width: 100%;
    min-height: 300px;
}
.center {
    fill: white;
    stroke: none;
}
.hand {
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
}
.event {
    fill: rgba(150, 150, 150, 0.5);
}
.event.active {
    fill: #EC407A;
}
.range {
    margin: 0 30px;
}
.noUi-target {
    border-width: 0;
}
.noUi-horizontal {
    height: 15px;
}
.noUi-handle {
    outline: none;
    box-shadow: none;
}
.noUi-connect {
    background-color: #EC407A;
    box-shadow: none;
}
.noUi-horizontal .noUi-tooltip {
    top: 110%;
    bottom: -30px;
    font-size: 18px;
    border-width: 0;
    background: none;
    color: white;
}
footer {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 20px;
    text-align: center;
    color: white;
}
footer a {
    color: white;
}
@media (max-width: 1023px) {
    .patterns {
        flex-direction: column;
    }
    .vis {
        min-height: auto;
    }
    .space {
        flex: 0;
    }
}

HTML

Euclidean Rhythms

h5, audio

编辑器支持Emmet

快捷键

Euclidean Rhythms

h5, audio

使用Tone.js实现的随机电子鼓

HTML5 Bodymovin.js + Anime.js实现很有趣的骑自行车动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：