CODEWITHSUNDEEP
vue.jsp5.js
Nils
Nils

Reputation: 57

Getting pixel color at given position with p5js in vue

I am currently using p5.js in vue. To get it running, I followed the steps described in p5.js and vue - create a canvas.

This works perfectly fine, I am however stuck when it comes to using some functions provided by p5. With this setup, how can I (e.g.) use the get function when trying to get the pixel at a given location. b.img.get() doesn't work. In a "normal" instance i could just skip the b., but in vue I have to use it (as far as I understand)

import * as P5 from 'p5';

export default {
  name: "Pixelation",
  mounted() {
    this.$nextTick(function () {
      let w = document.getElementById("pixel").offsetWidth;
      let h = document.getElementById("pixel").offsetHeight;

      const sketch = b => {

        let img;
        let rad;

        b.preload = () => {
          img = b.loadImage(require('@/assets/tankman.png'));
        }

        b.setup = () => {
          b.createCanvas(w, h);
          b.image(img, 0, 0, w, h);
          rad = 30;
        }


        b.draw = () => {
          for(let i = 0; i < w; i += rad) {
            for (let j = Math.round(h / rad); j < h; h += rad) {
               b.fill(b.img.get(i, b.max(j, 0)));
               b.circle(i, j, rad);
            }
          }
        };
      }

      // eslint-disable-next-line no-unused-vars
      let canvas = new P5(sketch, 'top');
    })
  }
}
#pixel {
  width: 100%;
  height: 100vh;
}
<template>
  <div id="pixel"></div>
</template>

Upvotes: 1

Views: 258

Answers (1)

Nils
Nils

Reputation: 57

I just massively misunderstood the way the b. has to be used.

When loading an image with b.loadImage(require('@/assets/tankman.png')) and assigning it to a variabel, all desired functions that are provided by p5 can be used by using variable.function(), since variabel already includes the p5 functionality

Upvotes: 1

Related Questions