p5实现呼吸灯动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现呼吸灯动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } body { background-color: #212121; margin: 0; padding: 0; overflow: hidden; } .is-hover { cursor: pointer; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script > function setup() { createCanvas(windowWidth, windowHeight); frameRate(30); } const body = document.body; const hoverClass = 'is-hover'; const hVals = [ 190, 90, 130, 220]; let colorGradient = hVals[0]; let timer = 0; function draw() { colorMode(HSB); background(0, 0, 13, 1); noStroke(); timer += 0.05; let diam = 320 + sin(timer) * 15; const d = dist(width / 2, height / 2, mouseX, mouseY); let gradient; // Mouse over circle if (d < diam * 0.5) { timer += 0.2; body.class.........完整代码请登录后点击上方下载按钮下载查看
网友评论0