- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想创建一个旋转函数,在该函数中我的三 Angular 形可以像轮子一样自行旋转,但我与移动三 Angular 形的部分代码发生冲突,我尝试了许多解决方案但没有成功,也许如果你们中的一个人知道它会对人好点!
这是我的代码:
let triangle1;
let triangle2;
let triangle3;
let triangle4;
let triangle5;
let triangle6;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;
function setup() {
startColor = color("hsl(144, 100%, 61%)");
endColor = color("hsl(0,77%,36%)");
createCanvas(windowWidth, 800);
//creer notre triangle
triangle1 = new Triangles(200, 100, 0, 4);
/* triangle2 = new Triangles(100, 50, 2, 0);
triangle3 = new Triangles(50, 200, -1, 4);
triangle4 = new Triangles(250, 400, 4, 4);
triangle5 = new Triangles(150, 500, 0, 2);
triangle6 = new Triangles(350, 500, -4, 2);*/
}
function draw() {
colorMode(RGB);
background(252, 238, 10);
triangle1.show();
triangle1.move();
/* triangle2.show();
triangle2.move();
triangle3.show();
triangle3.move();
triangle4.show();
triangle4.move();
triangle5.show();
triangle5.move();
triangle6.move();
triangle6.show();*/
}
class Triangles {
//configuration de l'objet
constructor(triX, triY, speedX, speedY) {
this.x = triX;
this.y = triY;
this.speedX = speedX;
this.speedY = speedY;
}
show() {
if (amt >= 1) {
amt = 0;
let tmpColor = startColor;
startColor = endColor;
endColor = tmpColor;
}
amt += 0.03;
let colorTransition = lerpColor(startColor, endColor, amt);
noStroke();
fill(colorTransition);
triangle(this.x, this.y, this.x + 25, this.y + 40, this.x - 25, this.y + 40);
}
move() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > width || this.x < 0) {
this.speedX *= -1;
}
if (this.x + 25 > width || this.x + 25 < 0) {
this.speedX *= -1;
}
if (this.x - 25 > width || this.x - 25 < 0) {
this.speedX *= -1;
}
if (this.y > height || this.y < 0) {
this.speedY = this.speedY * -1;
}
if (this.y + 40 > height || this.y + 40 < 0) {
this.speedY = this.speedY * -1;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
最佳答案
使用矩阵变换来旋转、缩放和平移形状。行动 rotate
, scale
和 translate
定义一个新的变换矩阵并将当前矩阵与新矩阵相乘。
如果要转换单个形状(三 Angular 形),则需要在转换前使用 push
保存当前矩阵并用 pop
恢复变换后的矩阵.
push();
// [...] scale, rotate, translate
// [...] draw shape
pop();
如果要围绕局部枢轴点旋转形状,则需要围绕 (0, 0) 绘制形状。旋转形状并将旋转后的形状移动到其目标位置:
shapeTrasformation = translate * rotate * scale
等边三 Angular 形的局部旋转:
push()
translate(this.x, this.y, this.z);
rotate(this.angle)
scale(30);
triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);
pop();
this.angle += 0.01;
let triangle1;
let speedX;
let speedY;
let startColor;
let endColor;
let amt = 0;
function setup() {
startColor = color("hsl(144, 100%, 61%)");
endColor = color("hsl(0,77%,36%)");
createCanvas(windowWidth, windowHeight);
//creer notre triangle
triangle1 = new Triangles(200, 100, 0, 4);
}
function draw() {
colorMode(RGB);
background(252, 238, 10);
triangle1.show();
triangle1.move();
}
class Triangles {
//configuration de l'objet
constructor(triX, triY, speedX, speedY) {
this.x = triX;
this.y = triY;
this.speedX = speedX;
this.speedY = speedY;
this.angle = 0;
}
show() {
if (amt >= 1) {
amt = 0;
let tmpColor = startColor;
startColor = endColor;
endColor = tmpColor;
}
amt += 0.03;
let colorTransition = lerpColor(startColor, endColor, amt);
noStroke();
fill(colorTransition);
push()
translate(this.x, this.y, this.z);
rotate(this.angle)
scale(30);
triangle(-0.866, 0.5, 0.866, 0.5, 0, -1);
pop();
this.angle += 0.01;
}
move() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x > width || this.x < 0) {
this.speedX *= -1;
}
if (this.x + 25 > width || this.x + 25 < 0) {
this.speedX *= -1;
}
if (this.x - 25 > width || this.x - 25 < 0) {
this.speedX *= -1;
}
if (this.y > height || this.y < 0) {
this.speedY = this.speedY * -1;
}
if (this.y + 40 > height || this.y + 40 < 0) {
this.speedY = this.speedY * -1;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
关于javascript - 像轮子一样围绕中心点旋转三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65347442/
从下面的 setup.py 文件中,我试图从一个应该只包含 python 2.7 代码的项目中创建一个纯 python wheel。 from setuptools import setup setu
我正在尝试在 Linux 上安装 pytorch ( http://pytorch.org/ ),根据我的机器配置,我应该运行的命令是: pip 安装 https://s3.amazonaws.com
也许是一个广泛的问题,但我认为这与任何使用 github 并可以显着减少他们的工作量的 python 包维护者相关,所以希望这些权力能够让它站住脚。 基本上,在我看来: 为 python 构建和发布轮
我有一个包含 C 扩展的包,我想上传到 pypi:https://github.com/Erotemic/netharn 我使用命令 python setup.py bdist_wheel --py-
TLDR :裤子获取 OS X 特定的轮子,因为我正在 Mac 上开发。我怎样才能避免这种情况,或者指定我将部署到 Ubuntu? 全文 : 尝试使用 Pants 打包 Python 应用程序。到目前
我正在 Azure Pipelines 上运行测试(但同样的情况也适用于 Travis 和 Appveyor)。我有一个 Python 包,我们将其称为“计算器”,其中包含 cython 扩展。当我推
是否有(事实上的)标准 MIME 类型可用于 Python 轮包?我在 PEP 427 中看不到任何内容。 我认为 application/zip 可能是一个选项,但这似乎误导了我。 最佳答案 没有。
我一整天都在为 --find-links 苦苦挣扎,如果有人能在这里帮助我,我将非常感激。 我一直在使用python3.4进行开发,我添加的新功能之一使用Azure存储(最新版本),它需要加密,这需要
之前,我们仅将内部 pip 存储库用于源代码分发。展望 future ,我们还希望托管轮子来完成两件事: 为(本地)开发人员机器和 Alpine Docker 环境提供我们自己的代码 为没有 Alpi
我是一名优秀的程序员,十分优秀!