Quadtrees image compression

p5.js Coding Questions
1

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.

1 Like
2

Hey there Timol,

The page 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 video by Daniel.

2 Likes
3

More Java Mode x p5js sketches: :angel:

3 Likes
4

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

cheers

1 Like
5

devmag did an article on this a long long time ago here which might be of help

4 Likes
6

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.

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/ and understand how they are working and start your work accordingly.
Thank you.