### From Correlation to Causation through stories and math

Correlation and causation are two concepts that people often mixup in their minds. I must admit that I myself have been guilty about this, and it unlikely that I would ever entirely grow out of it as it is wired deeply into our psychology. Let me use this article to briefly emphasise what the concepts of correlation and causation means, some interesting stories that have emerged from people misunderstanding these concepts and an algorithm that attempts to find causal relationship using correlation information. Here is a story that I heard a professor of mine, Prof. Dr. Ernst-Jan Camiel Wit, tell us during a lecture. There was a school that was involved in a study to see if providing free mid-day meals to students, which they could choose to be subscribed to this or not. At the end of the study, both the students who subscribed to it and did not where tested for different health indicators. It was observed that the students who chose to have meals from the programme had poorer health

### da Vinci of the 21st Century

According to many sources, Leonardo Da Vinci is known for hiding secret codes and messages in his art work. In the modern era, digital canvases and images have a greater role to play.

An image of width w and height h contains x h pixels. Changing the RGB values by a small value would not be detectable to naked eye. In this blog post, let me show you how to encrypt and decrypt messages using this principle. We'll do both encryption and decryption using JavaScript.

To get started with, I downloaded a very nice picture of Mona Lisa from Wikipedia (. I also created an image with black text in a white background, which I shall not show here (message.jpg).

Next, I setup a good HTML platform to run back to back JavaScript commands, which would automatically load all the images I need. To avoid CORS issue, I have been running a SimpleHTTPServer to open up the webpage.

<html>
<body>
<img src="725px-Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg" id="original" style="display: none"/>
<img src="message.jpg" id="message" style="display: none" />
<img src="encryptedTextHere.jpg" id="encrypted" style="display: none" />
<canvas id="myCanvas" width="725" height="1080" style="border:1px solid #d3d3d3;">

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

</script>
</body>
</html>

Note that encryptedTextHere.jpg does not exist as of now, but that can be ignored. That is the location where I intent to save the encrypted file.

#### Encrypting

Now that the platform is up, let's open the Chrome Developer Console (press CTRL+Shift+J and click on Console tab). Let us read both the images into canvas image data arrays. Then, in the original Mona Lisa image, wherever the pixels matches with the message image, let us increment the RGB pixels by 1 value. Ignore all the white spaces. The following code takes care of that.

var original = document.getElementById("original");
var message = document.getElementById("message");
ctx.drawImage(original, 0, 0);
var originalArray = ctx.getImageData(0, 0, c.width, c.height);
ctx.drawImage(message, 0, 0);
var messageArray = ctx.getImageData(0, 0, c.width, c.height);
for(var i=0;i<originalArray.data.length;i+=4){
if(messageArray.data[i] + messageArray.data[i+1] + messageArray.data[i+2] + messageArray.data[i+3] !== 255*4){ // ignoring white
originalArray.data[i] += 1;
originalArray.data[i+1] += 1;
originalArray.data[i+2] += 1;
}
}
ctx.putImageData(originalArray, 0, 0);
Once the image is drawn, save the image as encryptedTextHere.jpg. You have succesfully encrypted your message into the image. If you observe the image, it is hard (or impossible) to say what message is encrypted with your naked eye.

#### Decrypting

Both the original image and the encrypted image are required to find the hidden text. Since we just added a pixel at every point where there is a corresponding pixel in the message image existed, we could simply reverse the process to get some value at the pixels where the message existed. To get a better clarity, multiply that with a value of 100. The following code does the same. Leave every fourth pixel (opacity) at the maximum value of 255.

var original = document.getElementById("original");
var encrypted = document.getElementById("encrypted");
ctx.drawImage(original, 0, 0);
var originalArray = ctx.getImageData(0, 0, c.width, c.height);
ctx.drawImage(encrypted, 0, 0);
var encryptedArray = ctx.getImageData(0, 0, c.width, c.height);
for(var i=0;i<originalArray.data.length;i++){
encryptedArray.data[i] = (encryptedArray.data[i] - originalArray.data[i]) * 100;
if((i+1)%4 === 0) // transparency part
encryptedArray.data[i] = 255;
}
ctx.putImageData(encryptedArray, 0, 0);
You now have a pretty neat tool in your hand to encrypt and decrpy messages. You may tweak the technique a bit to store encrypted data in the way you desire. Some things are best kept secrets. Cheers!