# Processing code to p5.js

**URL:** <https://discourse.processing.org/t/processing-code-to-p5-js/7173>\
**Category:** Coding Questions\
**Created:** [January 4, 2019, 5:19pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173 "2019-01-04T17:19:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lillbre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lillbre/32/18325_2.png) [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Post date:** [January 4, 2019, 5:19pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173/1 "2019-01-04T17:19:44Z")

</div>

I wonder how to translate this  
**PImage magnified, normal;** to p5.js.  
My guess is  
let magnified= new p5.Image();  
let normal= new p5.Image(); but that didn’t make it work. I am trying to do make a magnifying glass like the sketch from Tande Campos [https://www.openprocessing.org/sketch/132623/](https://www.openprocessing.org/sketch/132623/) but in p5.js

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 4, 2019, 6:39pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173/2 "2019-01-04T18:39:05Z")

</div>

Check out the P5.js reference for handy functions:

[https://p5js.org/reference/](https://p5js.org/reference/)

---

<div class="post-metadata">

**Author:** ![Lillbre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lillbre/32/18325_2.png) [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Post date:** [January 5, 2019, 5:36am UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173/3 "2019-01-05T05:36:54Z")

</div>

I have checked everywhere I could **before** I ask a question here. P5.js references do not include an answer to my question.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 5, 2019, 6:58am UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173/4 "2019-01-05T06:58:40Z")

</div>

The best advice I can give you is to start simpler. Can you get a simple P5.js sketch working that shows a single image?

---

<div class="post-metadata">

**Author:** ![Lillbre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lillbre/32/18325_2.png) [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Post date:** [January 5, 2019, 10:17am UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173/5 "2019-01-05T10:17:53Z")

</div>

My question is how to translate **PImage magnified, normal** to P5.js.  
I dont need patronizing advices

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [January 5, 2019, 6:14pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173/6 "2019-01-05T18:14:21Z")

</div>

I’m sorry if you think I’m coming across as patronizing; that’s not my intention.

I am trying to guide you to the way I would approach the problem: by understanding what the original program does, and then looking for functions that help me achieve that in the target language.

In other words, I wouldn’t try to translate a program line-by-line. Instead, I would look at the program as a whole and try to reproduce that.

The best way I know how to do that is to start with smaller programs that test things out. If I wasn’t sure how to show an image in P5.js, I would start by trying to show a single hard-coded image. Then I’d work my way up from there.

Good luck.