CODEWITHSUNDEEP
javascriptp5.js
Seamus Donahue
Seamus Donahue

Reputation: 25

p5js image will not rotate

I'm trying to write a game in p5js and am using an image for the character (when a certain variable is true). This image however is refusing to rotate, the square rotates (when the variable is set to false) but the image refuses to. the full code is here and the drawing code for the player is this:

show(){
    push()
    if (!this.squid){
        rotate(this.dir)
        fill(this.color[0],this.color[1],this.color[2])
        square(this.pos.x,this.pos.y,16)
    }else{
        rotate(this.direction-90)
        tint(this.color[0],this.color[1],this.color[2])
        image(squid,this.pos.x,this.pos.y)
    }
    pop()
}

Upvotes: 1

Views: 298

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20162

I think you just had a typo referencing this.direction in the show() function where you should have been referencing this.dir.

class Player {
  constructor(x, y, r, g, b) {
    this.pos = createVector(x, y)
    this.color = [r, g, b]
    this.squid = true
    this.dir = 45
  }
  show() {
    push()
    if (!this.squid) {
      translate(this.pos.x, this.pos.y)
      rotate(this.dir)
      fill(this.color[0], this.color[1], this.color[2])
      square(0, 0, 16)
    } else {
      tint(this.color[0], this.color[1], this.color[2])
      translate(this.pos.x, this.pos.y)
      // You had this.direction which was undefined
      rotate(this.dir - 90)
      image(squid, 0, 0)
    }
    pop()
  }
}

let testplayer
let squid

function preload() {
  squid = loadImage("https://f1201776-831f-4d61-a007-a09053ab2a30.id.repl.co/squid.png")
}

function setup() {
  resizeCanvas(window.innerWidth, window.innerHeight)
  angleMode(DEGREES)
  testplayer = new Player(20, 20, 0xff, 0x0, 0x0)
  rectMode(CENTER)
  imageMode(CENTER)
}

function draw() {
  background(0x22)
  // Adding animated rotation for demonstration purposes.
  testplayer.dir += 1;
  testplayer.show()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

Upvotes: 2

Related Questions