p5实现美丽线条变换效果代码-html代码-BFW代码库

p5实现美丽线条变换效果代码

代码语言：html

所属分类：其他

代码描述：p5实现美丽线条变换效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:100&amp;display=swap'>
  
<style>
body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
body:before {
  content: "beautiful line";
  color: #fff;
  position: fixed;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Montserrat", sans-serif;
  font-weight: 100;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.7em;
  mix-blend-mode: difference;
  width: 350px;
  text-align: center;
}
</style>


</head>

<body  >


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
      <script >
console.clear()
/*--------------------
Utils
--------------------*/
const deg = (a) => Math.PI / 180 * a
const randomness = () => Math.floor(40 + Math.random() * 1080) * Math.round(Math.random())



/*--------------------
Setup
--------------------*/
const Points = []
let rotation = 0
let newRotation = Math.random() * 360
function setup() {
  createCanvas(windowWidth, windowHeight);
  for (let i = 0; i < 180; i += 1) {
    Points.push({
      ox: 0,
      oy: 0,
      x: 0,
      y: 0
    })
  }
  
  createLines()
 }


/*--------------------
Lines
--------------------*/
function createLines() {
  const radius = Math.min(250, window.innerWidth * 0.48)
  const increment = 2
  newRotation = rotation + 45
  const r1 = randomness()
  const r2 = randomness()
  const r3 = randomness()
  cons.........完整代码请登录后点击上方下载按钮下载查看