PShape GroupBoss;
PShape GroupVice;
PShape GroupMem;
PShape[] Low = new PShape[3];
PShape Target;
PShape Target2;
//Adjust Values here, to test as simple as possible^^ (took quite some time to get all done nicely xD)
float angle = radians(01); //just change this, so it rotates around it 0-360
int Child = 0; //Change to select next Child 0,1,2 (0 = no Child selected)
int Test = 0; //0 = test Child/s rotating relative to the parent; 1 = see Child not rotating relative to Parent rotating realtive to Parent (yeah, i did write it twice intentionally xD)
//No need to interfere with any Code other than above, to make Changes. Well... except for Code changes, but not for Testing around XD please use it a bit before finding the solution (as i said... took quite some time xD)

void setup() {
  size(500, 500, P3D);
  GroupBoss = createShape(GROUP);
  GroupVice = createShape(GROUP);
  GroupMem = createShape(GROUP);

  for (int i = 0; i < Low.length; i++) {
    Low[i] = createShape();
    Low[i].beginShape(QUAD);
    Low[i].fill(i*((205/3) + 50));
    Low[i].vertex(0, 0);
    Low[i].vertex(100, 0);
    Low[i].vertex(100, 100);
    Low[i].vertex(0, 100);
    Low[i].endShape(CLOSE);
  }

  GroupBoss.addChild(GroupVice);
  GroupBoss.addChild(Low[0]);
  GroupVice.addChild(GroupMem);
  GroupVice.addChild(Low[1]);
  GroupMem.addChild(Low[2]);
  GroupBoss.translate(100, 200);
  GroupBoss.getChild(0).translate(100, 0);
  GroupBoss.getChild(0).getChild(0).translate(100, 0);
  Target = GroupBoss;
  for (int i = 0; i < Child; i++) {
    Target = Target.getChild(0);
  }
}

void draw() {
  background(150);
  shape(GroupBoss);
  if (Test == 0) {
    customRotate(Target, 0);
  } else {
    Target = GroupBoss.getChild(0);
    Target2 = GroupBoss.getChild(0).getChild(0);
    customRotate(Target, 0);
    customRotate(Target2, 1);
  }
}

void customRotate(PShape Shape, int test) {
  Shape.translate(test == 0 ? -(Child * 100 + 100) : -(2*100+100), -200);
  Shape.rotate(angle);
  Shape.translate(test == 0 ? Child * 100 + 100 : 2*100+100, 200);
}

It should be quite easy to understand where the problem lies, once you test the... test..., but just in case, i'll try to explain as detailed as i can. We have Pshape a<b<c with respective parents/childs (Parent<Child). Now if we rotate c, just c rotates like expected. If we rotate b, b and c rotate as expected together. But if we rotate b and c, b rotates like expected, but c (which should still rotate around the same axis as befor(in this case the top right corner of b))now rotates around the point where the top middle of b was before starting rotation... and i dont get why... so if anyone know why, or preferably a piece of code that solves this problem, please tell me... i'm looking for a workaround for at least 3 weeks now all over the internet and trying out everything i came up with... I'd also try complex math formuls, but since i cant access the x and y and angle of each shape, theres not much i can do... i also tried storing each x, y and ange translation/rotation in an extra PVertex/float array for each shape, but without much success(mainly cause it got a bit confusing xD)... Thanks^^

Edit: Btw, in some testing during the last weeks, i found out, that the relative position it (in this case c) rotates around, depends on the angle at which both rotate, respectively. So if both angles are equal,it goes where i said, but if one angle differs, the relative position around which c rotates changes... just like if it was changing it... but i dont know how i could counteract this. If i was able to do that, i could just come up with a way to offset it then, so that the relative position would be right again. Just said it, in case someone was gonna say, to just add x + 25 to the offset (in this case). Because even though it works here with the fixed position, it wouldnt if the angles would differ.

Thanks in advance :)

    float delta = TWO_PI / childrenA.length; 
    float xPos = width/2+scaler/2*arrayDueTimes.get(i) * cos(i* delta); 
    float yPos = height/2+scaler/2*arrayDueTimes.get(i) * sin(i* delta);

    pushMatrix();
      translate(xPos, yPos);
      rotate(delta * i);
      fill(0);
      text(i + "--------------------", 0, 0); 
    popMatrix(); 

the code that works looks like this: Basically its moving the triangle to the left.

  var a, b, c
  var counter

  p.setup = () => {
    p.createCanvas(1600, 200);
    b = 800; a = 800; c = 800
    counter = 0
  }

  function rotation(degrees) {
    p.rotate(p.radians(degrees))
  }

  function triangleLeft() {
      a < 0 ? a = 800 :a = a-2;
      console.log(a)
      p.fill(209, 238, 255);
      p.translate(a, 100);
        p.triangle(0, -50, -50, 0, 0, 50)
  }

  p.draw = () => {
    counterTimer()
    p.background(89, 113, 255);
    p.noStroke();
      triangleLeft()
}

