Рисование на холсте p5.js во время вращения холста - PullRequest
Новая
       33

Рисование на холсте p5.js во время вращения холста

0 голосов
/ 16 февраля 2019

Я работаю над моделированием рисовальной машины, используя p5.js, аналогично this .

Я уже создал позиционирование рычага относительно положения двигателя.Идея, которую я пытаюсь воссоздать, заключается в том, чтобы держать карандаш / ручку неподвижно и использовать его для рисования на вращающемся холсте внизу.У меня есть тест пример , созданный в редакторе p5.js.

пример рисует две точки, одну красную и одну синюю.Цель состоит в том, чтобы создать метку или след, используя синюю точку на вращающемся графическом объекте ниже. 

    function setup() {
        createCanvas(400, 400);
        background(255);
        img = createGraphics(200, 200);
        img.background(150);
        img.strokeWeight(3);
        //rectMode(CENTER);
      }

      function draw() {
        background('lightYellow');
        translate(100, 100);
        img.background('lightBlue');
        img.push();
          img.translate(100, 100);
          img.rotate(radians(frameCount));
          img.fill(240);
          img.noStroke();
          img.rect(-50, -50, 100, 100);
          img.strokeWeight(4);
          img.stroke('red');
          img.point(20, 20);
        img.pop();

        img.stroke('blue');
        img.strokeWeight(4);
        img.point(100, 80);
        image(img, 0, 0);
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Есть ли способ сделать это с моим текущим примером или я должен попробовать что-то другое?

1 Ответ

0 голосов
/ 16 февраля 2019

Одним из способов достижения того, что вы хотите сделать с помощью своего примера эскиза, было бы вращение как графического объекта, так и эскиза с одинаковой скоростью.Я переписал некоторые ваши коды для достижения цели, но они не должны быть слишком разными, чтобы следовать: 

let rotatingRect;

function setup(){
  createCanvas(400, 400);
  
  rotatingRect = createGraphics(100, 100);
  rotatingRect.background(240);
  rotatingRect.strokeWeight(4);
  rotatingRect.stroke('red');
  rotatingRect.point(20, 20);
}

function draw(){
  
  noStroke();
  background('lightyellow');
  fill('lightblue');
  rect(100, 100, 200, 200);
  
  rotatingRect.stroke('blue');
  
  push();
    translate(200, 200);
    rotate(radians(frameCount));
    
    rotatingRect.push();
      rotatingRect.translate(50, 50);
      rotatingRect.rotate(-radians(frameCount));
      rotatingRect.point(mouseX-200, mouseY-200);
      //rotatingRect.point(0, -10);
    rotatingRect.pop();
  
    image(rotatingRect, -50, -50);
  pop();
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Отличительной особенностью является то, что позиция синей точки определяется мышью.Вы можете изменить это поведение, комментируя строку rotatingRect.point(mouseX-200, mouseY-200); и используя вместо нее rotatingRect.point(0, -10);.Стоит отметить, что точки рисуются и, в зависимости от скорости вращения или синей точки (если она подвижная), тропа не будет непрерывной.Чтобы добиться этого, я бы начал отслеживать предыдущие позиции синей точки и использовать что-то вроде line () вместо point() между последней позицией и текущей.

...