p5实现canvas山水画点击落叶掉落水面涟漪动画效果代码
代码语言:html
所属分类:动画
代码描述:p5实现canvas山水画点击落叶掉落水面涟漪动画效果代码
代码标签: 山水画 点击 落叶 掉落 水面 涟漪 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script> //Click to interact let tree; let leaf; let L = []; let n = 0, t = 0; dt = 100; function preload() { tree = loadImage("//repo.bfw.wiki/bfwrepo/image/6156398e20f1d.png"); leaf = loadImage("//repo.bfw.wiki/bfwrepo/image/610f30b651b6b.png"); } function setup() { cnv = createCanvas(windowWidth, windowHeight); stroke(255, 255, 255, 100); strokeWeight(3); noFill(); } function draw() { background(255); t = frameCount / dt; w = min(width, height); h = w; translate(width / 2, height / 2); image(tree, -w / 4, 0 - h / 3, w / 2, h / 3); push(); scale(1, -1); image(tree, -w / 4, 0 - h / 3, w / 2, h / 3); pop(); for (let i = 0; i < n; i++) { push(); translate(L[i].driftX, L[i].driftY); L[i].display(); L[i].move(); pop(); } } function mousePressed() { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0