p5实现canvas等边三角形旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现canvas等边三角形旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: radial-gradient(circle, wheat, darkred); overflow: hidden; } canvas { display: block; } ul { position: fixed; top: 0; left: 0; padding: 1rem; } ul a { color: wheat; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script> <script> let orthocenter; let rotation; let altitude; let lightness; let weight; // stroke weight let lightnessStep; let rotationStep; function setup() { const dims = createVector(innerWidth, innerHeight); createCanvas(dims.x, dims.y); orthocenter = createVector(dims.x >> 1, dims.y >> 1); altitude = Math.min(dims.x, dims.y) >> 1; lightness = 0; lightnessStep = 4; rotation = -Math.PI / 9; rotationStep = 0.01; weight = Math.min(dims.x, dims.y) / 100; } function midpoint(vA, vB) { return vA.copy().add(vB).mult(.5); } function tri(vA, vB, vC, i) { stroke(0); strokeWeight(weight); strokeJoin(ROUND); colorMode(HSB); fill((i * 0xf + lightness) % 0xff, 0x2a, (i * 0xf + lightness * .25) % 0xff); triangle(vA.x, vA.y, vB.x, vB.y, vC.x, vC.y); } function draw() { const r = altitude * 2 / 3; blendMode(REMOVE); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0