p5实现canvas颜色圆环排列变色动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现canvas颜色圆环排列变色动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ margin: 0; overflow: clip; background: #1B2021; } main{ display: flex; height: 100vh; } canvas{ margin: auto; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script> const colors = ["#2f3136", "#2a2b30", "#7d8187", "#1e1f23", "#5f6a89"]; const backgroundColor = "#000"; const width = window.innerWidth; const height = window.innerHeight; const totalFrames = 1000; let frameCount = 0; let recording = false; let recordingStarted = false; let frameDelta = 0; let m; let b; let particles = []; let c01 = (g) => { return constrain(g, 0, 1); }; let ease = (p) => { p = c01(p); return 3 * p * p - 2 * p * p * p; }; function easeInQuint(x) { return x * x * x * x * x; } function easeOutQuart(x) { return 1 - pow(1 - x, 4); } function easeOutExpo(x) { return x === 1 ? 1 : 1 - pow(2, -10 * x); } function setup() { canvas = createCanvas(width, height); noiseSeed(20); let bg = color(backgroundColor); background(bg); } function draw() { frameCount += 1; frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames; colorMode(RGB); blendMode(BLEND); let bg = color(backgroundColor); //bg.setAlpha(10); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0