but I want to use the tringleLeft() function a bunch of times, if I try and do:

  function triangleLeft(num) {
      num < 0 ? num = 800 :num = num-2;
      console.log(num)
      p.fill(209, 238, 255);
      p.translate(num, 100);
        p.triangle(0, -50, -50, 0, 0, 50)
  }

  p.draw = () => {
    counterTimer()
    p.background(89, 113, 255);
    p.noStroke();
      triangleLeft(a)
}

it doesn't increase the variable, it just stays at 800.. any ideas?

Try dragging it with your mouse

int iterations = 14;
int treeSize = floor(pow(2, iterations)-1);
Branch[] tree = new Branch[treeSize];

float t, t2, colorT;

float angle = 45;
float startangle;
float startererangle = angle;

float wind = 1;
float startwind = wind;
float tempWind;

float r, g, b;
boolean mouseBegin = true;
PVector startMouse;
float tempAngle;

float friction = 0.98; // 0.95 for original
float tension = 0.03;  // 0.1 for original

PGraphics pg;

int noiseSeed1, noiseSeed2, noiseSeed3;

int cursorCount = 0;

void setup () {
  fill(0);
  //size(800, 800, P2D);
  fullScreen(OPENGL);
  pixelDensity(displayDensity());
  smooth(8);
  pg = createGraphics(width, height);

  for (int i=1; i<treeSize; i++) {
    tree[i] = new Branch(new PVector(0,0),new PVector(0,0));
  }
  seed();
  plant();

  noiseSeed1 = day() + hour() + minute() + second();
  noiseSeed2 = int(noiseSeed1 * 1.41421356237);
  noiseSeed3 = int(noiseSeed2 * 3.14159265358);

}

void seed() {
  PVector dir = new PVector(0, -300);
  dir.rotate(rad(wind));

  PVector a = new PVector(width/2, height-100) ;
  PVector b = new PVector(width/2+dir.x, height+dir.y-100);
  tree[0] = new Branch(a, b);
}


void plant() {
  seed();

  for (int i=1; i<treeSize; i++) {
    int n = floor((i-1)/2);
    if (i % 2 == 0) {
      tree[n].branch(-1, tree[i]);
    } else {
      tree[n].branch(1, tree[i]);
    }
  }
}

void physics() {
  wind = startwind*(cos(t))*-1;
  startwind *= friction;
  noiseSeed(1337);
  startwind += map(noise(t/51-100), 0, 1, -0.2, 0.2);
  t -= tension;

  angle = startererangle + startangle*(cos(t2));
  startangle *= friction;
  noiseSeed(42);
  startangle += map(noise(t2/50), 0, 1, -0.2, 0.2);
  t2 -= tension;
}

PVector prevMouse, mouse;

void mouse(){
  // Hide / show cursor
  prevMouse = mouse!=null ? mouse : new PVector(mouseX, mouseY);
  mouse = new PVector(mouseX, mouseY);
  cursorCount ++;
  if (mouse.x != prevMouse.x || mousePressed) {cursorCount = 0; cursor();};
  if (cursorCount > 20) noCursor();

  if (!mousePressed) {
      physics();
      mouseBegin = true;
    } else {
      if (mouseBegin == true) {
        startMouse = new PVector(mouseX, mouseY);
        tempWind = wind;
        tempAngle = angle;
        mouseBegin = false;
      }
      wind = tempWind + map(mouseX-startMouse.x, -width, width, deg(-1), deg(1));
      startwind = abs(wind);
      t = abs((wind/abs(wind)+1)*PI/2);

      angle = abs(tempAngle + map(mouseY-startMouse.y, -height, height, deg(-1), deg(1)))+0.01;
      startangle = startererangle-angle;
      t2 = abs(((angle/abs(angle)+1))*PI/2);
    }
}

void draw() {
  //println(frameRate);
  mouse();
  plant();

  noiseSeed(noiseSeed1);
  float r = map(noise(colorT/50), 0, 1, 0, 255);
  noiseSeed(noiseSeed2);
  float g = map(noise(colorT/75), 0, 1, 0, 255);
  noiseSeed(noiseSeed3);
  float b = map(noise(colorT/100), 0, 1, 0, 255);
  colorT--;


  // Start drawing image
  background(25);

  stroke(r, g, b);
  fill(r, g, b);
  rect(width/2-20, height-100, 40, 20, 3, 3, 40, 40);

  int level = 1;

  for (int i=0; i<treeSize; i++) {
    if ((i % (pow(2, level)-1)) == 0) {
      //if (level > 6) strokeWeight(1);
      strokeWeight((iterations-level)/2);

      noiseSeed(noiseSeed1);
      r = map(noise(colorT/50+level*0.2), 0, 1, 0, 255);
      noiseSeed(noiseSeed2);
      g = map(noise(colorT/75+level*0.2), 0, 1, 0, 255);
      noiseSeed(noiseSeed3);
      b = map(noise(colorT/100+level*0.2), 0, 1, 0, 255);

      stroke(r, g, b);

      level++;
    }
    tree[i].show();
  }
}

