p5加perlin绘制多彩线条
代码语言:html
所属分类:视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; display: flex; height: 100vh; background: black; cursor: pointer; } canvas { margin: auto; touch-action: none; } input { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: 80%; height: 34px; max-width: 400px; background: transparent; -webkit-appearance: none; appearance: none; } input::-webkit-slider-runnable-track { box-sizing: border-box; height: 6px; background: #fff; -webkit-appearance: none; appearance: none; } input::-moz-range-track { box-sizing: border-box; height: 6px; background: #fff; -webkit-appearance: none; appearance: none; } input::-ms-track { box-sizing: border-box; height: 6px; background: #fff; -webkit-appearance: none; appearance: none; } input::-webkit-slider-thumb { margin-top: -12px; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid black; -webkit-appearance: none; appearance: none; cursor: pointer; } input::-moz-range-thumb { box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid black; -webkit-appearance: none; appearance: none; cursor: pointer; } input::-ms-thumb { margin-top: 0px; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid black; -webkit-appearance: none; appearance: none; cursor: pointer; } section { box-sizing: border-box; font-size: 30px; color: white; position: fixed; left: 0; top: 20px; width: 100%; text-align: center; padding: 0 10%; pointer-events: none; } section p { margin: 0; display: none; } @media (max-width: 500px) { section { font-size: 24px; } } </style> </head> <body translate="no"> <input type="range" min="1" max="7" step="1" id="step" value="1"> <section> <p>Draw a line with a defined x & y speed</p> <p>On every frame, add two random values to the x & y speed</p> <p>Use a value from noise to make the final path more organic</p> <p>Draw more lines at once</p> <p>Make the lines thin and white</p> <p>Use a lower opacity for the lines</p> <p>Go crazy with the styles</p> </section> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/perlin-min.js"></script> <script> console.clear(); const p = noise; let branches = []; class Branch { constructor (x, y) { this.x = x; this.y = y; this.prevx = x; this.prevy = y; this.visible = true; this.color = color(random(110, 110 + 100), 70, 100, 100); this.speed = { x: random(-7, 7), y: random(-7, 7) }; } walls () { this.prevx = this.x; this.prevy = this.y; if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) { this.visible = false; } } draw () { line(this.prevx, this.prevy, this.x, this.y); } moveStraight () { this.x += this.speed.x * 5; this.y += this.speed.y * 5; } moveRandom () { this.speed.x += random(-10, 10); this.speed.y += random(-10, 10); this.x += this.speed.x; this.y += this.speed.y; } moveNoise () { this.speed.x += .........完整代码请登录后点击上方下载按钮下载查看
网友评论0