p5实现三维点构成球体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现三维点构成球体旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在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.1.4.0.js"></script> <script > const colors = ["#fc0000", "#ffcc00"]; //const colors = ["#ff0000", "#00ff00", "#190E4F", "#03012C"]; const backgroundColor = "#cc3357"; const width = window.innerWidth; const height = window.innerHeight; const totalFrames = 1000; let frameCount = 0; let recording = false; function setup() { canvas = createCanvas(width, height, WEBGL); noiseSeed(20); randomSeed(10); } function draw() { frameCount += 1; let frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames; let bg = color(backgroundColor); background(bg); push(); scale(3); rotateY(frameCount /.........完整代码请登录后点击上方下载按钮下载查看
网友评论0