Need to upload user's image input - P5 JavaScript library

Question

I have a Sketch in Processing written in P5.js, but I don't know how to implement user's input. The program needs to get .jpg image and it's working on it. Every my attempt of user-input implementation ends with blank screen or endless "Loading..." screen. Below is example with preloaded image (I need user to do it).

let img;
let size;
let pixels = [];

function preload(){
  img=loadImage('image.jpg');  
}

function setup() {
  img.resize(windowHeight,0);
  size = img.height/2;
  createCanvas(img.width, img.height);
  background(0);
  makePixels();
  drawPortrait();
}
function makePixels(){
    for(let y=0; y<height; y+=size){
      for(let x=0; x<width; x+=size){
        let c = img.get(x,y);
        tint(c);
        pixels.push ( new Pixel (x,y,size,c) );
      }
    }
}

function drawPortrait(){
  for(let p of pixels){
    p.show();
  }
}

function drawLastFour(){
  for(let i = pixels.length-4; i<pixels.length; i++){
    pixels[i].show();
  }
}

function mouseMoved(){
  for(let i = 0; i<pixels.length; i++){
      if( (mouseX > pixels[i].x) && (mouseX <= pixels[i].x+pixels[i].s) && (mouseY > pixels[i].y) && (mouseY <= pixels[i].y+pixels[i].s) ){
        for(let py = pixels[i].y; py<pixels[i].y+pixels[i].s; py+=pixels[i].s/2){
          for(let px = pixels[i].x; px<pixels[i].x+pixels[i].s; px+=pixels[i].s/2){
            let c = img.get(px, py);
            pixels.push( new Pixel(px,py,pixels[i].s/2, c) );
          }
        }
        pixels.splice(i,1);
        break;
      }
    }
  drawLastFour();
}

Paul Wheeler · Accepted Answer · 2021-08-09 19:35:10Z

2

You can use the createFileInput function to create an input element of type file. Your user can then select an image file, which can be used by your sketch. Here is the (slightly modified) example code that shows how you can use it:

let inputElement;
let userImage;

function setup() {
  inputElement = createFileInput(handleFile);
  inputElement.position(0, 0);
}

function draw() {
  background(255);

  if (userImage != null) {
    image(userImage, 0, 0, width, height);
  }
}

function handleFile(file) {
  print(file);

  if (file.type === 'image') {
    userImage = createImg(file.data, '');
    userImage.hide();
  } else {
    userImage = null;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

edited Aug 9, 2021 at 19:35

Paul Wheeler

20.3k3 gold badges33 silver badges47 bronze badges

answered Feb 6, 2021 at 20:27

Freek de Bruijn

3,6223 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Need to upload user's image input - P5 JavaScript library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related