public class Branch {
  PVector begin;
  PVector end;
  float rand;
  boolean finished = false;
  float rotation = 0;

  public Branch(PVector begin, PVector end) {
    this.begin = begin;
    this.end = end;
  }

  public void show() {
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  }

  public void branch(int direction, Branch targetBranch) {
    PVector dir = new PVector(this.end.x-this.begin.x, this.end.y-this.begin.y);
    dir.rotate(rad(direction*angle+wind));
    dir.mult(0.6667);
    PVector newEnd = new PVector(this.end.x+dir.x, this.end.y+dir.y);
    targetBranch.begin = this.end;
    targetBranch.end = newEnd;
  }
}

static float rad(float deg) {
  return deg*PI/180;
}

static float deg(float rad) {
  return rad*180/PI;
}

my simple code

float x, y = 50, w = 40, h = 30;
float angle1=0.0;

void setup() {
  size(1000, 700);
  rectMode(CENTER);

}//func

void draw() {
  background(0);

  fill(255); 

  //display
    translate(x, y);
    rotate(angle1); 
    println("frameCount=" +frameCount +" angle="+angle1 + " x="+x + " y=" +y);

    fill(200, 0, 0);//red
    rect(0, 0, w, h);

  //move
  if (frameCount<300) {
      x++; 
      //y++;
      //angle1 += 0.01;
    } else if (frameCount<=460) {
      x+=1; 
      y++;
      angle1 += 0.01;
    } else if(frameCount<900){
      w = 30;
      h = 40;

      x = 460;
      y++;
      angle1 = 0.0;
    }
}

Figure figure=new Figure();
PVector mus;
PVector dirx;
PVector diry;
float anglx;
float angly;
float locX=0;
float locY=0;


void setup()
{
  size(500,500,P3D);
  ortho();
  dirx=new PVector(0,0,0);
  diry=new PVector(0,0,0);
}



void draw()
{
  mus=new PVector(mouseX-pmouseX,mouseY-pmouseY,0);
  mus.setMag(0.04);

  dirx = new PVector(1,0,0);
  dirx.add(mus.copy());
  dirx.setMag(1);

  diry = new PVector(0,1,0);
  diry.add(mus.copy());
  diry.setMag(1);


  background(200);
  figure.display();
}



void mousePressed()
{
  locX=mouseX;
  locY=mouseY;
}



void mouseDragged()
{

  ellipse(locX,locY,5,5);

  float ax = figure.A.x-locX;
  float bx = figure.B.x-locX;
  float cx = figure.C.x-locX;

  float ay= figure.A.y-locY;
  float by= figure.B.y-locY;
  float cy= figure.C.y-locY;



  {// rotation by X axis

  float nax=(figure.A.x*1)+(0)+(0);
  float nay=(0)+(ay*dirx.x)+(figure.A.z*dirx.y);
  float naz=(0)+(ay*-dirx.y)+(figure.A.z*dirx.x);

  float nbx=(figure.B.x*1)+(0)+(0);
  float nby=(0)+(by*dirx.x)+(figure.B.z*dirx.y);
  float nbz=(0)+(by*-dirx.y)+(figure.B.z*dirx.x);

  float ncx=(figure.C.x*1)+(0)+(0);
  float ncy=(0)+(cy*dirx.x)+(figure.C.z*dirx.y);
  float ncz=(0)+(cy*-dirx.y)+(figure.C.z*dirx.x);


  figure.A.x=nax;
  figure.A.y=nay+locY;
  figure.A.z=naz;
  figure.B.x=nbx;
  figure.B.y=nby+locY;
  figure.B.z=nbz;
  figure.C.x=ncx;
  figure.C.y=ncy+locY;
  figure.C.z=ncz;
  }


  {// rotation by Y axis


  float nax=(ax*diry.y)+(0)+(figure.A.z*-diry.x);
  float nay=(0)+(figure.A.y*1)+(0);
  float naz=(ax*diry.x)+(0)+(figure.A.z*diry.y);

  float nbx=(bx*diry.y)+(0)+(figure.B.z*-diry.x);
  float nby=(0)+(figure.B.y*1)+(0);
  float nbz=(bx*diry.x)+(0)+(figure.B.z*diry.y);

  float ncx=(cx*diry.y)+(0)+(figure.C.z*-diry.x);
  float ncy=(0)+(figure.C.y*1)+(0);
  float ncz=(cx*diry.x)+(0)+(figure.C.z*diry.y);


  figure.A.x=nax+locX;
  figure.A.y=nay;
  figure.A.z=naz;
  figure.B.x=nbx+locX;
  figure.B.y=nby;
  figure.B.z=nbz;
  figure.C.x=ncx+locX;
  figure.C.y=ncy;
  figure.C.z=ncz;

  }
}




class Figure
{
  PVector A;
  PVector B;
  PVector C;


