iPhone and iPad Programming

How Codea Lets You Create Your Own iPad Apps

Brad Jones 25-09-2017

Ready to give coding a go? Codea can help.


Creating an iPad app isn’t easy, but it’s certainly not impossible. Everyone has to start somewhere, and there are various apps and services that set out to make your first steps as agreeable as possible.

Codea is one such option. It’s a $15 purchase from the App Store, but it transforms your iPad into a rather capable app creation suite. If you find the idea of coding daunting but you’re eager to give it a go Coding Boot Camp for Beginners: Should You Take One? Comprehensive coding boot camps provide an entry into the coding space. Find out what they are, what you'll learn, and if it's the right fit for your programming journey! Read More , this may well be the answer.

First Steps

When you start a new project in Codea, you’ll see a basic Hello World script. Whether you’re new to coding or just new to the program, it’s worth tinkering with it for a little while.

hello world codea ipad

This is all pretty basic stuff. The setup function is called once, while the draw function is called continuously. This is an important consideration when you come to decide where to place your own code in the script.


Line 5 simply displays Hello World! as text in the console. Meanwhile, line 11 sets the background color, and line 13 sets the width of the stroke we’re going to draw with in a moment, as described in the author’s notes.

color picker codea ipad

Tap the numbers that dictate the background color and you’ll see one of the ways that Codea differs from a standard code editor Visual Studio Code Is the Perfect Text and Scripting Editor for Mac Microsoft's text editor supports myriad languages, and you don't even need to compare it to Xcode, since they serve different needs. Read More . This color picker is an easy way to select the exact shade you want using a touch interface.

Click the play button in the bottom right-hand corner of the interface to run the code.


red background codea ipad

As you can see, there’s not much going on at the moment. But Hello World! is being displayed in the console, and the background has changed to our chosen shade of red. Now that we’re a bit more familiar with the interface, we can start making some bigger changes.

Drawing a Shape

Next, we’re going to draw a circle using code. Use the back arrow in the bottom left hand corner of the screen to return to the script editor. Then, add the following code to the draw function:

ellipse(WIDTH/2, HEIGHT/2, 200)

Let’s unpack that briefly. The ellipse command states that we’re looking to draw a circle. WIDTH/2 and HEIGHT/2 handle its position on the screen — we’re using a shortcut to place it in the dead center by dividing the screen’s total width and height by two. Alternatively, you could just state a numerical reference. Finally, the number 200 stipulates the size we want. The stroke width is already set earlier in the script.


scripting a circle codea ipad

Above, you can see how your script should look. Press the play button on the virtual keyboard to run the code.

circle draw codea ipad

Our circle looks just how it ought to. Feel free to spend a bit of time tweaking our code to see how it changes the outcome. Next, we’re going to make things a little more interactive.


Adding Some Interaction

Now that we’ve drawn a shape, let’s edit our code so that the user can actually do something with it. Just by changing one line of code, we can allow them to interact with the shape via the touchscreen.

We simply need to change line 18 to the following:

ellipse(CurrentTouch.x, CurrentTouch.y, 200)

Which should look like the image below in the script editor.

drag the circle codea ipad

We’re simply saying that the X and Y coordinates of the circle should correspond to wherever the user’s finger is on the touchscreen 10 Projects to Use Your Raspberry Pi Touchscreen Display If you've left your Raspberry Pi touchscreen gathering dust in a drawer, one of these ideas should pique your interest enough to get it out again! Read More . We’re putting this in the draw function, so it’ll update constantly, allowing the user to drag the shape around.

Press the play button, and see whether you can move the circle around successfully.

its alive codea ipad

We’re up and running. We have a very simple app, and we can actually do something with it. The only problem is, it’s not actually all that useful. Next, we’re going to create an app that actually serves some kind of purpose.

Next Steps

The really powerful thing about Codea is that it gives you access to some of the iPad’s most useful features and makes it easy to implement them in your project. We’re going to work with its location services.

For my money, the best curry you can get anywhere is served at the Mosque Kitchen in Edinburgh, Scotland. As such, I often wish I knew exactly how far I would need to travel to eat there. We’re going to code a simple app Learn to Code by Remixing Existing Apps for Free This site lets you create or remix apps, allowing you to be creative without the fear of breaking anything. Read More that gives us that information.

The first thing we need to do is give our app access to location services. To do so, start a new project, and insert this code into the setup function.


Note that we’re putting this in setup rather than draw, because we only need it to run once. We can test whether this is working by running our app, and seeing whether or not we’re asked to give it access to our location.

location permission codea ipad

Next, we’re going to add some code that grabs the distance between the chosen location and the device, and presents that as text. If you want to set up an app that uses a different location, grab the latitude and longitude for that place now.

Then, add the following code into the draw function:

text("You are...", WIDTH/2, 250)
text((location.distanceTo(55.945, -3.185)), WIDTH/2, 200)
text("...meters away from the best curry around.", WIDTH/2, 150)

The first and third lines of this code are just text, again using the screen’s maximum width divided by two to make sure that they’re centered, but using a specific numeric reference so that all three lines of text can be arranged nicely.

The location.distanceTo command just needs the latitude and longitude How Does GPS Tracking Work and What Can You Track With It? GPS. We know it as the technology that guides us from A to B. But GPS is more than that. There is a world of possibility, and we don't want you to miss out. Read More of the desired location. It’ll calculate how far away the iPad is situated, and since we placed it where text would normally go, it’ll display that number on screen.

Let’s press the play button and test out our app.

meters away codea ipad

There we go. It’s simple, but it works. Codea really does make coding for iOS The Fastest Way to Learn Swift Programming on the Move There are many ways to learn the new Swift programming language, but have you thought about learning it on your mobile device? This app makes it really easy and effective. Read More accessible: we’ve just started out, and already we’ve managed to implement touchscreen controls and utilize location services. The sky is the limit for here on out.

Do you have tips on how to get the most out of Codea? Or are you looking for help with a particular project? Either way, why not join the conversation in the comments section below?

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *