程序员经验分享-hwhale

在 P5.js 中旋转网格内的对象

2023-12-05

我正在尝试使用合适的 OOP 方法来让对象在网格单元格内单独旋转。我当前的结果是围绕 0, 0 参考点旋转所有对象，而不是每个对象在其自己的单元格内旋转。

当然，需要的是一个正确的翻译函数，但是当我尝试在innerSquare函数中应用它时translate(x, y); - 这会导致更奇怪的行为。

我仍处于学习的早期阶段 - 任何帮助将不胜感激！

代码可以在这里查看：https://editor.p5js.org/knectar/sketches/BJpI5_BG4

或者直接：

var cols, rows;
var w = 50;
var grid = [];

function setup() {
  createCanvas(400, 400);

// load the col / row vars with values that dynamically read from the canvas.
  cols = floor(width/w);
  rows = floor(height/w);

// load the the array with generic row and column values
    for (var j = 0; j < rows; j++){
      for (var i = 0; i < cols; i++){

        // And for each, create an object instance based on the Shape class.
        var shape = new Shape(i,j);
        grid.push(shape);
      }
    }
}

function draw() {
  background(51);
  frameRate(2);

// draw grid (outer squares)
  for (var i = 0; i < grid.length; i++) {
    grid[i].outerGrid();

  }

// draw inner squares
  for (var i = 0; i < grid.length; i++) {
    grid[i].innerSquare();
  }
}