  Figure()
  {
    A=new PVector(random(width*2, width*4), random(width*2, width*4), random(width*2, width*4));
    B=new PVector(random(width*2, width*4), random(width*2, width*4), random(width*2, width*4));
    C=new PVector(random(width*2, width*4), random(width*2, width*4), random(width*2, width*4));
  }


  void display()
  {

    stroke(255, 150);
    fill(#73C1C1);

    beginShape(TRIANGLES);
    vertex(A.x, A.y, A.z);
    vertex(B.x, B.y, B.z);
    vertex(C.x, C.y, C.z);
    endShape();

    fill(255);
    text("AX="+A.x, 10, 20);
    text("AY="+A.y, 10, 40);
    text("AZ="+A.z, 10, 60);

    text("BX="+B.x, 10, 100);
    text("BY="+B.y, 10, 120);
    text("BZ="+B.z, 10, 140);

    text("CX="+B.x, 10, 180);
    text("CY="+B.y, 10, 200);
    text("CZ="+B.z, 10, 220);

    text(locX, 10, 260);
    text(locY, 10, 280);
  }
}

I am trying to write code that will allow a preprogrammed sprite to move according to input from the WSAD keys. Currently, I am defining a sprite as a custom class with an x, y position, a width, and a height. I have the ability to program the code so each key moves the sprite in a corresponding direction.

W - Up, S - Down, A - Left, D - Right

What I want to do is edit this code slightly. I want to build it so the keys function like this:

W - Up, S - Down, A - Rotates the sprite left around the center point, D - Rotates the sprite right around the center point

I am looking at the rotate() and translate() functions now, just a little unclear on how to properly use them. I can make the sprite rotate around a point, but when I move the sprite off of that point (using either W or S) the sprite continues to rotate around the original position. How do I write the code to adjust the position with the new x, y coordinates?

Thanks for the help.

I am looking for a way to "build" a triangle shape (isosceles triangle) where I can specify the start point a (a1,a2), the length of the vertical direction towards the hypotenuse, and the length of the hypotenuse.

I then want to paste multiple triangles from that master shape into the sketch at positions I specify just with a point and the rotation of the triangle. For example 4 triangles in the middle of each side with the hypotenuse facing towards the middle of the sketch.

position1(  0 , height/2 ) with 90° rotation
position2( width/2 , 0 ) with 0° rotation
position3( width , height/2 ) with 180° rotation
position4( width/2 , height ) with 270° rotation

Any help is strongly appreciated.

Thanks a lot.

int x1, y1, x2, y2;

Square leftSquare, rightSquare, holdSquare;
boolean rotated = false;
float theta = 0.01;
int switcher = 0;

void setup() {

  size(800, 500); //original 1200, 800
  x1 = 325;
  y1 = 350;
  x2 = 775;
  y2 = 350;

  leftSquare = new Square(x1, y1);
  rightSquare = new Square(x2, y2);
} 

void draw() {

  background(0);

  if (rotated == true && switcher%2 == 0) {
    rightSquare.display2();
    pushStyle();
    stroke(255, 69, 0);
    strokeWeight(10);
    leftSquare.testRotateLeft();
    leftSquare.display();
    popStyle();
  } else if (rotated == true && switcher%2 == 1) {
    leftSquare.display();
    pushStyle();
    stroke(255, 69, 0);
    strokeWeight(10);
    rightSquare.testRotateRight();
    rightSquare.display2();
    popStyle();
  } else if (switcher%2 == 0) {
    pushStyle();
    stroke(255, 69, 0);
    strokeWeight(10);
    leftSquare.display();
    popStyle();
    rightSquare.display2();
  } else if (switcher%2 == 1) {
    pushStyle();
    stroke(255, 69, 0);
    strokeWeight(10);
    rightSquare.display2();
    popStyle();
    leftSquare.display();
  }
}

void keyPressed() {
  if (key == 'r') {
    rotated = true;
  }

  if (key == TAB) {
    //rotated = false;
    switcher++;


    leftSquare.x = x1;
    leftSquare.y = y1;
    rightSquare.x = x2;
    rightSquare.y = y2;
  }
}

void rotate() {
  if (key == 'a') {
    theta = theta + 0.05;
  } else if (key == 'd') {
    theta = theta - 0.05;
  }
}

class Square {

  float x;
  float y;
  float w;
  float h;
  color c;
  color d;


  void testRotateLeft() {
    rotate(); 
    translate(x1, y1);
    rotate(theta);
    x = 0;
    y = 0;
  }

  void testRotateRight() {
    rotate(); 
    translate(x2, y2);
    rotate(theta);
    x = 0;
    y = 0;
  }

  Square(float xIn, float yIn) {
    x = xIn;
    y = yIn;
    w = 100;
    h = 100;
    c = color(255, 255, 255);
    d = color(69, 69, 69);
  }

  void display() {
    fill(c);
    rect(x, y, w, h);
  }

  void display2() {
    fill(d);
    rect(x, y, w, h);
  }


