HTML Canvas Games from Scratch #2

Reading Time: 7 minutes

Hey folks!🎮
So in the previous post I tried to lay a foundation to start understanding canvas. I hope that by now you are a bit comfortable with it. So in the previous post we saw:

  • File structure and boilerplate📁
  • Some important javascript functions for drawing✏️
  • Defining a particle and drawing it on the canvas (hope you remember atom😉)
  • requestAnimationFrame()🔄
  • One and two dimensional uniform motion of the particle🏃
  • Gaining control over the Math.random() function🎲

Phase 2

Till now we were have worked with one particle, but that’s not how games are right? At least most of them. Handling multiple particles is not as tough as you might think. Let’s see how its done!
First of all, will the object definition of the particle change?
Well, it depends on the properties of these particles.
(We will see this later on)

Let us continue with the same particle definition that we previously used:

var particle = function(x,y,radius){
   this.x = x;
   this.y = y;
   this.radius = radius;

Now instead of defining one particle, let us define an array of particles:

var particleArray = new Array();

Let us now define 50 particles with random positions on the screen. But what are the dimensions of the screen?
We already have :

  • window.innerWidth
  • window.innerHeight

So the coordinates of the screen will be in the range:

  • X : 0 – window.innerWidth
  • Y : 0 – window.innerHeight

So the code goes like this :

var totalParticles = 50;         //number of particles 
var maxRadius = 30;               //maximum value of radius   
var particle = function(x,y,radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
var particleArray = new Array(); //array of particles        
var i;                          //loop variable 
for(i = 0 ; i < totalParticles ; i++) {
    //Defining properties of the particle
    var xcoord = Math.random()*window.innerWidth;
    var ycoord = Math.random()*window.innerHeight;
    var rad = Math.random()*maxRadius;
    //New particle with above properties
    var tempParticle = new particle(xcoord,ycoord,rad);
    //Push tempParticle into the array

I’ve tried to keep the code readable and obvious. Just read it and you should understand what is happening.
What’s left? Let us draw these particles on the canvas!
Just add the following code :

c.fillStyle = 'aqua';
//Drawing the particles
for(i = 0 ; i < totalParticles ; i++ ){
    c.arc(particleArray[i].x,particleArray[i].y,particleArray[i].radius,0, Math.PI*2,false);


HTML Canvas Games from Scratch #2

Here’s the source code : Code link
Location in repository : \Phase 2\ParticleArray

Note : On refreshing the page you will find a new configuration everytime.
Also we haven’t used the requestAnimationFrame() function as we just wanted static particles as of now.

What next? Let us give all the particles some random velocities🚀.
We need to add two properties for the particle object “x velocity” and “y velocity“:

var particle = function(x,y,vx,vy,radius){
this.x = x;
this.y = y;
this.vx = vx;              //x vel
this.vy = vy;              //y vel
this.radius = radius;

Now since we have added new properties for this object, we must also define its values for all the defined instances.

Wait, did I just go too hard on you?😝

Ok let me reframe that:
Since we added two new properties to the particle object, we also need to give the value of these properties for all the particles that are stored in the array.
So inside the for loop in which we are defining and adding particles to the array :

    var xvel = Math.random()*6 - 3;
    var yvel = Math.random()*6 - 3;
    var tempParticle = new particle(xcoord,ycoord,xvel,yvel,rad);

Try figuring out the range of (xvel, yvel).

Now we are ready with particles and their velocities. Lets start drawing them on the canvas. This time we will use requestAnimationFrame():

c.fillStyle = 'aqua';        //define fillStyle
function draw(){
    //Clears the entire canvas
    //Update the value of the coordinates (according to velocity)
    for(i = 0 ; i < totalParticles ; i++ ){
        particleArray[i].x += particleArray[i].vx;
        particleArray[i].y += particleArray[i].vy;
    //Drawing the particles
    for(i = 0 ; i < totalParticles ; i++ ){
        c.arc(particleArray[i].x,particleArray[i].y,particleArray[i].radius,0, Math.PI*2,false);

Result :

HTML Canvas Games from Scratch #2

Here’s the source code : Code link

Location in repository : \Phase 2\ParticleArrayMoving

It must be noted that the particles will soon disappear leaving a black screen. The reason being that the canvas extends infinitely, we just get to see a part which our window can capture.
To confine the particles to our window, we must make the window act as a box 🔳. Particles must collide and bounce back inside like this:

HTML Canvas Games from Scratch #2

These conditions are to be taken care of every time before drawing the particles. Let us code them:

//Checking for collison with walls
for(i = 0 ; i < totalParticles ; i++ ){
        if(particleArray[i].x > window.innerWidth || particleArray[i].x < 0)
        if(particleArray[i].y > window.innerHeight || particleArray[i].y < 0)

Result :

HTML Canvas Games from Scratch #2

Here’s the source code : Code link
Location in repository : \Phase 2\ParticleArrayMovingCollisions

Notice the particles bouncing off the edges.

Practice Sesh💻 : You can try giving a different color to all the particles. You can also try to making all the particles twinkle/shimmer✨, by changing its opacity (the ‘a‘ in rgba).

Solutions to these : Link to code

Location in repository : \Phase 2\Practice Sesh

Interacting with the canvas:

Yes, chill❄️. It is possible. Obviously. Who would call it a game otherwise?
Let us talk about the addEventListener() method. As the name suggests, it simple listens to events. Events in this case are keyboard inputs, mouse clicks , changes in mouse movements etc.



Event : An event is nothing but a trigger. It is used to execute a coded response. Eg : click , onmousedown , onkeypress , onkeyup etc. (Know more..)
Function: This is the function that is to be called when that specific event occurs. It is defined somewhere in the code.
useCapture : This is either true or false. It is optional. It is used to define whether the event should be executed in the Bubbling or Capturing phase (it is not important right now, though you can read more here). By default it is false.

Lets start with the most basic event and response :
For this you will need the javascript code where we had just 1 static particle.(try to write this code yourself once)
Source code : Code link
Location in repository : \Phase 1\Atom Particle
Just remove the line of code used to increment the speed. Thus getting us a static particle.
Now let us add a simple mouse click event : (append this snippet at the end of the code.js file)

window.addEventListener("click", move , false); //define event listener
function move(e)            //response function                                              
    atom.x = e.x;            //update x coordinate of atom        
    atom.y = e.y;            //update y coordinate of atom

What is ‘e’ ?
e here represents the event, and the event here is click. It must be passed as a parameter to the function.
Every event has specific properties. For this click event, we have properties x and y which represent the coordinates of the cursor on clicking.

Coming back to the code, the function replaces coordinates of atom with the coordinates of the cursor. Thus moving it to the click position.
Check it out yourself.
Source code : Code link
Location in repository : \Phase 2\ParticleCanvasInteraction

Similarly, let us make atom move left , right, up and down with the arrow keys.
So this is what we need :

  • On pushing down an arrow key the particle should move.
  • On releasing the key the particle should stop its movement.

We will use the keydown and keyup events.
This even has a specific property called keyCode. Every key on the keyboard has a different keyCode. The keyCode values of arrow keys are :

  • Left : 37
  • Up : 38
  • Right : 39
  • Down : 40

Let us define a boolean array called “keys” which will hold true for all those keyCodes which are pressed.
Also we will need two event listeners, one that will check for keys pressed and the other that will check for keys released.

var keys = [];
window.addEventListener("keydown",keyPressed,false); //keydown listener
window.addEventListener("keyup",keyReleased,false);      //keyup listener
function keyPressed(e){             //sets value true when key pressed 
    keys[e.keyCode] = true;
function keyReleased(e){            //sets value false when key released
    keys[e.keyCode] = false;

Its not done yet. We need to make required adjustments in the draw() function, the effect of key presses on the coordinates :

function draw(){
    if(keys[37])                //if left is true
        atom.x-=xspeed;         //move left by xspeed
    else if(keys[39])         //else if right is true
        atom.x+=xspeed;         //move right by xspeed
    if(keys[38])                //if up is true
        atom.y-=yspeed;         //move up by yspeed
    else if(keys[40])         //else if down is true
        atom.y+=yspeed;         //move down by yspeed

Note : These are grouped this way because Up and Down cannot function together, and Left and Right cannot function together.

Also don’t forget to define xspeed and yspeed outside the draw function.

Result :
HTML Canvas Games from Scratch #2
Source code : Code link
Location in repository : \Phase2\ParticleCanvasInteractionKeyboard

Now its your turn to play around with a few more such events.

Other things you can try :

  • Bound the motion of this particle to the box
  • Comment out the clearRect() function and see the output
  • Use the fillRect() function with black colour but opacity less than 1, instead of clearRect(). (Will give a nice trail effect)

This is all for this post. Till here I have covered everything it takes to create the game that I made. Now all we have to do is combine all this logic in one file ❗
In my opinion you may also start creating the game yourself, or try making some other game maybe ping-pong, flappy bird, snakes etc.

Do leave comments/suggestions (if any).

Written by : Jay Rathod💻
Links : Portfolio | Github | Codepen | Linkedin | Instagram

HTML Canvas Games from Scratch #1

Reading Time: 7 minutes

Hey there! This is my first blog about HTML Canvas Game Dev video_game.
There are a lot of other tools and libraries available for game dev which are easier to use, but canvas remains my favorite as it takes us to the root of how to code game physics. It is also a great way for beginners to get a good grip on Javascript (speaking from experience).
Thanks to my friend Ronik Gandhi <@rawnix> for introducing me with canvas.

At the end of this series you will be able to build a basic 2D game on your own.

In this series I will walk you through the steps to build a classic Space Invaderspace_invader game which I named SPACE-X.

It will look like this.

Do star star my repo ( if you liked the game.

Let's get started rocket

[Note: We will be creating games for pc only. They won't be responsive.]

Basic Files and Boilerplate

┣ 📂assets
┃ ┣ 📂Images
┃ ┗ 📂audio
┣ 📜index.html
┗ 📜code.js

Get these folders and files ready. As of now we won't be using any assets, we will instead use javascript functions to create shapes.

This game without any images can be played [here]

The index.html file will look something like :

<!DOCTYPE html>
<canvas id="canvas" style="background-color: black"></canvas>
<script type="text/javascript" src="code.js"></script>

This index.html file consists of a canvas tag which is present inside the body tag.
There will be no more changes to this. Rest of the coding will be done in the code.js file.
The code.js file is linked after the closing body tag.

The code.js file will look something like:

var canvas = document.querySelector('#canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;  
  • The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
  • The getContext() method returns an object that provides methods and properties to draw on the canvas. In this case since '2d' is mentioned, we can draw text, lines, rectangles, circles etc.
  • Next we set the height and width of the canvas equal to the device window's height and width device (this can be changed according to your preference).

Now we are all set to begin coding the game!

Clone/Download this repository before beginning for all the source code.

Phase 1

In this phase we will be working with particles and particle physics.
It is important to keep this in mind that the coordinate system of the canvas is laid down such that the origin is at top left corner of the screen :

Before getting your hands dirty, these are some important methods you should be familiar with to draw on a canvas:

c.clearRect(x1,y1,x2,y2); //clears the canvas inside this rectangular area  
c.beginPath(); //Used to begin drawing a shape  
c.closePath(); //Used to finish drawing a shape  
c.fillStyle = 'red'; //Defines color to be filled in the shapes  
c.fillStyle = '#ffffff'; //rgb,rgba and hex formats are also allowed  
c.fillStyle = 'rgb(12,243,32)';
c.fillStyle = 'rgba(233,12,32,0.4)';//'a' is used to define opacity  
c.fill(); //Fills color  
c.strokeStyle = 'red'; ` //Defines stroke color (rgb,rgba,hex)  
c.stroke(); //Strokes the boundary or the figure  
c.font = "50px Calibri"; //Defines font properties of text  
c.fillText("text" , x, y); //Writes text,top left of text is at (x,y)  
c.arc(centerx,centery,radius, //Creates an arc with given properties  
start angle in radian ,
ending angle in rad ,
counterclockwise true or false);
c.moveTo(x,y); //Moves context cursor to (x,y)  
c.lineTo(x,y); //Draws line from current context cursor coordinate to (x,y)  

NOTE : It is better to use beginPath() and closePath() separately for each connected figure.

A few sample code snippets: Code Link

Location in repository: \Phase 1\Sample Code

Try playing around with the code a little to get a better understanding of the working.
Also it takes time to get used to the syntax of these functions, so hands-on practice is the only solution.

Now let us try to code a particle in canvas.
Consider a particle object in a two dimensional plane. It will have properties:

  • X Coordinate
  • Y Coordinate
  • Radius

It is considered that the particle is a circle.
This is how we can represent the same in javascript :

var particle = function(x,y,radius){
this.x = x;
this.y = y;
this.radius = radius;
//'this' refers to the owner object, i.e. an instance of particle  

The above code defines an object type which is like a datatype , specifically it is a user-defined datatype. That means, now we can create variables of this type.
Lets create one named "atom".

var atom = new particle(100,100,30);  

This line creates a particle which can be referred with the variable "atom". It has the coordinates (100,100) and its radius is 50, but we still cannot see it on the canvas.

Note : All quantities are to be considered in 'pixels'.

Let us bring it to life by drawing it.

c.fillStyle = 'aqua';
c.arc(atom.x,atom.y,atom.radius,0, Math.PI*2,false);

It is now drawn on the canvas. But now what if you want to set it in motion let us say to the right ?
You need a continuous loop in which:

  • Canvas is cleared
  • X coordinate of atom is incremented
  • Atom is re-rendered on the canvas

The continuous loop is generated using the requestAnimationFrame() method.
The requestAnimationFrame() method calls the function, which is passed as a parameter, 60 times in one second. So now, we need a function for repetitive calling. Let us call this function 'draw' :

var xspeed = 1; //Define x direction speed  
function draw(){
//Clears the entire canvas  
//Update x coordinate  
atom.x += speed;
//Drawing the particle  
c.fillStyle = 'aqua';
c.arc(atom.x,atom.y,atom.radius,0, Math.PI*2,false);
requestAnimationFrame(draw); //Called inside the function  
draw(); //Initial function call  

Result : In every consecutive function call, x coordinate of atom is incremented by the value of xspeed variable. To increase the speed, increase the value of xspeed.
Here is the source code : Code link

Location in repository : \Phase 1\Atom Particle

Similarly if you introduce a variable yspeed, which updates the y coordinate of atom, it will lead to a uniform straight line motion in the 2d plane.

var yspeed = 2;
function draw(){
atom.y += yspeed;


Javascript Math.random() function :

This deserves a separate section as it is very important to understand the working of the random function and how to control it. This function will be used very often in games for example:

  • To spawn new enemies at random locations
  • To spawn random powerups at random locations
  • To give random moving directions to objects etc.


var x = Math.random();  

x gets assigned a random float value between 0 and 1 .

Note: value is inclusive of 0 but not 1.

Few outputs of the random function:

  • 0.1882848343757757
  • 0.3605824495503056
  • 0.04217502958085739

How to get a random number between 0 and 1000?

var x = Math.random()*1000;  

This still gives a float value. For integer values:

var x = Math.ceil(Math.random()*1000);
//Output: integer between 0 to 1000 both inclusive  

Math.ceil() function rounds a number up to the next largest whole number or integer.
There is another function called Math.floor() which returns the largest integer less than or equal to a given number.

Note : Lower bound is still 0.

How to get a random number between 500 and 1000?

var x = Math.ceil(Math.random()*500) + 500;  

Here initially Math.ceil(Math.random()*500) function returns values between {0,500} , thus on adding 500 to this range we get the new range {500,1000}.

How to get a negative range lets say -250 to 350?

var x = Math.ceil(Math.random()*500) - 250;  

If you aren't able to figure out how, try finding individual outputs of all the functions in the code one at a time.

This is all for this blog, in the next blog we shall see:

  • How to handle multiple particles
  • Random function in action
  • Collisions
  • Controlling the objects through user input

Written by : Jay Rathodcomputer
Links : Portfolio | GitHub | Codepen | LinkedIn | Instagram

Day19 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 4 minutes

author: aman

Blog VII - Part I - Day 19

So, towards an end of this series.

I was quite busy in some other blog so couldn't write this one quickly.

In this blog I'll take up a case of a Security tool used in Ethereum Smart Contract bug discovery, ECHIDNA. I'll try to unwrap a few things about how a security can be used to analyse a "script", that governs the business of an organistion over Blockchain network. I'll try to cover almost everything taught last time in these 2 upcoming micro-blogs.

Let's take a look what's coming up...

In this micro-blog

  • One thing you can't believe in...
  • Fuzzer
  • Echidna
  • the Trail
One thing you can't believe in...

You might be having this strong image of BLOCKCHAIN, that a fraudulent transaction in a Blockchain cannot be reversed. Well...what is I say, it is actually inaccurate.

One of the famous article in MIT Technology Review, by Mike Orcutt, titled as "Once hailed as unhackable, blockchains are now getting hacked", stated the following:

"Blockchains are particularly attractive to thieves because fraudulent transactions can’t be reversed as they can be in the traditional financial system."

The statement is actually inaccurate!

Ethereum classic is an example to it. Remember, I've told you people before about the famous DAO attack. The had a massive $50 million money heist. Well the attacker is still a mystery.

The funds stuck until July 14, 2016. See the article. The possibility of attack was due to a vulnerable smart contract, that governs the functioning of DAO.

This was the problem until the Ethereum Chain was forked, after a long debate among the community. The transaction was rewritten in the new chain and now there exists 2 ethereum chain. One, that we use now, and where the DAO attack never happened. The other one, Ethereum Classic, where the DAO attack happened.

This is a note published by Vitalik Buterin, the founder of Ethereum Blockchain.

Strange!! yeah...?

Lets try to know about something which is used as a help to "not" get into such troubles...


Prevention is better than cure! Since, every crucial thing from a developer side depends on how well the contracts are written. If the contract does not release any possibility of attack, any loopholes of information leakage, the contract is probably secure.

Just like normal computer programs, there exists this old and always alive Computer Science (we may call it fundamental though). Analysing the programs statically and in dynamic environments to detect the bugs that can be triggered or are automatically getting triggered.

There are several techniques to anlayse a program. Symbolic analysis, Dynamic Analysis, Model Checking, Fuzzing...

There had been a lot of Security Tools in development recently. Here is a sophisticated list of all, in the official listings of

I will talk a bit about the only fuzzer system available for Smart Contract Analysis, by an Argentanian company TrailofBits. The tool is known as ECHIDNA.

Bonus excerpt(link)


day19_01 **pretty logo! isn't it?

ECHIDNA, is a property-based fuzzer system available for generating malicious inputs and break the smart contracts. It means, we write a certain property(like the one a system should "always" follow, or should "never" follow), and the system runs it on a local virtual machine, which is inbuilt with the tool. The system starts fuzzing. i.e. inputting the contract with random inputs, to check where the system fails the written property. These inputs are determined by input generation techniques, which are certainly in "possible limits" tha EVM can handle, and are not that arbitrary.

The tool is written in HASKELL, which is a FUNCTIONAL PROGRAMMING LANGUAGES, which you probably have never heard about. This means the code is short and does a lot. To give a intuitive brief, the Functional programming language are actually concerned about "What the thing is?" rather than "How the thing works?". Most of the SAT/SMT solvers, that I have talked about before are built over functional programming languages.

How ECHIDNA works? from user's point of view You write a smart contract with certain invariants(the property you think should never change and the smart contract should always follow). Then you run that within the system.

the Trail

After discussing all this... you must have got a great idea about what is actually going out around the world.

The next blog will be a very special Connect the dots... thing. Will have no technical knowledge.

I will just cover the things I & the 2 guests Kaushik & Gaurav has compiled for you people.

Will finally unveil the "The Road Not TAKEN..."


Day18 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 5 minutes

Hey guys, in this Blog I will be discussing the Integration of Blockchain with IoT (Internet of Things).

So, let’s proceed with what IoT actually is.

What is Iot?

Internet of things is an environment of connected physical devices embedded in various systems and accessible on the Internet, thus rendering these devices to become autonomous and can be controlled through their digital representation. The whole idea behind IoT is based on the transfer of data between two physical devices connected over a network and thus based on these data they act, like simulating the temperature of a house as in the case of smart homes, saving your attendance in a database as in for RFID.

Some of the industries and technologies developed on IoT includes smart homes, automotive environment, Healthcare, smart cities, smart grids, smartwatches, banking sector, etc.

perks of iot:

If technology is being used in multiple industries, it is a bit obvious that it should have some edge over the rest. The benefits of IoT are:

  • Communication: As discussed, it enables Machine-to-Machine(M2M) communication over the network on which both of them are connected.
  • Automation with control: Devices are controlled over a centralized wireless infrastructure, thus enhancing automation. This brings out an efficient communication between the devices, leading to output at a greater speed.
  • Monitoring over Information: The amount of data we receive through these IoT devices is enormous and hence it can be used to monitor the efficiency of these devices as well as take the algorithmic decisions more effectively due to this huge dataset.
  • Saves Money: Optimum usage of energy and resources with proper surveillance helps in avoiding possible shutdowns (as in industries), damages or waste of resources.

Thus, the price paid for implementing these IoT devices is very minimal when compared to the benefits it provides.

problems in iot:

“With a great amount of data comes out a greater responsibility to process it safely”.

The IoT network is a centralized one and also contains a large number of devices and involves the application of a huge set of data points, which requires security. This not only expands the attack surface, and hence IoT security and IoT privacy are huge concerns.

A case of such an IoT attack that took place in 2016, in this Mirai (a Botnet) penetrated in the domain name service provider Dyn and performed a DDoS (Denial of Service Attack) for a huge period, as a result, a large number of websites were down. It was achieved as the attackers gained access to this centralized network through the poorly connected IoT devices.

With such a huge vulnerability, it becomes non-practical to implement IoT in industries, Healthcare, or Banking sector where data security and privacy is a major concern. Also, the network is centralized hence the manufacturer, who is the most probable administrator to this can gain access to data. Hacker just has to find one vulnerability to gain access to the network and he will be able to gain control over the entire network.

Blockchain to rescue!!

To extend the properties of decentralization and data encryption to IoT, Blockchain is a major technology

being looked up to. Blockchain can ensure the decentralization of the network thus greatly reducing the

chances of any attacks on the IoT devices on the network. Also, encryption can be achieved at multiple

data entry points. Some of the features that can be added to IoT with the use of Blockchain are:

  • Identity: using a common blockchain network every node can identify all the devices. Data provided to the system is immutable and holds a record of every change in it. Also, the authentication of each device becomes more secure.
  • Scalability: using a blockchain network the fault tolerance and the system scalability also improves.
  • Security: blockchain can be used to secure the data contained in the network as transactions. Here, the data transfer is treated as a transaction that follows the rules set by the Smart Contracts.
  • Autonomy: using Blockchain the interaction of devices is decentralized and hence there are no servers. This makes the deployment of smart autonomous hardware possible for the service.
  • Secure code deployment: the deployment of codes into the devices also becomes more secure with the use of Blockchain. Thus, the developer can be confident that the code running on the device is the one he wrote and not the one by some malicious attacker.

problems in the integration

It’s not very simple to merge the two mentioned technologies which were not designed to work with one another and hence almost all the features that we added above as the benefits have certain restrictions.

Blockchain was made to be operated with much accessible Internet along with a device supporting high computational power which is not a property of IoT devices. Some other problems faced while the integration of the two is:

  • Storage capacity: IoT devices produce a huge amount of data in a real-time application while the blockchains we want to implement perform only a few transactions per sec. Thus, Blockchains are not meant to store this huge amount of data.
  • Security: the security problems at different levels furthermore increase with additional complexity as a result of a large variety of devices. Blockchain ensures the immutability of the data in the chains but cannot detect if the data received is already corrupt due to some hardware failure, environment change, etc. Thus, the IoT devices to be used on the blockchain need to be checked properly to avoid any such probable cause to occur.
  • Anonymity and data privacy: IoT devices that are used in the Healthcare sector or Banking sector deal with many private details and it is important to establish trust for data privacy and anonymity. But the problem of data privacy in IoT devices is complicated than the private and public Blockchain network as it starts with the collection of data and goes up to application level. 

    Hence securing the device requires the integration of security cryptographic software’s which generally harm the resource limitations of devices and hence economic viability.
  • Smart Contracts: the killer application of blockchain technology presents many challenges to IoT technology as they do not fit in IoT applications easily. Validation of these Smart Contracts is compromised if the IoT is not stable. Also accessing multiple data sources can result in overloading these contracts.
  • Consensus: the limited resource in IoT devices makes the PoW consensus unsuitable, there are other proposed consensus mechanisms (PoS, PoU, etc) but these are still not mature enough for their implementation. The initiatives have been taken of implementing full nodes into IoT devices, mining is a big challenge in IoT due to these limitations.


The Hybrid approach, using only a part of the interactions and data takes place in the blockchain and the rest are directly shared between the IoT devices, has been used in fog computation and is being tested for application in other domains, so we can safely say that the possibilities are high. Hope things work out well between the two great technologies.

Day17 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 3 minutes

author: aman

Blog V - Part II - Day 17

Hey People, I have given a gist of how the EVM stores the smart contracts on its machine.

In this I will directly discuss some technical things about, how deep you can dive into using just the information told about in the previoud micro-blog. Will try to give a glimpse, rest you can think of autonomously.

Let's do it...

In this micro-blog

  • Ethereum Virtual Machine (EVM)
  • The two Properties of EVM
  • How the Smart Contracts are actually stored?
  • Some supplementaries
  • These trail of Digits have some meaning
  • How can the attackers mis-use it?
Some supplementaries

I would suggest to open up following things in other tabs, would help you people throughout:

These trail of Digits have some meaning

I will keep this explanation as vague as possible, as we have some people onboard who have excitement about the blockchain, despite their core interests and Fields.

You know right, EVM is a Stack based machine, as 2 + 2 is actually written as 2 2 +, postfix notation.

If you break this "strange series of digits", 608060405234801561001057600080fd5b5060016000819055506......

according to as shown in tab.

Day17 - "Why?" & "What in?" Security & Blockchain?

EVM is a stack-based machine and for actions to happend on this machine, these trails are converted into the OPCODES.

Each OPCODE has a size of 1 byte. EVM has a set of 140 OPCODES in total

000060PUSH1 0x80
000260PUSH1 0x40
000861PUSH2 0x0010

Now, you understand how this thing works in EVM Stack? It would be infeasible to explain here how does a stack work. You better watch a video here call stacks & a big blog series here

If you are wondering how can you find the contract with that data? Well...just try copying pasting the following BYTECODE, and decompile in the, you'll find the same contract as was written in the previoud micro-blog simpleContract.sol.

How can the attackers mis-use it?

The level of publicity, Blockchain provides, any user can directly use the address of the contract deployed, to instatiate a variable of that, contract and call its various function.

This is not small, this can let the potential attackers exploit the contract and cause big-attacks like, DAO-Reentrancy attack, or DDoS Gas attack, explained in the previous blogs.

As I have told, these work as the fill in the blanks, the vacant spaces within the Bytecode are initiated by 0 , which is then replaced by the hexadec code of the input.

This contract is again deployed to replace the existing one, changing the current state of the contract.

The Internal checks verifies whether you are the authorised one to make a certain check or not.

IG, This concept is heavily used in off-chains, as well.


Find deeper readings here

Day16 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 3 minutes

author: aman

Blog V - Part I - Day 16

Hey People, I have been a little busy for last few days. Plus it took me some time to find the correct stuff that should fir right in the series.

So now, after so many micro-blogs, it is possible that you must be wondering on How an attacker can even do this? For that I'll be giving you people an idea about what things are openly available to people, potentially an attacker, to be able to exploit the weaknesses of the blockchain governing codes.

We'll take up Smart Contracts in world's larget Decentralised Application(dAPP) platform. Ethereum works with the currency called ETHER(ETH).

I will give you a quick look into what all information is publicly available, and an idea about what all can be extracted from the information available.

Lets dive deep in...

In this micro-blog

  • Ethereum Virtual Machine (EVM)
  • The two Properties of EVM
  • How the Smart Contracts are actually stored?
Ethereum Virtual Machine (EVM)

Ethereum, is actually a large collection of machines spread across the world in decentralised fashion. And a Ledger containing the details of all the transactions is distributed across all the machines(called nodes).

Ethereum Virtual Machine or EVM, is a system used to refer to this computer.

The two properties of this EVM

1) EVM is Quasi-Turing

A turing complete machine is the one, which is able to solve any problem provided to it, despite the fact how long does it take.

EVM is quasi-Turing because, it is limited by a factor, COST. Any computation you make to it, it is limited by the gas price required to solve this problem.

2) EVM is Stack Based Machine

EVMs Data Structure is Stack Based.

for e.g. 2 + 2 can be given as 2 2 +

How the Smart Contracts are actually stored?

If still you think the contract(i.e. the governing document on the Ethereum Blockchain), is stored in the textual format, as the following one, then you are absolutely wrong.

To work on EVM, the Smart Contracts are to be converted into a specific format called, the bytecodes.

After compiling the Smart Contract into the bytecode using Solidity compiler(solc), it is exported to the EVM.

  • Contract Bytecode: is the bytecode of the complete smart contract. That is actually, what ends up staying on the EVM.

It is comprised of functions(), already initialised variables, and all that is predefined. Plus, Something that can be changed during running.

  • Runtime Bytecode: it is the same bytecode that can be changes during running.

It can be said that Contract Bytecode = (some bytecode) + (Runtime Bytecode)*

-> Now, when compiled the above smart contract will look like,

if we compile it using solc --bin simpleContract.sol, we get the Contract Bytecode

======= simpleContract.sol:SimpleStorage =======


608060405234801561001057600080fd5b5060016000819055506 0c6806100276000396000f3fe6080604052348015600f57600080 fd5b506004361060325760003560e01c806360fe47b1146037578 0636d4ce63c146062575b600080fd5b6060600480360360208110 15604b57600080fd5b81019080803590602001909291905050506 07e565b005b60686088565b604051808281526020019150506040 5180910390f35b8060008190555050565b6000805490509056fea 265627a7a723158200e135b4c7bcf7bde9dca1f257d97637d8137 b315e29248b5654ac7830dab9e8264736f6c63430005100032

and, if we compile it using solc --bin-runtime simpleContract.sol, we get the Runtime Bytecode

======= simpleContract.sol:SimpleStorage =======

Binary of the runtime part:

6080604052348015600f57600080fd5b506004361060325760 003560e01c806360fe47b11460375780636d4ce63c146062575b6 00080fd5b606060048036036020811015604b57600080fd5b8101 908080359060200190929190505050607e565b005b60686088565 b6040518082815260200191505060405180910390f35b80600081 90555050565b6000805490509056fea265627a7a723158200e135 b4c7bcf7bde9dca1f257d97637d8137b315e29248b5654ac7830d ab9e8264736f6c63430005100032

If you look very closely, you get to find that, the "Contract Bytecode" contains the "Runtime Bytecode"

608060405234801561001057600080fd5b5060016000819055506 0c6806100276000396000f3fe6080604052348015600f57600 080fd5b506004361060325760003560e01c806360fe47b1146037 5780636d4ce63c146062575b600080fd5b6060600480360360208 11015604b57600080fd5b81019080803590602001909291905050 50607e565b005b60686088565b604051808281526020019150506 0405180910390f35b8060008190555050565b6000805490509056 fea265627a7a723158200e135b4c7bcf7bde9dca1f257d97637d8 137b315e29248b5654ac7830dab9e8264736f6c63430005100032

Metaphorically, the smart contract remain in a way of Fill in the Blanks! The arguments inside the function(), are the blanks, which gets filled, and the state of the Blockchain is changes, or the query result is returned.

Please Note! This thing is publicly available.

-> Will directly, continue in next microblog....

Day15 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 2 minutes

author: aman

Blog IV - Part II - Day 15

Let us get some dirty hands on with some more Solidity code and exploit a few more Ethereum - Solidity bugs.

Here we'll discuss about the famous DAO attack, caused by the reentrancy bug.

Let us do it...

In this micro-blog

  • delegatecall (the proxy calls) (SWC-112) (Inclusion of Functionality from Untrusted Control Sphere)
  • DoS With Block Gas Limit (SWC - 128)
  • Integer Overflow (SWC - 101)
  • Reentrancy Bug(DAO attack) (Improper Enforcement of Behavioral Workflow) (SWC-107)
  • uncheckedSend() (SWC - 113)
  • tx.origin bug
  • Variable Shadowing (SWC-119)
3. Reentrancy Bug(DAO attack) (Improper Enforcement of Behavioral Workflow) (SWC-107)

You can find the related files in this gist.

There are two files. One is simpleDAO.sol which is a simple DAO(Decentralised Autonomous Organisation) contract, which is generally available publicily. Other one is reentrancy.sol which is particularly written by the attacker to exploit this bug.

It is termed as Improper Enforcement of Behavioral Workflow, as the attacker is able to make improper use of the conctract function, and play with the workflow of the contract.

Now, look at the 2 very crucial parts of both the contracts, one from each.

-> Attacking contract

function() public payable{

The variable DAO is the instantiation of the already deployed contract.

-> DAO Contract

function withdraw(uint amount) public{
    if (credit[msg.sender]>= amount) {

Now, just go with the flow.

You being the owner of the "attacking contract", will trigger some function to withdraw your money from the DAO Contract, the flow goes as follows:

call is sent to function withdraw() [DAO]


the function checks whether you have that amount, which comes to be true


amount is transferred to your contract using sender function


to accept the payment, "payable" function of your contract automatically gets called


The flow moves again to the "withdraw()" Notice!!! the amount is deducted after sending the amount your contract

"Notice the credit[msg.sender]-=amount; line."


The flow repeats.


This thing, drained off all the money from the DAO contract to the attacker contract.

"One of the major dangers of calling external contracts is that they can take over the control flow. In the reentrancy attack (a.k.a. recursive call attack), a malicious contract calls back into the calling contract before the first invocation of the function is finished. This may cause the different invocations of the function to interact in undesirable ways."

*Can you Imagine what the Solution was?

Well, I'll tell that in the next blog. laughing

You are surely gonna kill me for this.

Be honest!!! dont search it up

*will be dropping an "answer" box in the cev insta page @cevsvnit

Thank you.

Adding gist frames here

Reentrancy Bug(DAO attack) (Improper Enforcement of Behavioral Workflow) (SWC-107)

Day14 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 3 minutes

author: aman

Blog IV - Part I - Day 14

Let us get some dirty hands on Solidity, to exploit some very dangerous Ethereum - Solidity bugs.

2 Bugs/vulenrabilities in this very micro-blog. Covering bugs like, Denial of Service with Block Gas Limit, where the attacker exploits the bug by taking benefit from limited GAS available for each transaction, and unchecked_send() bug, which when made by mistake, could be a disaster to the host contract holder, and users.

Let us do it...

In this micro-blog

  • delegatecall (the proxy calls) (SWC-112) (Inclusion of Functionality from Untrusted Control Sphere)
  • DoS With Block Gas Limit (SWC - 128)
  • Integer Overflow (SWC - 101)
  • Reentrancy Bug(DAO attack) (Improper Enforcement of Behavioral Workflow) (SWC-107)
  • uncheckedSend() (SWC - 113)
  • tx.origin bug
  • Variable Shadowing (SWC-119)
1. dos_gas.sol() [check out the exploitation of the bug at this gist])(

DOS with Block Gas limit is A denial of service attack, where a host contract denies to perform its duties due to limited amount of gas provided for each transaction (about 3 million).

    for(uint i=0;i<500;i++) {

Here to make the contract to always true change the upper bound of i to some lesser value, say i<100. Increase the value to fail it at a certain point.

uncheckedSend() [check out the exploitation of the bug at this gist])()

Whenever a contract, say sender, transfers the ether to another contract,say receiver, the payable function of the receiver is triggered, and this can be misused. For eg. payable function of the receiver contains some computationally heavy instructions, it can cause transfer() to fail and send() function to return false. Thus if the send() is not checked, it may cause a bug called uncheckedSend.

Also, since send() doesn't propogate the exception, its harmful of the users to use it.

contract attacker{
    bool public flag=false;
    function change() public{
		if(!flag) 	flag=true;
		else    	flag=false;
	function() external payable {if(flag)	revert();}
contract Test{
	attacker a = new attacker();
	bool private flag0 = true;
	bool private status;
	function set0(int val) public returns (bool){
    		if (val % 10 == 0) {a.change();}
    		else flag0=false;
    function echidna_send() public payable returns(bool){
            return address(a).send(0);
	function() external payable{}

Here, echidna_send() will be the main function whose bool value will be checked by the tool.

  • payable functions : payable functions are necessary for the contract to accept the ether. Whenever a contract, say sender, transfers the ether to another contract,say receiver, the payable function of the receiver is triggered.

  • echidna_send() : contains address(this).transfer(msg.value); which is responsible for transferring ether to the Test contract. Which will then be transferred to the the instance of the contract attacker, a. Note: we are transferring 0 ethers to the contract address and then to the instance a. As address.send() doesn't revert state whenever the payment fails. So we try to return its bool value, which is then catched by echidna_send(), and thus by the tool. This is the value that the tool mainly checks for, and thus will be able to tell whether the contract payment through send was completed or not.

  • set0(int val) : random value is provided to set0(int val) as argument. Which then waits for the no. satisfy the condition if (val % 10 == 0). As soon as this value is catched, it triggeres change() function of the contract.

  • change() : This is responsible for flipping the flag value. So as soon as this function is triggered, flag=false changes to true, and now revert state in the payable will be activated. Now, the contract attacker, will be reverting each transaction made to it.

So this is how it works: [a is the instance if contract attacker] We first start running the contract with a.flag == false, and wait for a value in set(int val), to flip the flag of contract a to true, and thus activating the revert in payable. This will fail everytime the payment is made. And since, the send() doesn't revery any exception, it shall revert true of false. Which is catched by echidna_send(), and will be returned to the tool, to state that the payment could not be completed.

View this thread for more about address.send and address.transfer

I took it exactly from the exploitation repo I made earlier. Please email directly, in case of any doubts:


Adding gist frames here

DoS With Block Gas Limit (SWC - 128)

uncheckedSend() (SWC - 113)


Day13 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 3 minutes

author: aman

Blog III - Part III - Day 13

Understanding Hyperproperties and Blockchain together. And how this could be so big!

Let's get in....

In this micro-blog

  • Let us check this vaguely
  • 2-trace property
  • Hyperproperties
  • Safety and Liveness - Another 2 very Important terms
  • Blockchain & Hyperproperties
  • How this could be so big?
Safety and Liveness - Another 2 very Important terms

As already explained, Property is a set of traces(traces are the set of System states). So, intuitively the Properties are the set of all the traces, where the system can reach.

Now, there are two things to be well noted, there are certain states "where a system should never reach & certain states where a system should eventually reach.

Well these are termed as "Safety" and "Liveness" trace properties. Where: Safety: is the property that prescribes that a system should never reach some bad state , while Livenes: is the property that prescribes that a system shoudl "eventually" reach some "Good State".

Give some time understanding this stuff. These are 2 very important terms when thinking about System proofs.

Every trace property is an intersection of safety & liveness property.

Blockchain & Hyperproperties

A very straight explanation from Hyperpoperties paper[1], says

"If systems are modeled as sets of execution traces [35], then the extension of a system property is a set of sets of traces or, equivalently, a set of trace properties. We name this type of set a hyperproperty."

Thus these safety and liveness property are said as heypersafety & hyperliveness.

Every property of any system anywhere can be defined in terms of these hyperproperties...

Now you must remember there was a CIA triangle, that Hrishabh explained about in Winter School 2019, which stands for : (take an example of something stored inside a locker)

C -> Confidentialitycan't see what is inside the locker
I -> Integritycan't tamper what is inside the locker
A -> Availabilitycan't destroy the locker's availability

If you think very crucially, you'll find that only confidentiality and intergrity are the two properties concerned with the secure information flow.

The most invincible idea behind blockchain is the safety of data.

To ensure the flow of data never goes in wrong hands, which is described by the very term secure information flow.

Now considering application of hyperproperties in the Blockchain, let us take 2 traces of blockchain:

π1 & π2.

There are two ways hyperoperties to check here!

  1. Non-interference: if some commands are issued by the high-level users (say the general of the army, that should not reach to the ears of the soldier). These should be removable, without the low-level user noticing any changes.
  2. Observational Determinism: System should always appear deterministic to the trusted users, or in this case high level users.

Suppose, in the blockchain, there are two traces, π1 & π2.

Day13 - "Why?" & "What in?" Security & Blockchain?

This is clipped form Dr. Pramod's teaching. It explains about Observational Determinism, but not with Blockchain

The upper one is π1(set of states as viewed by high level) and lower one is π2(set of states as viewed by low level).

High-Level user is that user, who can make changes to the Blockchain. And Low-level are the ones, who can just look at the states and retrieve data.

Now, whenever some critical input is given by the high level user(like, a general take some decision), it should not be noticed by the low-levels(the soldiers).

So, in OBSERVATIONAL DETERMINISM, the states of blockchain observed by both the low level and high level user should be same. (Notice that obsT between the two traces,showing the observations being made.)

That is all, this has a very crucial implications in the field of Systems, and even larger when applied to Blockchain.

How this could be so big?

This is very big thing. Though introduced back in 2003(observational determinism) & 1982(non interference), these hyperproperties turns out to be very crucial checks in the security.

Just consider a statement:

"If the low level is able to see the change made by the high level, there is the safety issues with Confidentiality adn Intergrity of the data."

Hope you got a very intuitive feel about these stuff.

Hope you had a great read.

See y'all....

Day12 – “Why?” & “What in?” Security & Blockchain?

Reading Time: 4 minutes

author: aman

Blog III - Part II - Day 12

In this blog, we’ll vaguely discuss the Hyperproperties and Information Flow thing.

As continued, this blog will contain the understandings from the Teachings of Dr Pramod, from SAT SMT Winter School 2018[1]. I will try to portray my understanding from his teachings and is working with him closely on Blockchain, I suppose it earned me a proper understanding.

Let us do this....

In this micro-blog

  • Let us check this vaguely
  • 2-trace property
  • Hyperproperties
  • How this could be so big?
Let us check it vaguely

We'll play a game, known as Distinguishability Game.

We pose a challenge game between attacker and a defender, where the attacker needs to exploit flow of information and the defender has to prevent it.

2 people:


Situation: There are two systems behind a wall, say system_0 and system_1, and the attacker just have the access to a function foo(x). He doesn't know, whenever he makes a call, to what system does this does the call go to.

The attacker is just like any other user, but who is trying to attack an arrangement behind a wall, popularly known as adversaries.

The defender is the arrangement behind the wall, which diverts the calls to different systems, which have following secret keys: "secret_b" , where b -> {0,1}. i.e. secret_0 or secret_1.

Game Initialisation

  • secret_0 := {0,1,2,3}
  • secret_1 := {4,5,6,7}
  • publicx := {10,11,12,13}
  • whenever a normal user makes a call, "only publicx is called, and thus the values inside it are returned"

Game Execution

  • there are a lot of calls to foo(x) made from across the world, and by the users with different access levels, i.e. admins & normal user
  • so the calls by a normal user are interspersed calls made by the admins


  • if attacker is able to identify which system in system_b the call is sent to, he wins, as this information should not be made available to the "normal user"

---> Now consider the following picture


The attacker will try to observe the value of "r", and specially "he will be looking for any unexpected values"

Considering this program, try to make following calls to the system(both normal user and admins included),

• priv_level = sup_user, foo(1), obs = ∅ • priv_level = user, foo(1), obs = 11 • priv_level = sup_user, foo(2), obs= ∅ ........ These calls will go on forever the attacker will

But, now if the program has been like the following, and we bagin with our game:


we start with the following calls, (notice the introduction of variable t)


  • priv_level = sup_user, foo(1), obs = ∅
  • priv_level = user, foo(4),
    • obs = 2 -> b = 0
    • obs = 6 -> b = 1

Woosh!!! Did you realise here attacker wins the game, by observing the value of r & t.

If the value returned to the attacker is 2 clearly the secret key b, chosen will be b = 0 and if the value returned to the attacker is 6 clearly the secret key b, chosen will be b = 1

The system just leaked the information.

AFAIK, during my study I encountered this incident had already been reported, where the highly confidential data was leaked due a misprinted "=", I may be wrong though. But, This is a very critical exploitation of Information Flow.

In the very next blog, I'll take a use case of blockchain, and try to determine for such observations for it.

Thanks y'all..

and yeah, Amid this Corona virus thing, be safe...

_ Team CEV

CEV - Handout