function Shape(i, j) {
  this.i = i;
  this.j = j;
  var x = this.i*w;
  var y = this.j*w;

  this.outerGrid = function () {
    push();
      stroke(200, 0, 255);
      noFill();
      rect(x, y, w, w);
      translate(x, y);
    pop();
   }

  this.innerSquare = function () {
//    translate(x, y);
    noFill();
    stroke(150, 0, 255);
    rect(x+10, y+10, w-20, w-20);
    rotate(radians(frameCount));
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

如果你想围绕一个枢轴旋转一个矩形，那么你可以这样绘制矩形，矩形的中心位于位置 (0, 0)：

let rect_w = (w-20);
rect(-rect_w/2, -rect_w/2, rect_w, rect_w);

Rotate (rotate()) 围绕 (0, 0) 的矩形，也是矩形的中心：

rotate(angle);

翻译 （translate()) 将矩形移动到最终位置：

let tx = x+10 + rect_w / 2;
let ty = y+10 + rect_w / 2;

translate(tx, ty);

必须保存矩阵堆栈（push()）在此操作之前并恢复（pop()） 后。对当前模型矩阵的操作必须以相反的顺序执行：

e.g.

this.innerSquare = function () {
    noFill();
    stroke(150, 0, 255);
    let ts = millis()/1000.0;
    let angle = radians(ts*2.0*Math.PI*5.0); // or "frameCount"
    let rect_w = (w-20);
    let tx = x+10 + rect_w / 2;
    let ty = y+10 + rect_w / 2;
    push();
        translate(tx, ty);
        rotate(angle);
        rect(-rect_w/2, -rect_w/2, rect_w, rect_w);
    pop();
}

请参阅示例，其中我将建议的更改应用于您的原始代码：

var cols, rows;
var w = 50;
var grid = [];

function setup() {
  createCanvas(400, 400);

// load the col / row vars with values that dynamically read from the canvas.
  cols = floor(width/w);
  rows = floor(height/w);

// load the the array with generic row and column values
    for (var j = 0; j < rows; j++){
      for (var i = 0; i < cols; i++){

        // And for each, create an object instance based on the Shape class.
        var shape = new Shape(i,j);
        grid.push(shape);
      }
    }
}

function draw() {
  background(51);
  //frameRate(2);

// draw grid (outer squares)
  for (var i = 0; i < grid.length; i++) {
    grid[i].outerGrid();

  }

// draw inner squares
  for (var i = 0; i < grid.length; i++) {
    grid[i].innerSquare();
  }
}

function Shape(i, j) {
  this.i = i;
  this.j = j;
  var x = this.i*w;
  var y = this.j*w;

  this.outerGrid = function () {
    push();
      stroke(200, 0, 255);
      noFill();
      rect(x, y, w, w);
      translate(x, y);
    pop();
   }

    this.innerSquare = function () {
        noFill();
        stroke(150, 0, 255);
        let ts = millis()/1000.0;
        let angle = radians(ts*2.0*Math.PI*5.0);
        let rect_w = (w-20);
        let tx = x+10 + rect_w / 2;
        let ty = y+10 + rect_w / 2;
        push();
            translate(tx, ty);
            rotate(angle);
            rect(-rect_w/2, -rect_w/2, rect_w, rect_w);
        pop();
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

processing

p5js

coordinatetransformation

在 P5.js 中旋转网格内的对象 的相关文章

随机推荐

  • 使用 bootstrap 3 垂直对齐中间内容

    我想使用最新的引导程序在 div 块中设置垂直中间内容v3 2 0 我已阅读答案与 bootstrap 3 垂直对齐 但它使用float none 在 div 块中 但是 我can t use float none 根据我们的布局在 div

  • 启用 SQL Server Express 2012 的远程连接

    我刚刚在我的家庭服务器上安装了 SQL Server Express 2012 我尝试从台式电脑上的 Visual Studio 2012 连接到它 并反复收到众所周知的错误 与 SQL Server 建立连接时发生与网络相关或特定于实例的

  • 如何在网站网址上隐藏我的网站端口号 [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我的网站是用JAVA实现的 所以我们采用了VPS并安装了Tomcat然后部署 我的网站是这样的 每当我点击 url 中的 www mysite com 时 它就会显示如下 http

  • 将 posix 样式时区转换为 c# .net 中的 timezoneinfo

    我从另一台机器获取时区信息 格式如下 CET 1CEST M3 5 0 2 M10 5 0 3 Posix 风格时区 我需要解析它并将其转换为c net TimeZoneInfo class 有办法实现这一点吗 根据这篇文章 http ww

  • 编辑 Google Storage 对象元数据需要哪些权限？

    我有以下 Perl 代码 response process gt request PATCH https www googleapis com storage v1 b Bucket o EscapedName content type i

  • Android 搜索活动未启动

    当我按下 Android 手机上的搜索按钮时 我的搜索框不显示 我想要做的是执行 ASyncTask 或后台任务 来获取字符串数组 人名 的 JSON 响应 搜索结果 并使用 IMDB 具有的相同搜索功能将其显示给用户 目前 我正在使用字符

  • 读取使用内联填充的 C# Textblock 文本属性

    假设我有一个空的 Textblock textblock1 Text 然后我只用这两条语句将内联内容放入其中 textblock1 Inlines Add new Run Text A Foreground Brushes Red text

  • switch case 中的默认值

    下面是我需要优化的代码 并计划最好转移到switch构造 但我可以比较case 所以我打算进行比较 len gt 3 作为default case 如果我将比较部分 len gt 3 作为默认情况并添加default作为switch中的第一

  • groupby DataFrame 按 N 列或 N 行

    我想找到一个通用的解决方案来按指定数量的行或列对 DataFrame 进行分组 示例数据框 df pd DataFrame 0 index a b c d e f columns c1 c2 c3 c4 c5 c6 c7 c1 c2 c3

  • Spring类路径前缀差异

    记录于4 7 2 2 类路径 前缀它指出 这个特殊的前缀指定所有 匹配的类路径资源 必须获得名字 在内部 这基本上发生 通过 ClassLoader getResources 调用 然后合并形成 最终应用程序上下文定义 有人可以解释一下吗

  • Tomcat：Web 应用程序中的自定义表单验证器，而不是作为独立的 JAR 模块。可能的？

    我们的 Web 应用程序需要内部具有特定逻辑的自定义表单身份验证 当前的表单验证器实现需要验证器模块 我们称之为custom auth jar 出现在 CATALINA HOME lib在 Web 应用程序启动之前 Web 应用程序使用该自

  • 使用 C# 从 Windows 服务捕获关键事件

    我必须用 C 编写一个应用程序来侦听按下的任何按键 实际上 我有一个条形码扫描仪发送 按键按下 事件 我需要听它 它的作用超出了我的问题范围 我的安全要求是不允许任何登录以任何形状或形式连接到机器并且这必须作为 Windows 服务运行 用

  • 查找最长的重复字符串及其在给定字符串中的重复次数

    例如 给定字符串 abc fghi bc kl abcd lkm abcdefg 该函数应返回字符串 abcd 以及 2 的计数 O n 2 解决方案似乎很简单 但我正在寻找更好的解决方案 Edited 如果不可能有比 O n 2 更好的方

  • 量词中的非零向量

    我想验证以下形式的公式 Exists p ForAll x 0 f x p gt 0 一个实现 不起作用 如下 def f0 x0 x1 x y return x1 2 y x0 2 x s Solver x0 x1 Reals x0 x1

  • 从大型固定宽度文本中解析未排序的数据

    我主要是一个 Matlab 用户和 Perl n00b 这是我的第一个 Perl 脚本 我有一个大型固定宽度数据文件 我想将其处理成带有目录的二进制文件 我的问题是数据文件非常大 并且数据参数按时间排序 这使得解析到 Matlab 变得困难

  • 请求调度程序转发后如何获取原始页面 url/uri

    我有一个 Error404Servlet 它在 web xml 中配置为 404 的错误页面

  • 如何使用 C# 获取 Webforms 中文本框的 GotFocus、LostFocus 事件

    创建网站时 我无法获取文本框的 GotFocus LostFocus 事件 我只是想 正如我之前在我的问题中所问的 当焦点是 winforms 中另一个文本框的文本时 如何将一个文本框的值放入另一个文本框 我能够以 Windows 形式完成

  • 如何在 Visual Studio 中自动设置代码格式？

    我知道 Visual Studio 可以自动格式化以使我的方法和循环正确缩进 但我找不到该设置 To format a selection Ctrl K Ctrl F To format a document Ctrl K Ctrl D S

  • 使用 Casperjs 清除本地存储

    我正在使用 casperjs 使用 localstorage 对backbonejs 应用程序进行一些测试 我的问题是使用 casperjs 测试时无法清除本地存储 我一直在尝试使用localStorage clear 在我的 casper

  • 在 P5.js 中旋转网格内的对象

    我正在尝试使用合适的 OOP 方法来让对象在网格单元格内单独旋转 我当前的结果是围绕 0 0 参考点旋转所有对象 而不是每个对象在其自己的单元格内旋转 当然 需要的是一个正确的翻译函数 但是当我尝试在innerSquare函数中应用它时tr

热门标签