  void setColor(float r, float g, float b) {
    int red = (int)r;
    int green = (int)g;
    int blue = (int)b;
    c = color(red, green, blue);
    d = color(69, 69, 69);
  }
}

if(mouseIsPressed) {
  graphics.fill(255)
  graphics.stroke(255);
  graphics.ellipse(mouseX, mouseY, 100);
} 

but the mouse is not recognising the rotation and so I press the mouse and if its not in the center it won't recognize where on the canvas I am... HALP!

I was looking at doing some image animation and transitions with image masks. The effect I'm working towards is having an image mask rotate depending on where a user's mouse is positioned around the border of a circle. So as the user moves their mouse around the circle's border the image mask rotates revealing a previously covered part of the bottom image. To do this, the image mask would need to be able to rotate dynamically based on the user's interactions with the sketch. Being able to rotate the image mask would prevent having to create a mask for every possible angle of the circle.

From what I could find, there wasn't a way to rotate or transform an image mask before it is applied to an image in a P5.js sketch. Is this possible with the current p5.js library?

Referencing the image mask example from the documentation is there a solution to rotate the preloaded image before you apply it to the image?

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Would be something like the following sudo code...

var photo, maskImage;
function preload() {
    photo = loadImage('assets/rockies.jpg');
    maskImage = loadImage('assets/mask2.png');
}
    
function setup() {
    createCanvas(100, 100);
    // SUDO CODE:
    // =======
    // Rotate the maskImage 90degrees via rotate(PI/2.0);
    // Apply the newly rotated mask to the image
    // END OF SUDO Code
    // =======
    photo.mask(maskImage);
    image(photo, 0, 0);
}

Thanks!

I am starting with processing and I am a bit lost. I would like to display some text in a defined rectangle and then, following the order of reading (upper left corner to bottom right corner), make each letter move randomly, as the same time as lowering its opacity until total dissapearing. I suppose it's possible but I have no idea wich function I should use !

Thank you very much for your help ! :)

Because the movement of the hands is independent from the system clock once setup is done, it tends to drift—on the computer I'm currently on, it falls behind by ~1s/7m. (From this point forward, I'll only be referring to the second hand, because once that's working, the others should be solved similarly) I tried forcing it to stay synced by dividing the rotation by the framerate, ie

(TAU/60)/frameRate

or

(TWO_PI/60)/frameRate

but that still doesn't keep it synced, so I'm thinking that I either need to tell it constantly read from the system time to update (and animate*) it, or I need to tell it to rotate to an angle (0°, 6°, 12°, 18°, etc...) as opposed to by an angle (6° per second), based on the values of the system time, but I don't know how I'd go about scripting either of those actions. I imagine that it would be similar to how I set up the hands, but using the "s" variable gives one of 60 values, so I don't think it can be directly used to control rotation speed.

The current code is below** (nb: the rotation scripts have been nulled to avoid errors and distractions, and are given as blank because they're the problem. Also, the forum scripting is having a fit with the in-code URLs. Apologies for the weirdness):

int cx, cy;
int r = 364;
float clockDiameter;
float s = map(second(), 0, 60, 0, TWO_PI);
float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI); 
float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2);
PShape face,hrhand,mnhand,schand;

void setup() {
  size(1080, 1080);
  face = loadShape("goodmangooddesign.com/clock_test/watch_face-1_1.svg");
  hrhand = loadShape("goodmangooddesign.com/clock_test/watch_hrhand-1_1.svg");
  mnhand = loadShape("goodmangooddesign.com/clock_test/watch_mnhand-1_1.svg");
  schand = loadShape("goodmangooddesign.com/clock_test/watch_schand-1_1.svg");
  clockDiameter = r*2;
  cx = width / 2;
  cy = height / 2;
  hrhand.translate(r,r);
  hrhand.rotate(h);
  hrhand.translate(-r,-r);
  mnhand.translate(r,r);
  mnhand.rotate(m);
  mnhand.translate(-r,-r);
  schand.translate(r,r);
  schand.rotate(s);
  schand.translate(-r,-r);
}

void draw() {
  background(0);
  shape(face, cx-r, cy-r, clockDiameter, clockDiameter);
  shape(hrhand, cx-r, cy-r, clockDiameter, clockDiameter);
  hrhand.translate(r,r);
  //hrhand.rotate();
  hrhand.translate(-r,-r);
  shape(mnhand, cx-r, cy-r, clockDiameter, clockDiameter);
  mnhand.translate(r,r);
  //mnhand.rotate();
  mnhand.translate(-r,-r);
  shape(schand, cx-r, cy-r, clockDiameter, clockDiameter);
  schand.translate(r,r);
  //schand.rotate();
  schand.translate(-r,-r);
}

*I have a question about the animating, but I'll save that for once I get the calibration figured out. **I put the imported graphics online, so that anyone can run this.

  fill(237, 26, 55);
  rect(336, 605, 112, 121);

  fill(255);
  ellipse(392, 662, 63, 63);

