processing实现鼠标交互变形的小树效果代码
代码语言:html
所属分类:动画
代码描述:processing实现鼠标交互变形的小树效果代码
代码标签: processing 鼠标 交互 变形 小树
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
box-sizing: border-box;
overflow: hidden;
}
body {
background: #e6e2ca;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body canvas {
box-shadow: 0.2em 0.2em 2em #0008;
border: none;
outline: none;
}
</style>
</head>
<body translate="no">
<canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/processing.1.4.8.js"></script>
<script>
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(600, 600);
frameRate(60);
smooth();
/**
Fractal Tree (Interactive)
Gray Wolf, January 2022
Just playing around with some recursion :)
Move the mouse to alter the tree/branch angles
When you start to learn fractals the tree is likely one of the first ones you'll encounter.
@Subscribe
Want to be notified when I create a new program? Sub here:
https://www.khanacademy.org/cs/gray-wolf/4876588413698048
**/
textAlign(CENTER, CENTER);
textSize(26);
strokeCap(PROJECT);
var over = false;
//define the tree object/properties
var tree = {
x: 300,
y: 490,
len: 150,
depth: 10,
angle: -90,
rot: 70,
branches: [],
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0