Monument Valley fan project


Monument Valley 2 just came out :smiley:

There is a beautiful in-game scene that took my breath away :open_mouth:

I thought:

It is the moon, so big! :full_moon: I never knew it could be like this.

And then later onwards,

I want to recreate the moon.

I was thinking it would be interesting to think about doing the colours, at the least. It starts off pink at one point, then it looks like there's a gradient to another colour on the point directly opposite.

(I almost feel like I shouldn't be drawing on this artwork...)

I realised just now that it's not actually yellow but that was how I perceived it the first time (probably because the idea of the moon being called yellow sometimes? :thinking:) so that was how I did it in a test:

I did a linear transition between the two colours on the outside. It just means that the colour at any point along the outside is directly related to how far the point is between the other two points.

E.g. at halfway between the two points along the outside, the hue, saturation and brightness value is halfway between the HSBs of the two points. That was the main point for the colouring. As for the drawing positions, you can probably see by the direction of the lines in the picture.

Then I added a background:

This was also just another transition between two colours (purply at the bottom, and creamy at the top. (Although I didn't mark them in the picture, the specific final HSBs were HSB(290, 60, 60) and HSB(25 + 360, 20, 100) respectively. The reason that for adding 360 was to avoid negative numbers in calculations)

I added refinements for the colours, trying to make them smoother, and quicker etc other small things. (The fast clone method continues to astound me!! thanks again to Valgo and ThinBuffalo's efforts :slight_smile:) then fixing up things that occurred when switching to using clones to draw (I still couldn't work out one thing — it wasn't cloning the exact expected amount. But it didn't affect much anyway.)

The results of all this


It would be interesting to try draw some purple pillars with faded colours towards the bottom, like how the towers are in the original picture. I can see a way of doing by repeatedly drawing trail diamonds, one by one on top of each other, and changing the colour slightly with each one. Or it might be cool to use a 3D technique like @MR.GAM3R's 3D test:

We would probably only need rotation around one axis for this project though, if you wanted to make it interactive :smiley: The only problem is that I can't seem to find a Unicode diamond that has 135º and 45º angles though (I think that)

It would also be a nice thing if the project was in portrait, but not big enough of a wish yet to make me change the project width and height in the JSON :stuck_out_tongue:

I don't know if I'll do these changes (adding faded towers, put it in portrait) but feel very welcome to jump in! That is the whole point :blush: I only set out to make a gradient moon :laughing: so that was satisfaction enough for me. (The developers of Monument Valley also really love fan creations actually :upside_down:) so again feel very free to join in.

I wasn't really planning to add more, as I had scratched that itch. Then, while I was writing this, I had gone to grab the original artwork when I saw the little flecks at the bottom, and decided to add a few in :slight_smile:

Some reflections

Doing these things reminds me that:

  • the process is just as important as, if not more than, the outcome,
  • mistakes are part of it! sometimes your project even evolves in ways you would never expect, from little experiments with the mistakes
  • it's just made of incremental changes.
    • (I think it's nice to see that everything, even stuff that seems big, is just little changes over time. And they all build up :yum: actually publishing small changes each time makes it really easy to track what changes you've made, and you always have a backup to revert to if you accidentally mess anything up too.)

I guess some more things were:

  • inspiration can come from anywhere!
  • Hopscotch is an amazing medium for self expression, for just quickly working on something you have in your head. It didn't take long at all from 'this moon is beautiful!' to 'I now have my own version of this :relieved:'

Anyway, feel very welcome to share about what's going in your head as you make something. I really love hearing about the development process of any creation. What went into the little parts of your projects? what little design choices you made, how you decided to set out the code, the evolution of ideas, all the thought into the little things :heart_eyes:

I don't know, I think it's just really fun doing bursts like these :smile:

If you are feeling inspired with Monument Valley 1 or 2, feel welcome to join in here too again :smile:


I'm interested in doing this:

so I might have a go at that actually :blush:


That looks beautiful.
Great job with the colours.:+1:🏻


Woah cool if u need help with anything


This looks really cool, great job!


Wow! That looks pretty awesome! (I have not played Monument Valley 2 yet, but I have almost finished the first iteration) I love your explanation and your project. :wink:


Looks very nice, @t1_hopscotch! I like how it's really smooth.


Ooh it's so pretty! Thanks for explaining your process!! I remember I was going to try to do the first level of Monument Valley I, but I never got to it. I think I might try it again soon :D

So for the background I would do many circles (hm they more like ovals don't they? I can use sin/cos to make those) increasing in brightness and decreasing in size

So I would just make the whole screen black (or whatever the darkest color is. it's more of a gray really) and then make ovals getting smaller and smaller using sin/cos (and two variables for the width and height of the oval) while also getting brighter (so I realized they weren't exactly only getting brighter but changing color too. The darkest color is HSB(201,46,15) and the lightest is HSB(203,29,31) so I'll have to do a color transition somehow) When looking reeaalllyy closely I noticed a very faint gradient getting slightly and slightly darker above the oval (the strokes start out kind of thick but get thinner and thinner (and darker) until you can't see it. I also noticed a faint shadow underneath the first layer of brick so for that I can just do tilted lines getting brighter

And for all of the bricks I would do tiny tilted stacked lines to make each flat surface and just change the colors and angles.

For the stairs I would do rectangular prisms each slightly above on another.

This little thingy is kind of complicated:

So it bends like half of a tilted octagon but then there's a little cube right by it. I think I could do that :thinking:

ooh... Ida looks tricky. Hm I'll have to work that out slowly.

Soo, the feet are just rounded triangles. I can do that by leaving trails that decrease their width and angle (but the width wouldn't go down to 0 just a low number to make it look curved). And the legs are just lines.

Hmm... so for the dress I was thinking a tiny oval with a triangle on top of it. The brown part is just a square a little bit below the tip of the dress/triangle and an oval on top of that. The face is an oval, but one side is flatter than the other, so I don't think I'll use sin/cos for it... Oh, I'll have to do the hat before the face because it's an oval with a piece then out (an oval on top of an oval?) It's tilted though so :thinking: (Edit: how to make a tilted oval) And then there's a triangle in top of the oval

She has a shadow but that won't be hard to make

Then we have the little switch. t1 basically solved most of that for me XD

If anyone has any suggestions on how to do things you're welcome to edit this! I'll probably change a few things soon

Whew :joy:

Monument Valley Trail Art Collab
Monument Valley Trail Art Collab

And wow that is awesome :smile: I love hearing how you explained what you're thinking through.

(It reminds me, with adding comments in code (in general) I have heard the tip to focus on the intent — 'the code explains how, comments explain why'. I think that way, even if one's code doesn't actually execute as expected, someone else can work out what you were trying to do, or even another way to implement what you were trying to do.)

I was just reminded of it because I understood everything you were saying of your thought process, and I thought it was a good example of 'focus on the intent' in explanations :smiley: I'm definitely going to keep it in mind more.


Haha. I know this game on the App Store - it's so beautiful.


I ended up doing a test for this idea :smiley: except I used lines instead of full diamonds, since you don't see the back anyway (and I reused the code for the two sides of a tower)

It transitions from the true colour of the tower at the top, to whatever the background colour is at each point. The amount of blending depends on the object's Y position as it is drawing.

Usually the code for colour transitions that I use for these projects is a linear relationship:

colour = position/range * (final - initial) + initial

y = x * m + c (roughly speaking)

But in the original pictures, the blending with the background is closer to the bottom. I wanted it to transition to the top colour faster, so I used a square root relationship (this was after trying out a squared relationship, but that resulted in the opposite of what I wanted to achieve – it took longer to transition to the top colour)

colour = sqrt(position/range) * (final - initial) + initial

(Squared looks like this: colour = (position/range)^2 * (final - initial) + initial)
If you are wondering where this code is, it is LineHue, LineSat and LineBrightness for the Panels object.


Actually, forget the text, let me illustrate with pictures.

Square root, linear, squared:

And here's a quick graph.

so I chose the square root one because I wanted the blending to happen at the bottom.

I was glad with that, so that is why I didn't end up bothering with the top panel :grin: I just had fun with doing this already XD


Woah this is beautiful!


youre cool


I really love Monument Valley! I like all the confusing puzzles and I LOVED the end for both!!! It was soo confusing and exciting at the same time!


It’s really cool how you recorded the process and showed how you came to making the project, and how you’re making it. There’s really a lot to learn from this! It also shows the project improve as you go on. Looking at the result, it’s important to keep working at it until you’re satisfied. I think we’ve all learned or been reminded of some key concepts in the process as you make your way to success, both in and out of coding.


This looks phenomenal! I like the way you showed the progress in making it yourself using code. I haven’t played any of the Monument Valley apps, but I like the way it’s designed. There’s this other picture of it that looks really cool to me-

I might create a replica of this picture in code, probably gonna do it through my old account on my iPad since I failed to create a new smooth background on a phone.


How exactly did you fail though?