Skip to main content

Posts

Showing posts from October, 2014

Working on canvas: Hit-testing circles (HTML and JavaScript)

In the previous working on canvas post, I explored creating and hit-testing rectangles using the canvas object and JavaScript. This time I'm going to add circles.



Click on the above shapes, get really close to the edges. See if you can catch the hit-test out.
Step 1: Circle drawing function First of all it is necessary to add a circle drawing function to the code. function drawCircle(x,y,r,color) { context.beginPath(); // begins new path context.arc(x,y,r,0,2*Math.PI); context.fillStyle=color; context.fill(); // use of fill autocloses a path } Step 2: Expand switch statement Next it is necessary to extend the switch statement for the circle:
// draw object based on type switch(objType) { case "rectangle": drawRect(objDimensions[0],objDimensions[1],objDimensions[2],objDimensions[3],color); break; case "circle": drawCircle(objDimensions[0],objDimensions[1],objDimensions[2],color); break; default: console.log("undefined"); } Step 3: Hit-test extended The …

Working on canvas: Hit-testing with JavaScript and HTML5

Objects drawn on a HTML canvas have a spec for implementing hit regions but unfortunately current browsers do not support this feature. There is also no way to add listeners, or include "onclick" events and so on, to objects drawn on a canvas in current browsers. This means that when drawn objects are interacted with by the user, the only information we have is the event data for the canvas itself.

Fortunately this event data provides us with the ability to retrieve co-ordinates, either relative to the current scroll position, the screen or the webpage, which in turn enables us to work out if an object within the canvas has been clicked on.

Note: see here for a list of event properties on the Mozilla developer site.
Step 1: Stay Organised In order to identify if an object is clicked on, it is important that there is a way for us to know where an object is positioned. It makes most sense if this information is stored at creation time. We need the information to create the ob…

A year of thinking in circles: 2015 (Xcode 6.1)

Theory There's no way around it, next year is going to be all about thinking in terms of time. The Apple Watch and the accompanying WatchKit that is soon to be released to developers will bring with it new ways of visualising and portraying time. And although the watch itself isn't round, the circular aesthetic is tightly linked to our ideas of what a watch is. Hence the Apple Watch interface has its fair share of circles. These not only fulfil the requirement of watchness but also provide a sense of space around objects and icons that are close together.

As with every Apple product, it will likely be the case that this circular aesthetic will spread far and wide. Already circular visualisations of data are popular and I expect to see more and more of the things we see and do becoming circular. Given this, it is time to start thinking about working with circles.

The opportunities for scaling and rotating circles are vast. As we've seen from early demonstrations of the App…

Bytes for Beginners: XOR encryption and decryption (interactive example)

Two-way encryption Following a request on Twitter, I was persuaded to extend the recent XOR and Unicode posts to provide an example of XOR encryption. This is a two-way process, where given a cipher (or encryption key) a piece of text can be encrypted and decrypted quite simply.

@sketchyTech It would be interesting to see your text encoding explanation combined with XOR to demonstrate a simple cypher text in Swift.
— Chromophore (@ChromophoreApp) October 17, 2014
To encrypt a string it is necessary to simply XOR (^) the array of bytes that represent it. And the only step required to decrypt an encoded string of bytes is to repeat the exact same XOR (with the cipher) as was carried out with the original string.
Interactive example Enter text here (limit 8 char.) Bytes (decimal)00000000 Enter cipher text here (limit 8 char.)
Bytes (decimal)00000000
Encrypt



Decrypt
What you see following encryption is an array of bytes in the text box. This is the XOR result of the byte representation of y…

Bytes for Beginners (Part V.iv): XOR (^)

Swift Advanced Operators No iPad Pro today, so I decided to cheer you all up with a third bytes for beginners post instead. Hopefully it will keep you occupied while you wait for Yosemite to appear in your updates on the App Store.
XOR (^) In this example, the blue and green rows are independent of one another while the grey row is the resulting XOR. A XOR is an 'exclusive' OR, or to put it simply an OR that returns a 0 bit where both numbers have either a 0 or a 1 in the same position as one another. But returns a 1 if only one of the numbers contains a 1 in that bit position. This is demonstrated in the interactive example below.

0b00000000Val0000000000b11111111Val1286432168421255 Result0b11111111Val1286432168421255
You can change the numbers by clicking on the blue or green squares. The blue and green rows display 8-bit binary numbers. The grey row is the resulting XOR.
What's next? Bit shifting coming soon.

Bytes for Beginners (Part V.iii): OR (|)

Swift Advanced Operators Hot on the heels of the last bytes for beginners post on AND (&), here's OR (|).
OR (|) In this example, the blue and green rows are independent of one another while the grey row shows the result of an OR between the two. In Swift an OR is achieved with the infix operator | placed between two integers. The result is that a bit set to 1 in either number sets the bit to 1 in the resulting number.

0b00000000Val0000000000b11111111Val1286432168421255 Result0b11111111Val1286432168421255
You can change the numbers by clicking on the blue or green squares. The blue and green rows display 8-bit binary numbers. The grey row shows the result.
What's next? Once again, as I write the JavaScript for further advanced operator examples, I'll post them. But most likely not again today. Two in one day is quite enough! And besides I don't want to interrupt the Apple special event.

Bytes for Beginners (Part V.ii): AND (&)

Swift Advanced Operators It's been a while, but in the last Bytes for Beginners post I explored the NOT (~) operator and promised to continue creating bitwise operator examples in order to explain them in an interactive way.

Apologies for the delay, but better late than never here's the next one in the series.
AND (&) In this example, the blue and green rows work independently of one another while the grey row is the AND result of the two. This means that if both binary numbers have a position set to 1 then the result will also have that bit set to 1. Otherwise it will be 0. In Swift an AND is achieved with the infix operator & placed between integers of a length of between 8 and 64 bits in length.

0b00000000Val0000000000b11111111Val1286432168421255 Result0b00000000Val000000000
You can change the numbers by clicking on the blue or green squares. The blue and green rows display 8-bit binary numbers. The grey squares show the result.
What's next? Hopefully there won&…

Becoming less afraid of unsafe mutable pointers in Swift (Xcode 6.0.1)

UnsafeMutablePointer: Before we begin This post follows earlier posts on the same subject. Those posts were written when I first became acquainted with the UnsafeMutablePointer type. But the rules remain that you shouldn't become entangled with pointers unless you need to become entangled. At the same time don't be afraid of them, because blocking out their existence in your head isn't a wise thing to do either.
There follows some code snippets and an overview of how the UnsafeMutablePointer type might, might not, and in some cases almost definitely should not, be used.

Note: If you're unfamiliar with the concepts of memory allocation and memory addresses, then it might be wise to also seek out some information about this topic to make what is written easier to understand. UnsafeMutablePointer: The basics Let's recap the basics first of all. We'll allocate memory, initialise the memory with a value, access that stored value and then change the value. Finally, …

Downloading webpages with all linked subfolders and files in OS X 10.9 (Mavericks)

Scenario: you've found a really good article but it's spread across numerous webpages. The website looks a bit neglected. You're not sure it's going to exist forever. But you'd like to be able to access this article and to be able to refer to it for the foreseeable future.

Solution: download the article and its linked pages.
Warning As ever, I take no responsibility for outside websites, or what installing software in the way described by these sites might do to your system. The risk is all yours!
All I can write is that these are steps that I've followed myself and they worked without any visible damage. Step 1: Install wget If you have wget installed already, you're good to go, if not then follow this link to install the software. (If you're not sure then attempting Step 2, you'll find out if the program is missing and will be able to return to this first step.)

The official wget site is here if you want to look at it more closely.

Note: this blo…

Swift by Numbers: The long and the short of it (Xcode 6.0.1)

In everyday life we take numbers for granted, we can write a number of any length we like. It's just a case of putting one digit from 0 to 9 after another. And sure we can do this in a computer program using a string but if we want the device to process that number then we must remain within its boundaries of understanding.

As a practical example:
Open the Calculator App on OS XPress Command + 2 (or go to the menu bar and select View->Scientific)Now hold down a single number (not zero!) and watch what happens after a while You should see that zeroes start appearing. This is because the number has gone beyond what the computer can handle.
Objective-C vs Swift  In Objective-C it was possible to use primitive C data types. These included: short, int, long and long long. In addition to their unsigned versions. These are now gone. Yes, CShort, CInt, CLong, CLongLong, etc. exist but these are simply type aliases of Int16, Int32, Int, Int64 and so on: this means they are interchangeab…

Playing with the Primitives: Characters, chars and strings in Swift and Objective-C (Xcode 6.1)

Going on a Swift safari The purpose of this post is not to explain the C data type named char but instead to make some observations. These observations may be of no use or interest to you, or they may be of great interest. I merely report them here as a way of recording my findings on a recent safari into the Swift language. char and CChar In the Objective-C documentation Apple describes char as follows: "The term C string refers to the standard char * type."  It can be assigned a character or even a string of characters.
char *cc = "xcdewd"; NSString *cd = [NSString stringWithCString:cc encoding:NSUTF8StringEncoding]; NSLog(@"%@",cd); Whereas in Swift we cannot use char as a type at all. Instead we use Swift's equivalent type CChar. A CChar can only be assigned a single Int8 (of which it is a typealias), so we must write:
var char:[CChar] = [97,98,99] String.fromCString(&char) // "abc" (optional string) String(UTF8String: &char) …

Understanding UTF-8, UTF-16, Endianness and the BOM (Byte Order Mark)

There is a difference between understanding something and being able to explain it. However, I was challenged to explain my knowledge and so I will attempt to do so. So let's start with unsigned integers, bits and bytes.

@sketchyTech blog post? ;)
— masters3d (@masters3d) October 7, 2014 I'm sure that you will be familiar with a computer or device being described as 64-bit or 32-bit. And before 32-bit we had 16-bit computers and before that, in the days of the Commodore-64, computers were 8-bit. But aside from indicating the power and sophistication of these machines what did these numbers really mean?

In an 8-bit machine each unit of data (or to give it a more exact name a word) is 8 bits long. And bits are those zeroes and ones so familiar to us from popular portrayals of machine code. For example, this is a binary number that is 8-bits long: 00000000. It can be written in decimal terms as 0 and in hexadecimal as 0. This is another 8-bit long number: 11111111. It can be wri…