js实现等高图线条效果代码
代码语言:html
所属分类:其他
代码描述:js实现等高图线条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { padding: 20px; background: #fbf5e7; text-align: center; font-family: Helvetica, Arial, sans-serif; } canvas, svg { width: 100% !important; max-width: 1000px !important; height: auto !important; position: relative; margin: 10px auto 0; display: block; } </style> </head> <body> <div>Noise seed: <span class="seed"></span></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script> <script> // Inspired by // https://i.redd.it/pij77ougdwr01.png // https://www.reddit.com/r/generative/comments/8c8g9k/generative_design_for_a_handpainted_mural/ const rows = 120; const columns = 120; const step = 6; const velocity = step; const w = columns * step; const h = rows * step; const maxLength = 16; const dotStep = 2.1; const vectors = []; const colorNoise = []; const dots = []; const seed = Math.floor(Math.random() * 10000); document.querySelector('.seed').innerHTML = seed; // const blue = '#4b5575'; // const green = '#5c9191'; // const orange = '#d6907d'; // const yellow = '#efdba6'; const blue = { r: 75, g: 85, b: 117 }; const green = { r: 105, g: 153, b: 152 }; const orange = { r: 214, g: 144, b: 125 }; const yellow = { r: 239, g: 219, b: 166 }; const colors = [blue, green, orange, yellow]; function pickColorFromGradient(color1, color2, weight) { const w1 = weight; const w2 = 1 - w1; const rgb = [Math.round(color1.r * w1 + color2.r * w2), Math.round(color1.r * w1 + color2.r * w2), Math.round(color1.b * w1 + color2.b * w2)]; return rgb; } function setup() { createCanvas(w, h); background('#fbf5e7'); frameRate(15); noiseSeed(seed); for (let i = 0; i <= rows; i++) { vectors[i] = []; for (let j = 0; j <= columns; j++) { const x = i * step; const y = j * step; const n = noise(i / 70, j / 70); const a = n * 2 * PI; const directionVector = { x: 0, y: 0 }; // directionVector.y = sin(x / w * PI) * 3; const vectorX = cos(a) * velocity + directionVector.x; const vectorY = sin(a) * velocity + directionVector.y; const endX = x + vectorX; const endY = y + vectorY; // stroke(n * 200); vectors[i][j] = { startX: x, startY: y, endX, endY, angle: a, vectorX, vectorY, }; } } for (let i = 0; i <= rows; i = i + dotStep) { for (let j = 0; j <= columns; j = j + dotStep) { const x = i * step + Math.floor(Math.random() * step) - (step / 2); const y = j * step + Math.floor(Math.random() * step) - (step / 2); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0