- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我很新,正在学习 p5.js,我正在尝试在 p5.js 中制作一个带有球体和一堆圆柱体的 3D 冠状病毒。
你可以在这里看到我的草图:https://editor.p5js.org/zzzzzij/sketches/frE9-37R
var sketch = function (p) {
with(p) {
let angle = 0;
p.setup = function() {
createCanvas(400, 400, WEBGL);
};
p.draw = function() {
ambientLight(255);
background(175);
noStroke();
rotateY(angle);
rotateZ(angle*0.8);
normalMaterial();
push();
rotateY(PI);
sphere(100);
pop();
push();
for (i = 0; i < 24; i ++) {
rotateZ(PI/6);
push();
translate (0, -21*5, 0*5);
rotateY(PI/18);
rotateX(0);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/5);
push();
translate (0, -19*5, 9*5);
rotateY(PI/18);
rotateX(-PI/8);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/4);
push();
translate (0, -15*5, 15*5);
rotateY(PI/18);
rotateX(-PI/4);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/3);
push();
translate (0, -9*5, 19*5);
rotateY(PI/18);
rotateX(-PI/2.5);
cylinder (6, 20);
pop();
}
for (i = 0; i < 5; i ++) {
rotateZ(0);
push();
translate (0, 0*5, 21*5);
rotateY(0);
rotateX(-PI/2);
cylinder (6, 20);
pop();
}
for (i = 0; i < 5; i ++) {
rotateZ(0);
push();
translate (0, 0*5, -21*5);
rotateY(0);
rotateX(-PI/2);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/3);
push();
translate (0, 9*5, -19*5);
rotateY(-PI/18);
rotateX(-PI/2.5);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/4);
push();
translate (0, 15*5, -15*5);
rotateY(-PI/18);
rotateX(-PI/4);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/5);
push();
translate (0, 19*5, -9*5);
rotateY(-PI/18);
rotateX(-PI/8);
cylinder (6, 20);
pop();
}
pop();
angle+=0.01;
};
}
};
let node = document.createElement('div');
window.document.getElementById('p5-container').appendChild(node);
new p5(sketch, node);
body {
background-color:#e9e9e9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<div id="p5-container"></div>
最佳答案
这是一个简单的解决方案。我在下面的代码中所做的是,我首先根据total
的个数计算出每个顶点的位置。顶点并将它们存储在一个名为 globe
的二维数组中!这将允许您存储可以稍后在代码中使用的信息,以在单个 for 循环(每个)中绘制球体和圆柱体!
然后,我使用 globe
中存储的信息中的三 Angular 形(即顶点、边和面)创建了一个球体。 .你会注意到我画的是球体而不是圆柱体。如果您尝试将其更改为圆柱体,它看起来不会很有吸引力。我数学不是很好,但你可以通过计算 normals
来解决这个问题。每个顶点的。你可以找到这个 A Unit Vector (Normalize) - The Nature of Code和 normalize()有帮助,但请记住,您需要将其从 2D 转换为 3D!
const globe = []; //Holds a 2D array of vectors (v1,v2)
const r = 70; //Radius of circle
const total = 15; //number of vertices
let angleX = 0; //Rotate X axis
let angleY = 0; //Rotate Y axis
function setup() {
createCanvas(300, 200, WEBGL);
//Calculate vectors according to number of vertices given
for (let i = 0; i < total + 1; i++) {
globe[i] = []; //Create 2D array to hold vertices
const lat = map(i, 0, total, 0, PI);
for (let j = 0; j < total + 1; j++) {
const lon = map(j, 0, total, 0, TWO_PI);
const x = r * sin(lat) * cos(lon);
const y = r * sin(lat) * sin(lon);
const z = r * cos(lat);
globe[i][j] = createVector(x, y, z); //Store vertices in 2D array
}
}
}
function draw(){
background(51);
rotateX(angleX);
rotateY(angleY);
fill(255);
stroke(1);
//Draw Sphere using globe 2D array
for (let i = 0; i < total; i++) {
beginShape(TRIANGLE_STRIP);
for (let j = 0; j < total + 1; j++) {
const v1 = globe[i][j];
vertex(v1.x, v1.y, v1.z);
const v2 = globe[i + 1][j];
vertex(v2.x, v2.y, v2.z);
vertices = [v1,v2];
}
endShape();
}
//Draw Cylinders
for (i = 0; i < total; i ++) {
for (j = 0; j < total; j ++) {
const v1 = globe[i][j];
const v2 = globe[i + 1][j];
push();
noStroke();
translate(v1.x,v1.y,v1.z)
normalMaterial();
sphere(3,5);
pop();
}
}
//Rotate on X & Y axes
angleX += 0.005;
angleY += 0.006;
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
关于javascript - 如何在 p5.js 中为围绕球体(冠状病毒)的圆柱体制作嵌套的 for 循环?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60605626/
关于strcat函数。 while (*p) p++; 和 while (*++p) ; 两者都有效,但是 while (*p++) ; 不起作用。我认为 first 和 th
" in HTML?(HTML中的““是什么
?)
下面例子中的第一行代码是什么。我看到一个YouTuber在写下面的代码,它显示了一个设计在csswar Challenges中。我也尝试了一下,它很管用。但我以前从未在任何HTML教程上看到过它,我在
vs.
是不间断空格,表示没有换行的空白处。 如果我用 我在两个段落之间有一个空格(更大的间隔)。如果我使用 我在两个段落之间只有一个新行(没有中断)。为什么? 最佳答案 在 HTML 中
这个问题已经有答案了: Why are these constructs using pre and post-increment undefined behavior? (14 个回答) 已关闭 9
我对编程还很陌生,只是想知道为什么这段代码: for ( ; *p; ++p) *p = tolower(*p); 当 p 指向一个字符串时,可以降低 c 中字符串的大小写吗? 最佳答案 一般来说,这
代码 int n = 25; int *p = &n; printf("%x\n %d\n %x\n", p, p[0], p[1]); 返回: \ 当然我永远不会这样做,但在 K&R 中声明
所以,我想创建一个简单的程序,返回有关连续素数的计算结果。首先,我创建一个包含所有这些素数的列表,然后尝试计算结果,但这给了我一个超出范围的索引。有人可以帮助我吗?我的程序: primes = []
这个问题在这里已经有了答案: With arrays, why is it the case that a[5] == 5[a]? (20 个答案) 关闭 9 年前。 我想知道 C/C++ 中以下四
我仍在努力理解 *p、&p 和 p 之间的区别。根据我的理解,* 可以被认为是“指向的值”,而 & 可以被认为是“地址”。换句话说,* 保存值,而 & 保存地址。如果这是真的,那么 *p 和 p 之间
你是吗? [xxxrecipientFirstNamexxx]
和你是吗? {recipientFirstName}
需要更换 你是吗? [xxxrecipientFirstNamexxx] 和 你是吗? {recipientFirstName} 。我尝试使用边界匹配器。但结果并不符合预期。我尝试使用下面的代码 "A
我想按 IsTop 属性升序排序对象,然后按 JobId 属性降序排序: query = query.OrderBy(p => p.IsTop).ThenOrderByDescending(p =
在我尝试使用 Apache POI 进行转换的 Excel 文件中,我有一个单元格的数值为 -3.97819466831428,自定义格式为“0.0 p.p.;(0.0 p.p.)”。因此,在 Exc
我想创建一个扩展方法,允许我调用 ToSerializableDictionary(p => p.ID)而不是 .ToDictionary(p => p.ID)在以下 LINQ 上下文中。虽然我不确定
在下面的 HTML 代码上运行此 jQuery 代码会返回不同的结果,我认为它们应该返回相同的值。 jQuery 代码: var counter = 0; $("p").each(function()
在下面的代码片段中,符号 *p 等同于 p[0],*(p + 1) 等同于p[1],依此类推。 int* p = new int[3] { 1, 2, 3}; cout << *p << ' ' <<
这个问题在这里已经有了答案: What will happen when I call a member function on a NULL object pointer? [duplicate]
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Undefined Behavior and Sequence Points 按照标准中的定义,E1 +=
" in HTML?(在HTML中“
以下示例中的第一行代码是什么。我看到一个youtube用户写下面的代码,它显示在cssbattle挑战的设计。我也试过,它的作品。但我从来没有见过它在任何HTML教程之前,我在谷歌上搜索它,但它只显示
每当我收到来自 MS outlook 的电子邮件时,我都会收到此标记 & nbsp ; (没有空格)哪个显示为?在 <>. 当我将其更改为 ISO-8859-1 时,浏览器页面字符集编码为 UTF-8
p1
TESTp2
代码: from bs4 import BeautifulSoup soup = BeautifulSoup('p1TESTp2') print soup.div() 结果: [p1, p2] 为什么
我是一名优秀的程序员,十分优秀!