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: #7c4de1; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script> /* * ROUND WIRE * Made with p5 - Enjoy! * * Inspired by one of the p5js examples in docu: * https://p5js.org/examples/simulate-particle-system.html * * #047 - #100DaysOfCode * By ilithya | 2020 * https://www.ilithya.rocks/ * https://twitter.com/ilithya_net */ const bgColor = "#7c4de1"; // purple const wireColor = "hotpink"; let wire; function setup() { createCanvas(windowWidth, windowHeight); // Note to myself: width & height - system vars that store the w/h of the drawing canvas. const xcenter = width / 2; const ycenter = height / 2.05; wire = Object.create(Roundwire).init(createVector(xcenter, ycenter)); } function draw() { background(bgColor); wire.createCircles(); wire.addMotion(); } // Let's code this with OLOO style const Cable = { init(pos) { this.accelerat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0