Noise, endless scrolling, seamless tiling of images

I’ve been exploring a full screen scrolling noise animation which is a great improvement on the noise demo built into Codea (which can only achieve 30fps with a very blocky animation).

Shader based, it uses (faster) simplex noise, endless scrolling of a pre-built image, and a really cool technique to wrap an image around so it tiles seamlessly (ie without a join). And it runs at 60fps.

I’m not quite finished - it uses a 4D noise function whose results look a little odd.

But I thought I’d share where I’m at. I’ve written a post here, and I have a short video below (or here).

I’m not sharing the code generally just yet, as it is a bit untidy and I’m still playing with it. But if anyone is interested, I’m happy to provide a copy. Just remember it involves shaders, so you need to be familiar with them.

Finally, I’ll just make it clear that while a lot of this stuff is very clever, I created none of it, and I don’t understand the math, which is way over my head.

HI @ignatz,

Just recently returned to Codea, after a long diversion in other ‘stuff’, and decided to wrap up all the loose ends on the code I had written - several small apps. One of which involves a scrolling landscape (needed for the current app I’m trying to sort out now). Looked into Perlin and picked up on Simplex noise but haven’t delved into it too deeply yet. Your ventures here fit into my needs perfectly. So I’ll watch your progress and try to keep pace with it.

I loaded your 2D scrolling landscape demo but couldn’t get the image generated, just a pale blue screen. Is there a delay on the landscape generation? I have a similar routine which generates the landscape instantaneously using Perlin.

Watching with interest.




@Bri_G - try this code:

Which is described here:

Hi @ignatz,

Thanks for the code link - looks like a good way to paste textures onto a landscape. Just a bit ahead at what I’m trying to do at the moment. I have a single width landscape which is not scrollable - drawn in a similar way to your demo with noise and lines. I used noise and fixed variables , like you, to generate a wave-like form which I store in an array. I’m currently drawing each line at the moment on every screen refresh cycle - so I was interested in your drawing to an image and displaying the image as a sprite - which I had planned to move to. Problem is I can’t get that to work on my iPad or with loveCodea on my PC. From my playing with the code the image drawn under setContext has zero size. The benefit of the sprite is that I may be able to incorporate any terrain destruction into the image as a minimal load on the screen refresh cycle.

Once I’ve completed that I intend to double the playing field (~2048 vertical lines) and adjust so that the screen can be infinitely scrolled ie merge height at line with height at line 2048. Initially this will give me an option for random starting point of the terrain on a static 1024 playing field - so I have different terrains with each game. Later I intend to scroll the whole playing field.

Obviously there are other code requirements and I am concentrating on control features at the moment. I’m still readjusting to Codea at the moment so progress is slow.

Thanks for the quick reply - noted your first post was at 3:36 am which, if you are on a similar longitude to me, means that you don’t sleep much or you work nights!!!

Thanks again for the help. I’ll post code when I feel I’m making progress and the code is clean and easy to read.

Oh, please check your code for the demo - from what I’ve seen of it there should be a nice landscape generated. But all I get is the pale blue background screen.



@Bri_G - I’m in Perth, Australia, so different timezone

The demo works fine for me. I’m not sure what the problem could be, if you’re not seeing an error. Perhaps try with a different sprite.

btw, what I’ve sent you is simply a flat tiled image. I have separately created terrain using the diamond square algorithm, as shown here (skip to the middle for closeups of the terrain)

This terrain is created with a mesh, and textured using the tiling shader shown in the demo.

You might also be interested in creating a realistic 360 degree wraparound sky like this

I look forward to seeing your progress.

@Bri_G - one more thought. Rendering such a large terrain is going to hurt performance. Something you might consider is using mist to cut down the visible terrain and ease the processing strain. It looks really nice, too, to see landscapes emerge from mist…

I have a shader for this, and when its lighting is reversed, it gives you night with a light centred on your player, ie two effects in one.

Hi @ignatz,

Thanks for the reply - your lander demo is very impressive now - the close up at the end really shows the detail. I assume the lander module is a rendered 3D object.
Although, in the initial stages you can see the pattern repetition.

The mist sounds like a good idea - will try once I’ve got past the basics. I’ve also used the scrolling panorama code with a space image. One of my other loose ends that I need to wrap up.

Got the loveCodea image to work with the sprite - needed to change the spriteMode to CORNERS to see my sprite - but it didn’t work in your code. Funnily enough the loveCodea FPS dropped dramatically when I used the sprite option - think it must be an artifact of trying to apply the wrapper code on a PC.

Hoping to bottom this soon.



@Bri_G - this is what the mist looks like. The trees are billboarded (ie 2D drawings that rotate to always face the player).

the lander module is a full 3D object. I found it on the net, converted it to obj format with Blender, and wrote a Codea function that imports any obj file and translates it into a mesh. Below is my favourite model, a spitfire (it also shows the effect of using a wraparound skydome).

Just ask if you want any code.