So, firstly I tried using only rotate(PI/2) before that, but it just disappeared. Then I tried translate, in case that was what was missing, but once again nothing. I thought that maybe rectMode(CENTER) would finally make everything work, but it actually made everything move out of place! I tried putting everything between push and pop matrix but it didn't work. I don't understand what is happening or what I am doing wrong. And the thing is that I moved these objects to the end of the code so it wouldn't interfere with the rest. I searched everywhere but I cannot find anything to help me. Thank you for your time.

I'm really not much experienced with processing, I have an object that must be moving in a specific angle. My object is already in the center (I'm glad I made it that far) and I want it to rotate 30 degrees up and down, I already could manage to make it move 30 degrees down but I have not the slightest clue how to make it a fluently move that continues moving up and down. I already tried a lot of things but just can't figure out how to do it. Btw this is the code that I could create yet:

int myRotation;

void setup() { size(600, 600); background(150); fill(255); noStroke(); }

void draw() {

background(255); fill(0);

if(myRotation < 30) { myRotation++; }

for (int i = 2; i<3; i++) { for (int e = 3; e < 4; e++) { pushMatrix(); translate(300, 300); rotate(radians(myRotation)); quad(0, 0, -50, -100, 50, 0, -150, 50); popMatrix(); } } }

thanks a lot in advance! :)

PImage a1;

int x1=1; int y1=1; int front;

boolean a1IsSet= false;

void setup() { size(600, 400); frameRate(9); background(255,255,255); }

void draw() {

front = int(random(1,5));

if (a1IsSet) image (a1, x1, y1 ); }

void mousePressed() {

if (mousePressed ) {

 float angle = atan2(mouseY, mouseX );

pushMatrix(); rotate(angle); PImage imgFront = loadImage(front + "leaf.jpg"); image(imgFront, mouseX-150, mouseY-200); popMatrix(); } }

PShape square;

void setup()
{
  size(640,480, P3D);
  smooth();
  shapeMode(CENTER);

  square = createShape();

  square.beginShape(QUADS);

  square.stroke(0);

  square.vertex(0, 0, 0);
  square.vertex(0, 40, 0);
  square.vertex(40, 40, 0);
  square.vertex(40, 0, 0);

  square.endShape(CLOSE);
}

void draw()
{
  background(255);

  translate(width / 2, height / 2);

  square.rotate(radians(3));

  fill(0, 255, 255);
  rect(0, 0, 640, 480);
  shape(square, 0, 0);
}

When I run this code, the square's initial position is correct, but the rotation is not; it appears as though the upper left vertex oscillates while the shape rotates. Ultimately, I want to be able to spin the object around its center regardless of where it is positioned in the sketch. Any help towards accomplishing this would be appreciated.

There’s a PImage which has to follow the coordinates of the mouse, without moving. This gif is pretty much what i’d like to do

function Grid(xStart, yStart, vN, hN, vW, hW, vS, hS) {
    this.x = xStart;
    this.y = yStart;
    this.vertNum = vN;
    this.horizNum = hN;
    this.vertSpace = vS;
    this.horizSpace = hS;
    this.vertWidth = vW;
    this.horizWidth = hW;
    this.gridWidth = (vN - 1) * (vW + vS);
    this.gridHeight = (hN - 1) * (hW + hS);

    this.middleX = this.x + this.gridWidth / 2;
    this.middleY = this.y + this.gridHeight / 2;
    this.underneath = this.gridHeight + 10;
    //this.angleRotated = 0;

    this.moveWithMouse = function() {
        this.x = mouseX - this.middleX;
        this.y = mouseY - this.underneath;
    }

    this.moveWithArrowKeys = function() {
        if (keyIsDown(LEFT_ARROW)) this.x -= 1;
        if (keyIsDown(RIGHT_ARROW)) this.x += 1;
        if (keyIsDown(UP_ARROW)) this.y -= 1;
        if (keyIsDown(DOWN_ARROW)) this.y += 1;
    }

    this.rotation = function() {
        if (keyIsDown(188)) {
             // If comma key, rotate me counterclockwise!!!
        }
        if (keyIsDown(190)) {
            // If period key, rotate me clockwise!!!
        }
    }

    this.display = function() {
        noStroke();
        this.drawVerticals();
        this.drawHorizontals();
    }

    this.drawVerticals = function() {
        // fill(0, 200);
        for (var ix = 0; ix < this.vertNum; ix++) {
            rect(this.x + (ix * (this.vertSpace + this.vertWidth)), this.y, this.vertWidth, this.gridHeight + this.horizWidth);
        }
    }

    this.drawHorizontals = function() {
        // fill(0, 50);
        for (var iy = 0; iy < this.horizNum; iy++) {
            rect(this.x, this.y + (iy * (this.horizSpace + this.horizWidth)), this.gridWidth + this.vertWidth, this.horizWidth);
        }
    }
}
function draw() {
    background(255);
    stroke(0);
    fill(0);
    gridObjectName.display();
}

A grid object is instantiated in setup(). I show what I do in draw() above as well.

