p5实现随机漩涡动画效果代码

代码语言:html

所属分类:动画

代码描述:p5实现随机漩涡动画效果代码,运行后按键盘任意键开始动画,或按鼠标左键切换动画。

代码标签: p5 随机 漩涡 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  background-color: black;
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
</style>


  
</head>

<body translate="no">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.10.0.js"></script>
      <script  >
//wccchalleng - pattern
//press space to pause
//click to cahnge
let x, y, t, n, r, g, b, p, angle;
let val, v2, v3;
playBool = false;
function setup() {
  cnv = createCanvas((c = min(windowWidth, windowHeight) * 0.9), c);
  n = random([3, 5, 6, 7, 8, 9, 10, 11, 12, 15, 18, 20]);
}

function draw() {
  translate(width / 2, height / 2);
  if (playBool) {
    t = frameCount / 500;
  } else {
    if (frameCount > 1) {
      frameCount--;
    }
    t = frameCount / 500;
    background(10, 10, 20);
  }
  angle = PI / 6 + PI * Math.sin(t / 5);
  rotate(t / 2);
  background(10, 10, 20, 10);
  for (let i = 0; i < n; i++) {
    push();
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0