# Quadtrees image compression

**URL:** <https://discourse.processing.org/t/quadtrees-image-compression/12481>\
**Category:** Coding Questions\
**Created:** [July 3, 2019, 4:22pm UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481 "2019-07-03T16:22:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [July 3, 2019, 4:22pm UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481/1 "2019-07-03T16:22:54Z")

</div>

Hi everybody,

Long time/first time…

Im trying to create a Quadtree image compression using processing.

I’ve tried to follow Daniel Shiffmans coding challenge on quadtree data structure but I get lost.

I understand the core concepts but he writes it all in Java script.  
A lot of the syntax is lost on me since I’ve only been using Processing. (for example “this”, "var, & “let” are all new terms to me).

can anyone point me in the right direction or at least help with an explanation on some of the syntax Mr Shiffman uses?

Thanks so much.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 3, 2019, 5:37pm UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481/2 "2019-07-03T17:37:46Z")

</div>

Hey there Timol,

The page [Processing transition](https://github.com/processing/p5.js/wiki/Processing-transition) contains an overview of differences when converting Processing to P5 (which is kind of a mix between Processing and JavaScript) or vice versa. If Daniel is using P5 in his coding challenge this link should answer your question. If he’s doing everything in pure JS this link might be a good stepping stone for you.

Another interesting video, if you feel like learning more about JavaScript concepts, is the [let vs. var](https://www.youtube.com/watch?v=q8SHaDQdul0) video by Daniel.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 3, 2019, 6:02pm UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481/3 "2019-07-03T18:02:18Z")

</div>

More Java Mode x p5js sketches: 👼

> **[r/processing - OpenProcessing: converting code written in Java to JavaScript](https://www.reddit.com/r/processing/comments/7dqqvh/openprocessing_converting_code_written_in_java_to/dq0ecac/)**
>
> 9 votes and 14 comments so far on Reddit

---

<div class="post-metadata">

**Author:** ![TimoL](https://avatars.discourse-cdn.com/v4/letter/t/9fc29f/32.png) [@TimoL](https://discourse.processing.org/u/TimoL)\
**Post date:** [July 3, 2019, 8:35pm UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481/4 "2019-07-03T20:35:32Z")

</div>

Amazing!  
Thanks so much for the help guys. Hopefully this will see me on my way.

cheers

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [July 4, 2019, 5:26am UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481/5 "2019-07-04T05:26:54Z")

</div>

devmag did an article on this a long long time ago [here](http://devmag.org.za/2011/02/23/quadtrees-implementation/) which might be of help

---

<div class="post-metadata">

**Author:** ![JiyaHana](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jiyahana/32/19209_2.png) [@JiyaHana](https://discourse.processing.org/u/JiyaHana)\
**Post date:** [January 9, 2024, 7:01am UTC](https://discourse.processing.org/t/quadtrees-image-compression/12481/6 "2024-01-09T07:01:14Z")

</div>

In Processing this equates to this in JavaScript indicating the current object var, let, and const in JavaScript are like declaring variables in processing with int, float, or PVector.  
here is example.

```auto
int variableName; 
float x = 10.0; 
PVector position = new PVector(100, 200); 

```

Focus on understanding the quadtrees recursive structure and its division of space. Translate the JavaScript code logic into processing, adjusting syntax accordingly and if you want to know how to image compression works then you can compress some images through online tool such as [https://jpegcompressor.com/](https://jpegcompressor.com/) and understand how they are working and start your work accordingly.  
Thank you.