My question is how can I take this object, which is drawn in default rectMode(CORNER) from starting point (xStart, yStart), and has attributes 'middleX' and 'middleY' (='center'), and rotate it with about its center and most importantly, save that rotation to the object (so it draws correctly rotated every keypress)?

int x = 80; int y = 600; int bodyHeight=110; int neckHeight=140; int radius = 45; int ny = y-bodyHeight-neckHeight-radius; int m=740; int b=558; int t=15; int h=30; void setup(){ size (1520,780); } void draw(){ smooth(); strokeWeight(2); background(204); fill(#36A6FF); //sky color rect(0,0,2000,600); //sky fill(#F6FF00);//suncolor ellipse(30,30,100,100); //sun ellipseMode(RADIUS); //neck stroke(102); //set dtroke to gray line(x+2,y-bodyHeight,x+2,ny); //left line(x+12,y-bodyHeight,x+12,ny); //Middle line(x+22,y-bodyHeight,x+22,ny); //Right //antennae line(x+12,ny,x-18,ny-43); //small line(x+12,ny,x+42,ny-75); //tall line(x+12,ny,x+78,ny+15); //Medium //Body noStroke(); //disable stroke fill(102);//set fill to gray ellipse(x,y-33,33,33); //antigravity orb fill(#FF6600);//set fill to block rect(x-45,y-bodyHeight,90,bodyHeight-33); //main body fill(102); //set fill to gray rect(x-45,y-bodyHeight+17,90,6); //gray stripe //head fill(#FF6600); //set fill to block ellipse(x+12,ny,radius,radius); //head fill(255); //set fill to white ellipse(x+24,ny-6,17,17); //large eye fill(0); //set fill to black ellipse(x+24,ny-6,3,3); //pupil fill(155); //set fill to light gray ellipse(x,ny-8,5,5); //small eye 1 ellipse(x+30,ny-26,4,4); //small eye 2 ellipse(x+41,ny+6,3,3); //small eye 3 //goal post fill (234,234,2); rect(1200,200,10,400); //left upright fill(234,100,30); //color football ellipse(m,b,t,h); //football fill (234,234,2); rect(1400,200,10,400); //right upright rect(1200,400,210,10); //crossbar fill(#26D34D); //grass color rect(0,600,2000,2000); //grass fill(#FF0000); //flag color rect(1210,200,25,10); //left flag rect(1410,200,25,10); //right flag fill(#FF6600); //pad color rect(1185,500, 40, 100); //left pad rect(1385,500,40,100); //right pad fill(0);//tee color rect(725,588,30,12);//tee //bigger eye, smaller big antenna, sky, sun, laces on the ball, upright flags, orange body color, and post pads. } //kick the football void mousePressed(){ x+=30; if (x>700){ m+=50;b+=-25;x=700; rotate(90); ellipse(m,b,t,h); } }

int x = 80; int y = 600; int bodyHeight = 110; int neckHeight = 140; int radius = 45; int ny = y-bodyHeight-neckHeight-radius; int m = 600; int b = 573; int j = 17; int k = 26;

void setup(){ size (1520,780); } void draw(){ smooth(); strokeWeight(2); background(#0671C6); ellipseMode(RADIUS); //neck stroke(102); //set stroke to gray line(x+2,y-bodyHeight,x+2,ny); //left line(x+12,y-bodyHeight,x+12,ny); // Middle line(x+22,y-bodyHeight,x+22,ny); //Right //antennae line(x+12,ny,x-18,ny-43); //small line(x+12,ny,x+42,ny-99); //tall line(x+12,ny,x+78,ny+15); //Medium //Body noStroke(); //disable stroke fill(0); //set fill to black ellipse(x,y-33,33,33); //antigravity orb fill(#E50C1E); //set fill to red rect(x-45,y-bodyHeight,90,bodyHeight-33); //main body fill(0); //set fill to black rect(x-45,y-bodyHeight+17,90,6); //gray stripe //head fill(#797576); //set fill to gray ellipse(x+12,ny,radius,radius); //head fill(255); //set fill to white ellipse(x+24,ny-6,14,14); //large eye fill(0); //set fill to black ellipse(x+24,ny-6,3,3); //pupil fill(155); //set fill to light gray ellipse(x,ny-8,5,5); //small eye 1 ellipse(x+30,ny-26,4,4); //small eye 2 ellipse(x+41,ny+6,3,3); //small eye 3 //goal post fill(234,234,2); rect(1200,200,10,200); //left upright rect(1200,400,210,10); //crossbar rect(1300,400,10,200); //base pole //football fill(#40190A); //set fill to brown ellipse(m,b,j,k); //football fill(234,234,2); rect(1400,200,10,200); // right upright //grass fill(#0A3E04); //set fill to green rect(0,600,1900,500); //fill in glass //flag 1 fill(#E54405); triangle(1200,200,1200,180,1250,190); //left flag triangle(1400,200,1400,180,1450,190); //right flag //Yardlines fill(#FCF7F5); rect(600,600,10,500); //10 yerd line rect(200,600,10,500); //20 yard line rect(400,600,10,500); //15 yard line rect(800,600,10,500); //5 yard line rect(1000,600,10,500); //front of end zone rect(1300,600,10,500); //back of end zone //endzone fill(#E8071A); rect(1010,600,290,500); //endzone fill //Sun fill(#F7BF05); ellipse(100,100,90,90); }

//kick the football void mousePressed(){ x+=30; if (x>550){ m+=100;b+=-45;x=550;

pushMatrix(); translate (width/2,height/2); rotate(PI/4); translate(100,-45); ellipse(m,b,j,k); popMatrix(); } }

i'm trying to do some kind of QTE game with p5.js, i have a question :

How can I check if the red line is touching the black or the white arc ?

To move the red line i'm using the rotate function so i'm not sure how i should proceed.

I think what I want is to have coordinates of everything so i could compare but the rotate function kind of prevent that.

Here's the code : https://pastebin.com/WXvGbT9g

It's my first program using p5.js so sorry if it's a stupid question.

Thanks for your help !

(sorry for my english)

Thanks.

float velocity = 0.01; float spin = 0;

void setup(){ size(500,500);

}

void draw(){ background(255);

spin += velocity; pushMatrix(); translate(width/2, height/2); noStroke(); fill(0); rotate(spin); triangle(0,-100, 100, 50,-100,50); popMatrix(); noStroke(); fill(255,0,0); ellipse(width/2, height/2, 5, 5);

}

I wonder if this is a bug, if not why does this happen?

float rate;

void setup(){
   size(screen.width, screen.height, P2D);
}

void draw(){
   background(0);
   translate(width/2, height/2);
   for (int i = 0; i < 270; i += 1) {
     for (int j = 0; j < 270; j += 1) {
       rotate(rate);    
       stroke(255);  
       point(i, j);
     }
   } 
   //rate += 100;   
   //Nice patterns
   rate += 0.001;   
   //Ever increasing spiral
   //rate += 0.0001;  
   //Weird thing
   //rate += 0.0000001;
}

Here's the code i wrote:

object myObject;

boolean [] keys = new boolean[128];

void setup(){
  size(600, 600); 
  smooth();
  myObject = new object();

}

void draw(){
  background(0);
  myObject.run();  

}

void keyPressed(){
  keys[key] = true;
  }

void keyReleased(){
    keys[key] = false;
  }

and that's the object class with the problematic function

class object {

  float x = width/2;
  float y = height/2;
  int speed = 5;

  object() {
  }

  void run() {    //generic function container
    display();
    move();
  }


  void display() {
    x=constrain(x, 25, width-25);
    y=constrain(y, 25, height-25);
    rectMode(CENTER);
    rect(x, y, 50, 50);
  }


  void move() {
    if (keys['a']) //move left 
      x= x-speed;
    if (keys['d']) //move right
      x= x+speed;
    if (keys['w']) //move up
      y= y-speed;
    if (keys['s']) //move down
      y= y+speed;
    if (keys['e']) //rotate right (calls for another function)
      rotateR();
    if (keys['q']) //rotate left (unwritten code)!!!
      rotateL();
  }

  void rotateR() {   //PROBLEMATIC FUNCTION  HOW DO I FIX IT?
    pushMatrix();
    translate(x, y);
    rotate(radians(frameCount));
    rect(0,0,50,50);
    popMatrix();
  }

  void rotateL(){   // TODO

  }

}

any help would be appreciated. ty

there are only two vectors involved, gravity and the launch vector. Right now when the rectangle reaches y=350 I multiply the vel and acc by 0 and set the pos.y to the ground's y value.

this is a gif.

function Projectile(apos, angle, power) {

this.pos = createVector(apos.x,apos.y);
this.vel = p5.Vector.fromAngle(angle-(PI));
this.vel.mult(power/15);
this.acc = createVector(0,0);
this.applyForce = function(force){
this.acc.add(force);
}
this.update = function() {
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
if (this.pos.y > 350){
  this.pos.y = 350;
  this.acc.mult(0);
  this.vel.mult(0);
}
}
this.render = function(){
  push();
    translate(this.pos.x,this.pos.y);
    rectMode(CENTER);
    rotate(this.vel.heading());
    fill(255);
    rect(0,0, 10, 6);
  pop();
}
}

P.S. I tried formatting the code, but it wasn't working. I feel like a noob.

translate(150, 150); 

rotate(radians(mouseY));

fill(0);
rect(0, 0, 100, 100);
rotate(radians(mouseY));
fill(0);
rect(200, 0, 100, 100);
rotate(radians(mouseY));
fill(0);
rect(400, 0, 100, 100);

}

I tried using rotate(-angle) and then drawing an image, but it won't display the image. (I also put resetMatrix() behind)

I guess displaying an image rotated is one of those things that's impossible to do as well? (I was only trying to rotate the image multiples of PI/2)

Kind regards, OrOrg