update
This commit is contained in:
parent
348c4fa06a
commit
666a097850
50
13.画圆.html
Normal file
50
13.画圆.html
Normal file
@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<title>画圆</title>
|
||||
<script src="/p5/p5.min.js"></script>
|
||||
<script src="/p5/addons/p5.sound.min.js"></script>
|
||||
<script src="/lib/utils.js"></script>
|
||||
<script>
|
||||
let o, d;
|
||||
let circles = [];
|
||||
|
||||
function setup() {
|
||||
createCanvas(600, 600);
|
||||
background("#33DDFF");
|
||||
drawGrid(0);
|
||||
noFill();
|
||||
noLoop();
|
||||
}
|
||||
|
||||
function mousePressed() {
|
||||
o = createVector(mouseX, mouseY);
|
||||
}
|
||||
|
||||
function mouseDragged() {
|
||||
let p = createVector(mouseX, mouseY);
|
||||
d = p.sub(o).mag() * 2;
|
||||
|
||||
background("#33DDFF");
|
||||
drawGrid(0);
|
||||
circles.forEach((c) => {
|
||||
circle(c.x, c.y, c.d);
|
||||
});
|
||||
circle(o.x, o.y, d);
|
||||
}
|
||||
|
||||
function mouseReleased() {
|
||||
let c = { x: o.x, y: o.y, d };
|
||||
circles.push(c);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
18
lib/utils.js
18
lib/utils.js
@ -101,3 +101,21 @@ function drawRect(x, y, w, h, c = "bottom") {
|
||||
}
|
||||
pop();
|
||||
}
|
||||
|
||||
function luoxuanxian(x, y) {
|
||||
push();
|
||||
noFill();
|
||||
stroke("#FFDD33");
|
||||
strokeWeight(4);
|
||||
translate(x, y);
|
||||
beginShape();
|
||||
for (let θ = 0; θ < PI * 6; θ += 0.1) {
|
||||
let a = 0;
|
||||
let b = 2;
|
||||
let r = a + b * θ;
|
||||
let v = polarToCartesian(r, θ);
|
||||
vertex(v.x, v.y);
|
||||
}
|
||||
endShape();
|
||||
pop();
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user