p5实现线条随机乱涂效果代码
代码语言:html
所属分类:其他
代码描述:p5实现线条随机乱涂效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; background: white; } main { width: 100vw; height: 100vh; display: flex; } canvas { margin: auto; } </style> </head> <body > <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js'></script> <script > let points = [] let targets = [] let n; function setup() { createCanvas( min(500, windowWidth), min(500, windowWidth) ) n = random(36, 96) angleMode(DEGREES) if (random() > 0.5) { for (let i = 0; i < n; i++) { let v = createVector( map(i, 0, n-1, 0, 1), 0.5 + random(-0.01, 0.01) ) points.push(v.copy()) targets.push(v.copy()) } } else { for (let i = 0; i < n; i++) { let phase = map(i, 0, n-1, 0, 360) let v = createVector( 0.5 + 0.25*sin(phase), 0.5 + 0.25*cos(phase) ) points.push(v.copy()) } } } function draw() { for (let j = 0; j < points.length; j++) { const point = points[j] let around = [] around = getNeighbors(point, 0.2) let repel = createVector(0, 0) for (let i = 0; i < around.length; i++) { p = points[around[i]] .........完整代码请登录后点击上方下载按钮下载查看
网友评论0