# Making a photo scanner with transforming picture

**URL:** <https://discourse.processing.org/t/making-a-photo-scanner-with-transforming-picture/22539>\
**Category:** Coding Questions\
**Created:** [July 10, 2020, 5:04pm UTC](https://discourse.processing.org/t/making-a-photo-scanner-with-transforming-picture/22539 "2020-07-10T17:04:30Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![lin.liangchen](https://avatars.discourse-cdn.com/v4/letter/l/aca169/32.png) [@lin.liangchen](https://discourse.processing.org/u/lin.liangchen)\
**Post date:** [July 10, 2020, 5:04pm UTC](https://discourse.processing.org/t/making-a-photo-scanner-with-transforming-picture/22539/1 "2020-07-10T17:04:30Z")

</div>

Hi everyone,

I am new here.  
I am trying to program a code which is making a photo scanner, to scan the photo pixels with mouse moving.  
However, I change the photo size by ratio to make smaller, but the scanner only upload the part of the photo (looks like only upper part)  
Could anyone tell me how could I do ?^^

```auto
var s = 300;
var center;
var img;
var draw_position_x = 0;

function preload() {
  img = loadImage("holland.jpg");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  imageMode(CENTER);
  img.loadPixels();
  background(0);
  stroke(255,255,0);
  strokeWeight(2);
  center = width/2;
}

function draw() {
  background(0);
  var mx = constrain(mouseX,center-s/2,center+s/2);
  var aspect = img.height / img.width;
  var imageWidth = s;
  var imageHeight = imageWidth*aspect;  
  
  var x = map(mx,center-s/2,center+s/2,s,0);
  x = floor(x);
  
  // noprotect
  for(var y = 0; y<imageHeight; y++) {
    var c = img.get(x,y);
    set(draw_position_x,y,c);
  }
updatePixels();
  
  
  //show the pic downside
  image(img, mx, height-imageHeight/2, imageWidth, imageHeight);
  line(width/2, height-imageHeight, width/2, height);
  
  //connetct
  line(draw_position_x,imageHeight,width/2,height-imageHeight);
  
  //looop
  draw_position_x++;
  if(draw_position_x >= width) {
  draw_position_x=0;
  }
}

```

It supposed to look like this.

 ![螢幕快照 2020-07-11 上午1.01.33](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2a75f4669bceeb18f74681e8291f15e61a9155f7.jpeg)