The morphological classification of galaxies

Okay, short astronomy lesson first. In the 1920’s, Edwin Hubble created a system commonly called the ‘Hubble tuning fork diagram’, to classify galaxies based on their appearances while studying their evolution. This system is still very commonly used today (although now considered a bit of an oversimplification), and is divided into two distinct parts: elliptical, and spiral galaxies. The ellipticals are further divided into 7 subcategories, with E0 being the least elliptical (a.k.a the roundest), and E7 being the most elliptical. Spirals on the other hand, are broken down further into ‘S’ (normal spirals) and ‘SB’ (barred spirals), based on how the spiral arms project from the center of the galaxy. Both of these divisions are then given suffixes from a-c, with ‘a’ being the tightest wound spiral and ‘c’ being the loosest. There is also a special type of galaxies placed right where the prongs of the ‘tuning fork’ meet its stem, S0 or lenticular galaxies, which are considered transitional galaxies exhibiting features of both spirals and ellipticals. One thing that this diagram doesn’t account for however, is the existence of irregular galaxies, which are neither elliptical nor spiral in shape, usually formed as a result of collisions/interactions amongst galaxies.

But why is any of this important? Well, even though Hubble’s original concept of galaxy evolution wasn’t completely accurate, the appearance of a galaxy can actually tell us a lot about what goes on inside. The arms of spiral galaxies are sites of star formation, containing large amounts of hot gas and dust that give birth to bright, hot, and young stars (most type O and B on the HR diagram). Elliptical galaxies on the other hand are referred to as ‘red and dead’ galaxies, since they contain less gas and dust, and are populated by older, redder stars with long lifespans.

CNNs and Random Forests

For the purpose of this model, I’m using labelled images from the publicly available Galaxy Zoo dataset (https://www.zooniverse.org/projects/zookeeper/galaxy-zoo/) on Zooniverse.

As I mentioned earlier, two of the most common approaches to classification are CNNs and Random Forest. The simplest way I can explain how CNNs work is by using convolution layers that detect features like edges and lines to create feature maps for different filters (more about this in part 2). While this method is extremely accurate, the problem with neural networks is that they sort of act like a black box. What I mean by this is that the output of such classifiers is not interpretable, so you won’t get much insight as to why a galaxy is classified the way it is. Keep in mind that this holds true mostly for vanilla CNNs, and that new techniques detecting which regions most influence the classifier’s decision have been developed.

This brings me to Random Forests, which is the method I’m going to use to classify the galaxy zoo dataset in this article. Like a regular forest is made up of regular trees, in machine learning, a random forest is made up of multiple decision trees. A decision tree is basically a flowchart-style model that starts at the ‘root node’, which is the main question derived from the features of the dataset. From then onwards, it asks a series of yes/no questions, splitting the data into subsets based on specific features, reaching a conclusion (leaf node) when there are no more useful questions to be asked.

Decision trees have their own share of problems, which include overfitting, where the trees get so deep that they memorize the training data instead of underlying patterns, and instability. In an attempt to reduce this, we use random forests instead of depending on the output of one, singular tree. There are roughly three main parts to the working of a random forest: bootstrapping, random feature selection (feature bagging), and aggregation. You may have heard this type of random forest, where the decision trees work parallel to each other producing independent results, be sometimes referred to as Bagging (bootstrapping + aggregation).

1. Bootstrapping - The selection of random data values within the original dataset for each decision tree.
2. Random feature selection - The selection of a random subset of the total features to train each individual decision tree on. This helps decorrelate them, reducing the chances of getting overfitted results.
3. Aggregation - Averaging (in case of regression), or taking a majority vote (in case of classification) from each decision tree to reach a conclusion.

Choosing defining features for galaxies

So now we know that we need to train the random forest on some features of the galaxies, but what features exactly do we use, given our dataset consists of images?
Well, for each image in the training and testing data, I computed a small set of non‑parametric structural features that define how the galaxy’s light is distributed. To do this, I treated each image as a 2D light distribution, and found the flux-weighted centroid (the center that lies near the brightness peak), which I then used to find the radial distance of each pixel. This is because galaxies are roughly centrally concentrated, so defining everything with respect to the center lets us build accurate radial profiles and flux fractions.

Radial profiles are the radii containing some portion of the total light of the galaxy. I use three common radial profiles as features to train my random forest: R20, R50, and R80, the radii at which the cumulative flux reaches 20%, 50%, and 80% of itself respectively. Since elliptical galaxies have a lot of their light packed into a small radius, we expect them to have a smaller R20 and R50, whereas other, more spread out galaxies tend to have higher values for these features.

Using these radial profiles, we can calculate concentration indices, which quantify how centrally concentrated the light is. As my fourth and fifth features, I use the 50/20 and 80/20 concentration indices, which can be calculated as R50/R20 and R80/R20 respectively. As we outlined earlier, elliptical galaxies tend to be more centrally concentrated, and thus have higher concentration indices as compared to other featured galaxies such as spirals and irregulars.

For my next feature, I calculated the Gini coefficient, a term you may have heard of in Economics used to calculate income inequality. In our case, the Gini Coefficient or G is value from 0-1 used to measure how unequally the total light is distributed among pixels. If a few pixels are very bright and most are faint, the distribution is highly unequal (high G). If brightness is uniform, Gini is low.

The final feature I calculated was M20, the second moment of the brightest 20% of pixels. The value of M20 describes how spatially extended the brightest regions are. If the brightest 20% of light is near the center like in ellipticals, you get a low M20; if it is more off‑center, M20 becomes larger.

Extracting features computationally

To start with the model, we’ll first need to import and filter our dataset. As mentioned before, I’m using data from the galaxy zoo project, which contains 120,000 classified images from the Hubble Space Telescope. More specifically, I’ll use the 'smooth-or-featured-gz2_smooth' label column within the dataset to filter galaxies that exhibit smooth, elliptical shapes vs. featured galaxies that have arms, bars or irregularities based citizens' votes in the Galaxy Zoo project. A vote>0.5 means the galaxy is smooth, and <0.5 means its featured. You can import the training dataset into your code as follows:

from galaxy_datasets import gz2
import numpy as np
import pandas as pd
from PIL import Image

catalog, label_cols = gz2(
    root="data",
    train=True,
    download=True
)

But, before we can actually use these images, we need to clean them up a bit. I wrote a tiny function that does this by converting the images to grayscale and roughly subtracting their background (~5th percentile).

import os
def load_image_gray(path):
    im = Image.open(path).convert("L")        #grayscale
    arr = np.array(im, dtype=np.float32)
    arr -= np.percentile(arr, 5)             #rough background subtraction
    arr[arr < 0] = 0
    return arr

Now, we can start on a function to calculate the 7 features outlined in the part above from each image.

def compute_features(img):
    yy, xx = np.indices(img.shape)
    #computing a flux-weighted centroid
    total_flux = img.sum()
    #sub pixel center that lands near the brightness peak
    x_centroid = (xx * img).sum() / total_flux 
    y_centroid = (yy * img).sum() / total_flux
    r = np.sqrt((xx - x_centroid)**2 + (yy - y_centroid)**2)
    r_max = r.max()
    bins = np.linspace(0, r_max, num=20) #20 bins for radius
    r_flat = r.ravel()
    img_flat = img.ravel()
    which_bin = np.digitize(r_flat, bins) - 1
    mean_flux = np.zeros(len(bins))
    r_mid = []
    for i in range(len(bins)):
        mean_flux[i] = img_flat[which_bin == i].mean()
        r_mid.append(0.5 * (bins[i] + bins[i-1]) if i > 0 else bins[0] / 2)

    cumulative_flux = np.cumsum(mean_flux)
    total_cumulative_flux = cumulative_flux[-1]

This piece of code basically adds up the brightness for each pixel in the image and stores it in total_flux. Then, treating the image as a 2d distribution, it calculates the centroid, which is where the brightness peaks, and uses it to calculate the radial distances for each pixel. It then creates 20 concentric annuli (area betw. 2 concentric circles) from the center to the max radius, taking the mean flux of all pixels in that annulus to calculate approximate azimuthally averaged radial profiles as shown below:

    R20 = r_mid[np.searchsorted(cumulative_flux, 0.2 * total_cumulative_flux)]
    R50 = r_mid[np.searchsorted(cumulative_flux, 0.5 * total_cumulative_flux)]
    R80 = r_mid[np.searchsorted(cumulative_flux, 0.8 * total_cumulative_flux)]
    C_80_20 = R80 / R20 if R20 !=0 else 0 
    C_50_20 = R50 / R20 if R20 !=0 else 0
    f = np.sort(img.ravel().copy())
    f[f < 0] = 0

The radial profile calculations use Numpy’s searchsorted function to find the bins where the cumulative flux first reaches 20%, 50% and 80% of itself respectively, taking their midpoints as R20, R50 and R80.
Following this, it finds the concentration indices by calculating ratios of the radial profiles.

We can now move on to calculating the Gini coefficient and M20.

    # Gini coefficient
    #Gini coeff = inequality in brightness across the pixels 
    n = f.size
    mean_f = f.mean()
    i = np.arange(1, n+1)  # 1..n
    G = ( (2*i - n - 1) * f ).sum() / (mean_f * n * (n-1) + 1e-8)

    xx_f = xx.ravel()
    yy_f = yy.ravel()
    r2 = (xx_f - x_centroid)**2 + (yy_f - y_centroid)**2
    M_i = f * r2
    idx_desc = np.argsort(f)[::-1]
    f_desc = f[idx_desc]
    M_desc = M_i[idx_desc]
    cum_flux_desc = np.cumsum(f_desc)
    total_flux = f_desc.sum()
    k = np.searchsorted(cum_flux_desc, 0.2 * total_flux) + 1
    M20_sum = M_desc[:k].sum()
    positive = f > 0
    f = f[positive]; xx_f = xx_f[positive]; yy_f = yy_f[positive]
    r2 = (xx_f - x_centroid)**2 + (yy_f - y_centroid)**2

    M_i = f * r2
    M_tot = M_i.sum()

    idx_desc = np.argsort(f)[::-1]
    f_desc = f[idx_desc]
    M_desc = M_i[idx_desc]

    cum_flux = np.cumsum(f_desc)
    k = np.searchsorted(cum_flux, 0.2 * cum_flux[-1]) + 1
    M20_sum = M_desc[:k].sum()

    M20 = np.log10(M20_sum / (M_tot + 1e-8))
    features = np.array([
    R20, R50, R80,
    C_80_20, C_50_20,
    G, M20
    ], dtype=np.float32)

    return np.array(features, dtype=np.float32)

First, I flatten all the pixel values into a one‑dimensional list and plug them into the standard Gini formula (attached below), which gives me the Gini coefficient G. Pixels that are all about the same brightness give a low Gini while a few very bright pixels and lots of faint ones give a high Gini.

For M20, I combine each pixel’s brightness with its distance from the galaxy’s center (radial distance). I flatten the x–y pixel coordinates, compute the distance of every pixel from the centroid, and then multiply that distance squared by the pixel’s brightness. That gives a “moment” for each pixel: bright pixels far from the center contribute a lot, faint pixels near the center contribute little. I then sort pixels from brightest to faintest and start adding up their moments until I’ve included just the brightest 20% of the total light. The sum of those moments, divided by the total moment of the whole galaxy and put through a logarithm, gives us M20. Finally, I return everything-radii, concentration, Gini, and M20-as a small feature vector which my random forest model can then use to learn the difference between smooth and featured galaxies.

You can then loop over the Galaxy Zoo training dataset and run this function for each image, storing the results in an array called X_train, and the corresponding labels (1 if label>0.5, 0 otherwise) in y_train. However, be aware that it takes over 1000 minutes to complete… I suggest saving the features of every 100-500 images you process into a CSV file as you go. Also, wrap the entire code in a try-except block so that a small error doesn't ruin hours of computation (I learned this the hard way).

Once you do everything above successfully, you’ll be ready to move onto downloading test data! You can do this the same way we did at the top of this section, just by changing the parameter train to false :

catalog_test, label_cols = gz2(
    root="data",
    train=False,
    download=False 
)

You can then run the function compute_features for every image in this dataset too, storing the results in X_test and y_test as done earlier.

Building the random forest

Finally, we can start with the most awaited section of this article, training and evaluating our random forest model!

from sklearn.ensemble import RandomForestClassifier
import matplotlib.pyplot as plt
from sklearn.metrics import confusion_matrix
import numpy as np
import pandas as pd

model = RandomForestClassifier(n_estimators=100)
cols = ['R20','R50','R80','C_80_20','C_50_20','Gini','M20']
X_train =  pd.read_csv("brightness_features_train.csv", usecols=cols).values
y_train = pd.read_csv('brightness_features_train.csv', usecols=['label']).values
model.fit(X_train, y_train)
X_test = pd.read_csv("brightness_features_test2.csv", usecols=cols).values
y_test = pd.read_csv('brightness_features_test2.csv', usecols=['label']).values
model.score(X_test, y_test)
y_predict = model.predict(X_test)
cm = confusion_matrix(y_test, y_predict)
plt.imshow(cm, cmap='Blues')
plt.colorbar()
plt.xlabel('Predicted labels')
plt.ylabel('True labels')
plt.xticks([0, 1], ['Featured', 'Smooth'])
plt.yticks([0, 1], ['Featured', 'Smooth'])
plt.title('Confusion Matrix')
plt.show()

Here, I use Scikitlearn’s RandomForestClassifier function to create a model with 100 decision trees (n_estimators), and feed in the features I computed for the training dataset, plus a binary label (label = 0 for featured, 1 for smooth). Then I point the model at the test set, ask it to predict smooth vs featured, and build a confusion matrix: a 2×2 grid that shows, for each true class, how many times the model predicted featured or smooth.

This approach seems reasonable, but in practice, it fails for two reasons. First, the labels are hugely skewed: only a few percent of galaxies in Galaxy Zoo are tagged as “featured” by the vote fraction cut I used, while almost everything else is “smooth.” You can actually find the exact number of featured to smooth galaxies by running the following line:

print("Train:", np.bincount(y_train.ravel().astype(int)))

This returns ‘Train: [ 3116 126644]’, which means that in the training dataset, there are only 3,116 featured galaxies for 126,644 smooth ones, or 2% featured for 98% smooth.

That means a dumb model that simply classifies every single galaxy as “smooth”, already hits around 98% accuracy. Second, the seven global brightness features I chose don’t cleanly separate these two classes at survey quality; many featured galaxies have very similar light profiles and Gini/M20 values to smooth ones. Put those together, and the random forest learns that the safest move is to call almost everything smooth. The confusion matrix ends up with one giant block in the “true smooth / predicted smooth” cell, almost nothing in the “true featured / predicted featured” cell, and accuracy that looks great but is scientifically useless.

One step I took to fix this, was to weigh the featured galaxies as much as the smooth ones, by creating a new training dataset consisting of a 50-50 ratio of featured to smooth galaxies. This resulted in a confusion matrix looking something like this:

This means that the model just predicted more false ‘featured’s, reducing the accuracy of the model to around 55%, which clearly does not fix the problem at all.

Conclusion

So, as we just saw, the random forest approach almost completely failed. It couldn’t reliably pick out featured galaxies from the very skewed Galaxy Zoo data, even when the training set was rebalanced. It either defaulted to calling almost everything smooth or produced lots of false featured flags, which tells us these seven features aren’t enough information for this type of classification. In the next part, we’ll look at how much better CNNs do when they can look directly at the full galaxy images, and then talk about why their decisions differ from the simpler model.

Thank you, and happy holidays!

What is the N-body Problem?

While we have equations that can completely predict the interactions of 2 gravitational masses (thank you, Newton), the complexity of systems with 3 or more bodies makes their movement impossible to predict. This is what astrophysicists label as the n-body problem. The issue with writing down a general formula to describe the motion of three or more gravitating objects is that we have more unknowns than equations describing them, a.k.a, there are way too many variables to deal with! But what does it mean for these systems to be chaotic? Mathematically, the word ‘chaotic’ is used to refer to a system that is deterministic (non-random), but highly sensitive to its initial conditions (commonly referred to as the butterfly effect). We see this in the n-body problem, where every configuration of these bodies has a large range of potential outcomes that are influenced by the tiniest change in velocity or position.

Forces and motion

Now that we know what the problem is, we can try to write it mathematically.

Here, we have three masses M1, M2 and Mi along with their distance vectors. We can use the equation for the force of attraction between 2 bodies i and j using the Newtonian equation of gravity :

Here, rj - ri gives us the position vector from mass i to mass j, along which the force of attraction acts.
The reason the force is negative, is because of the inverse relationship of the position and force of attraction vectors. While the position vector Rj-Ri points AWAY from mass i, the force of attraction points TOWARDS IT.

Note : j ≠ i here, because it would make the denominator 0 (also, how would you calculate the attraction from a body to… itself?)

In an n-body simulation, you don’t have just 2 bodies, you have an n number of bodies. This means that you have to sum up all the forces acting on the body , as such :

The problem with this equation is that it does not account for cases when 2 more more bodies are extremely close, which makes the denominator ~ 0 resulting in singularity. As a solution, I softened the force using the Plummer potential, by adding a tiny constant ε (epsilon) as such:

This value of ε can be calculated by the following formula, where R is the virial radius, and n is the number of bodies in the simulation:

Now, to implement this in our code we can write a function as shown below to calculate the forces on each individual star:

def calc_forces():
    for star in stars:
        star.F = vector(0, 0, 0)

    for i in range(len(stars)):
        for j in range(len(stars)):
            if i != j:
                rji = stars[j].pos - stars[i].pos
                dist = mag(rji)
                stars[i].F += G * stars[i].m * stars[j].m * norm(rji) math.pow((dist**2 + e**2),3/2)
                stars[j].F -= G * stars[i].m * stars[j].m * norm(rji) / math.pow((dist**2 + e**2),3/2)

The first loop goes over every star in both lists, and calculates the force of attraction they exert on each other using the formula shown earlier. Notice that we use VPython’s norm() function to normalize the position vector, which removes the extra magnitude from the denominator of the equation. For each individual star (star[i]), I sum up the forces on it from the other stars (star[j]). I then add this value to star[i] and subtract it from star[j] (according to Newton's third law, each action has an equal and opposite reaction)

Assigning Initial Positions and Velocities Following a Plummer Sphere

To make the simulation more realistic, I generated the initial positions and velocities of the N stars such that they follow the Plummer sphere model’s mass and potential profiles. The total mass contained within a sphere of radius r is given by the following formula:

Every star can contain a fraction M(r)/M of the total mass M within its radial position. Considering the mass of the entire system/cluster as 1, we can then generated N random numbers from 0-1 to represent the M(r). The mass fraction could be anything between 0 and 1. It will be 0 if the particle is placed exactly in the center, and it will approach 1 as the particle is placed further away, reaching 1 at infinity. To solve for r, we can rewrite the equation as such, where Xi is the i-th random mass :

Now that we have our radii, we can use spherical polar coordinates (r,θ,φ) to get the actual positions of the stars as a 3d vector.

• x = r sin(θ) cos(φ)

• y = r sin(θ) sin(φ)

• z = r cos(θ)

φ (phi), is the azimuthal angle that measures the horizontal rotation and lies between 0 and 2𝜋.
θ (theta), is the polar angle that measures vertical tilt (from the z axis in this case) and is calculated such that cos θ lies between -1 and 1.
r is the radius we calculated above.

Again, we can calculate uniformly random numbers within these ranges for θ and φ.

Let’s now begin to simulate the n-body problem for an n number of stars using VPython. Like most libraries, you can install VPython using pip and import it using from vpython import *

G = 1
M = 1
R = 1
N = input("Number of bodies to simulate: ")
stars = []

To start, I’m defining all the constants as 1 to avoid dealing with really small numbers. Also, I get the number of stars to simulate movement for from the user and store it in the constant N. stars[], is an empty list we will use to store the stars we create later on in our program.
We can then start building our ‘Star’ class, which will act as a template for every star we create.

class Star:
    def __init__(self, pos, v, M):
        self.pos = pos
        self.m = M
        self.v = v
        self.p = self.m * self.v
        self.F = vector(0, 0, 0)
        self.a = self.F/self.m
        self.sphere = sphere(pos=self.pos, radius=R / 30, make_trail=True, retain=100, color = vector(random(), random(), random()))

Every star created using the Star class will have a position (passed in as a parameter), a radius, a velocity, a mass, momentum, acceleration and force (initialized to a vector with magnitude 0). We then draw the star onto the screen by creating a sphere with the given position, radius, and a random color.

We can now use the method discussed above to generate random positions for each of the stars as such:

def plummer_sphere(a=1.0):
    Xi = np.random.uniform(0, 1)
    
    r = a / np.sqrt(Xi**(-2/3) - 1)
    
    theta = np.arccos(np.random.uniform(-1, 1)) #polar angle
    phi = np.random.uniform(0, 2 * np.pi) #azimuthal angle
    
    #our actual coordinates 
    x = r * np.sin(theta) * np.cos(phi)
    y = r * np.sin(theta) * np.sin(phi)
    z = r * np.cos(theta)

But, what about the velocities? Well, the maximum velocity at any given coordinate on the plummer sphere is the escape velocity, given by the formula -

Therefore the initial velocity of every star in the simulation must be between 0 and the escape velocity (Vesc). In order to get the velocity, we need to know its distribution function, which in this case is given by:

Here, q is the ratio between the stars' individual velocities and the escape velocity (q = V/Vesc). Where q ∈ [0,1] and g(q) ∈ [0,0.1]. To find a fit to this PDF, there are generally two directions you can take - rejection sampling, or the Newton root-finding method. I will be using the former. To implement Von Neumann rejection sampling, I sample 2 uniformly random numbers x and y in the range [0,1]. For each pair, if 0.01*y < g(x), I accept q = x.

Since velocities are isotropic (same magnitude in all directions) I use the same method for the positions to assign random directions to the velocities.

To implement this, I extend my plummer_sphere() function as such:

 v_esc = np.sqrt(2 * G * M / np.sqrt(r**2 + a**2))
 v_mag = 0
 q = 0.0

while True:
    q = np.random.uniform(0, 1)

    g_q = 0.1 * np.random.uniform(0, 1)
    if g_q < (q**2 * (1 - q**2)**3.5):
        v_mag = q * v_esc
        break

#random direction for velocity vector just like the coordiantes
v_theta = np.arccos(np.random.uniform(-1, 1))
v_phi = np.random.uniform(0, 2 * np.pi)

vx = v_mag * np.sin(v_theta) * np.cos(v_phi)
vy = v_mag * np.sin(v_theta) * np.sin(v_phi)
vz = v_mag * np.cos(v_theta)

return [[x,y,z], [vx,vy,vz], Xi]

Making The Simulation

At this point, we still haven’t actually created the stars; but, we can do so by making an N number of objects of class Star and adding them to stars[], as such :

for _ in range(N):
    data = plummer_sphere() 
    rt = vector(*map(float, data[0]))
    v = vector(*map(float, data[1]))
    m = float(data[2])
    stars.append(Star(rt, v, m))

Now that we’ve created and displayed our stars, we can move on to the movement logic. Firstly, we’ll need to define some variables to measure time, as shown below:

t = 0 #initial time
dt = 0.01 #small time step

Then, in a while loop, we can simulate the passage of time by increasing t by dt , and calculate the total force, and update the velocity and position of each star at each time interval to create a smooth animation.

while t < 10:
    rate(100)
    
    #Update positions
    for star in stars:
        star.update_vel(dt)
    for star in stars:
        star.update_position(dt)
    calc_forces()
    for star in stars:
        star.update_vel(dt)

    t += dt

Running the code we have so far does not result in an animation just yet. This is because we haven’t updated the positions of the stars at all, we’ve just calculated the forces on them. We can fix this by adding a function update_position() to our Star class, which updates the position at a full time-step (dt) using the formula dx = vdt (since dx/dt = v).

def update_position(self, dt):
        self.pos += self.v * dt 
        self.sphere.pos = self.pos

For the velocities, we create a similar function. However, there is one important distinction (other than the formula, of course):

def update_vel(self,dt):
        self.v += self.a * dt/2 #v = u + at

Notice that instead of using dt, we're using dt/2. i.e, we're updating the velocity at a half time-step. The reason for this is to implement leapfrog integration. The leapfrog method solves equations of motion with a second order accuracy (which is why it is preferred over the commonly used Euler's integration), by calculating velocity and position at staggered time points.

In our loop, first, the velocity is calculated at a half time-step, dt/2, followed by the position calculated at a full time-step dt, i.e, x and v are calculated such that they 'leapfrog' over each other. This makes our calculations more precise, although a bit slower.

…and now you have a simplified n-body simulation! By tweaking the initial settings such as velocity, position, and mass, you can observe how even small changes can result in vastly different outcomes, demonstrating the chaotic behavior we discussed earlier.

The full program can be accessed at :

https://github.com/fa22991/n-body-simulation-VPython/

Thank you for making it to the end!

• A map layout with hazard, enemy, player and coin components

• Character animations

• A player that can move and attack

• Enemies that can chase and attack the player

At this point, we could integrate more complex pathfinding algorithms such as A* or Dijkstra’s for the enemies, but in a game as small as this one I just didn’t see a point in doing that (a.k.a I’m very lazy and simply did not want to). But to wrap it up, we need to make some finishing touches. A good game needs a start screen, a help manual, and an ending based on success or failure.

Let’s start with the ‘start’ screen. First, we need to keep track of what part of the game the player is in: Have they started? Did they finish? Are they stuck?
When you have a problem like this, where you need to keep track of a state across multiple files, its best to create a variable in settings.py that we can import everywhere. In this case, I made 4 variables : whichever one of them is true, gets displayed. If none are true, it means the game has started. Now you might wonder, would it not have been easier to make one variable and set it to either ‘intro’, ‘help’, ‘success’ or ‘failure’? The answer would be yes, you absolutely can, I just didn’t think of that when I made this and I don’t care enough to optimize it now.

in_intro = True #we start in the intro
in_help = False
success = False
failure = False

One thing to note is that when you import a data structure from a different file, your local file creates a copy of it and edits the copy instead of the original. If we keep editing the local copies, our changes wouldn’t be reflected throughout the project. To fix this, instead of using from settings import *, we say import settings and then use settings.variable_name , which is the original variable, throughout our project.

We can then write a function to display the intro screen as such

def intro_screen(self, clicked):
        bg = transform.scale(image.load('assets//screens//bg.jpg'), (1000,500)) # did not design the bg
        banner = image.load('assets//screens//banner.png').convert_alpha() #i designed the banner, fun fact, I styled it exactly like the actual Geronimo stilton book title
        button = transform.scale(image.load('assets//screens//button.png'), (300, 50))
        self.screen.blit(bg, (0,0))
        self.screen.blit(banner, (0,50))
        self.screen.blit(button, (400,250))
        col_0 = "#312400"
        col_1 = "#312400"
        col_2 = "#312400"
        game_font = font.Font("assets\\screens\\Pixellari.ttf", 30)
        sb_rect = Rect(520,260, 150, 50)
        self.screen.blit(button, (400,310))
        h_rect = Rect(520,320, 150, 50)
        self.screen.blit(button, (400,370))
        q_rect = Rect(520,380, 150, 50)
        buttons = [q_rect, sb_rect, h_rect]
        l,m,r = mouse.get_pressed()
        pos = mouse.get_pos()
        if clicked: 
            for i, button in enumerate(buttons): 
                if button.collidepoint(pos):
                    if i == 0:
                        col_0 = "#966825"
                        return 'quit'
                    elif i == 1:
                        col_1 = "#966825"
                        return 'start'
                    else: 
                        col_2 = "#966825"
                        return "help"
        quit_button = game_font.render("Quit", True, col_0)
        start_button = game_font.render("Start", True, col_1)
        help_button = game_font.render("Help", True, col_2)
        self.screen.blit(start_button, sb_rect)
        self.screen.blit(help_button, h_rect)
        self.screen.blit(quit_button, q_rect)
        return None

I will link all the assets used here below, but basically what this does is creates a screen with 3 buttons (rects that do something when clicked) - start, help and quit, and return the same depending on which one is clicked.

The help screen is similar, except the only button it has is a back button which goes back to either the intro screen, or the game depending on whether or not the player has started.

def show_help_screen(self,clicked):
        self.screen.fill('white')
        help = transform.scale(image.load('files\\assets//screens//help screen.png'), (1000,500))
        self.screen.blit(help, (0,10))
        back = transform.scale(image.load('files\\assets//screens//back.png'), (100,60))
        back_rect = self.screen.blit(back, (450,0))
        back.get_rect()
        pos = mouse.get_pos()
        if clicked:
            if back_rect.collidepoint(pos):
                return 'back'
        return

Lastly, the success/failure screens will be the same except for their backgrounds (I put the text on the backgrounds itself so I wouldn’t have to render text in pygame).

def success_failure_screen(self, clicked, img):
        bg = transform.scale(image.load(img), (1000,500)) # did not design the bg
        button = transform.scale(image.load('files\\assets//screens//button.png'), (300, 50))
        self.screen.blit(bg, (0,0))
        self.screen.blit(button, (370,250))
        col_0 = "#312400"
        col_1 = "#312400"
        col_2 = "#312400"
        game_font = font.Font("files\\assets\\screens\\Pixellari.ttf", 30)
        sb_rect = Rect(470,260, 150, 50)
        self.screen.blit(button, (370,310))
        h_rect = Rect(490,320, 150, 50)
        self.screen.blit(button, (370,370))
        q_rect = Rect(490,380, 150, 50)
        buttons = [q_rect, sb_rect, h_rect]
        l,m,r = mouse.get_pressed()
        pos = mouse.get_pos()
        if clicked: 
            for i, button in enumerate(buttons): 
                if button.collidepoint(pos):
                    if i == 0:
                        col_0 = "#966825"
                        return 'quit'
                    elif i == 1:
                        col_1 = "#966825"
                        return 'start'
                    else: 
                        col_2 = "#966825"
                        return "help"
        quit_button = game_font.render("Quit", True, col_0)
        start_button = game_font.render("Restart", True, col_1)
        help_button = game_font.render("Help", True, col_2)
        self.screen.blit(start_button, sb_rect)
        self.screen.blit(help_button, h_rect)
        self.screen.blit(quit_button, q_rect)
        return None

These functions don’t actually DO anything just yet because, well, we haven’t called them yet! In our main file’s run function, we need to add a couple of conditionals to decide which screen to render. But before everything, we need to make another variable called ‘clicked’ in settings.py and import it the same way we imported the other four variables. What this variable does is detects whenever the player clicks on the screen by turning True or False. Now in our main file’s run function, we can set settings.clicked = False so that it resets each time. Then, in the event loop, we check for the event of MOUSEBUTTONDOWN and set settings.clicked = True. We can then create a chain of conditionals :

if self.in_intro:
   if not mixer.music.get_busy():
      mixer.music.play(-1) #optional, starting music that i loaded at the beginning
   action = self.intro_screen(files.settings.clicked) #stores start, help or quit based on what self.intro_screen() returns
   if action == "start":
      self.in_intro = False
      mixer.music.stop()
   elif action == "quit":
      quit()
      sys.exit()
   elif action == "help":
      self.in_intro = False
      in_help = True
      mixer.music.stop()

The conditionals for help and success/failure will be sort of similar :

          elif in_help:
                action = self.show_help_screen(files.settings.clicked)
                if action == 'back':
                    in_help = False
                    if self.was_playing:
                        self.was_playing = False  # reset it
                        # resume level
                        continue  # next loop will rerun whichever screen it was on 
                    else:
                        self.in_intro = True
            else:
                if files.settings.success: # im using files.settings.success instead of success because i dont want to check the local copy, i want to check the global copy in the actual file
                    action = self.success_failure_screen(files.settings.clicked, 'files\\assets//screens//Success screen.png')
                    triumph = mixer.Sound('files\\assets\\sounds\\11l-victory_trumpet-1749704469779-358762.mp3')
                    if self.sound_played == False:
                        triumph.play(1)
                        self.sound_played = True

                    if action == "start":
                        files.settings.success = False
                        self.level = Level(self.screen)
                        self.sound_played = False
                        self.in_intro = False

                    elif action == "quit":
                        quit()
                        sys.exit()

                    elif action == "help":
                        self.in_intro = False
                        self.was_playing = True
                        in_help = True

                elif files.settings.failure:
                    action = self.success_failure_screen(files.settings.clicked, 'files\\assets//screens//Failure screen.png')
                    failure = mixer.Sound('files\\assets\\sounds\\losing-horn-313723.mp3')
                    if self.sound_played == False:
                        failure.play(1)
                        self.sound_played = True
                    if action == "start":
                        files.settings.failure = False
                        self.level = Level(self.screen)
                        self.sound_played = False
                        self.in_intro = False
                    elif action == "quit":
                        quit()
                        sys.exit()
                    elif action == "help":
                        self.in_intro = False
                        in_help = True
                        self.was_playing = True
                else:
                    check_for_help = self.level.run() #tweak the run function in level to return help if we clicked help there
                    if check_for_help == 'help':
                        self.was_playing = True
                        in_help = True

For this section, I made another class variable called was_playing to check if the game was already in session when the player clicked on the help manual (they might need help during the game) or whether they were on the intro screen. Based off of this, we choose which screen to re-render. Now, another problem I ran into was when rendering the success/failure screen, to be more specific, restarting the game once the player finished. I realized that simply setting success/failure = False did not start a NEW game. To do that, we create a new Level object instead which creates a new game afresh.

One problem in this game is that we don’t really let the player know how they’re doing, as in the player is unaware of how much health, points, coins etc. they have. We can add a small section on top of the screen during the game to display these stats since we’re already keeping track of them in our game. To do this, I made another class (the last one I swear) called UI.

class UI:
    def __init__(self):
        self.screen = display.get_surface()
        self.font = font.Font('files//assets//screens//Pixellari.ttf', 20)
        self.health_bar = Rect(115,10, h_width, h_height)
        self.h_col = "#F3E73F"


    def display(self, player):
        dark_overlay = Surface((350,220), SRCALPHA)
        dark_overlay.fill((0,0,0,100))
        self.screen.blit(dark_overlay, (0,0))

Right now, display only creates the transparent surface to put the stats on, but I added a bunch of code to create the health bar, display the score, current spells, magical objects collected etc.

Conclusion

https://github.com/fa22991/Python-top-down-game.git

Above is the link to the repo (for some reason the only way I could upload it was as a zip file).
Thank you for following along till the end!

Okay, so now that we’ve made a good chunk of our game, we can finally move on to making our enemies. Its always a good idea to start by outlining what you want to accomplish before writing any code. For the enemies, I wanted there to be 3 different types of fairies, each of which would have different attacks, damage, cooldowns and speeds, just to make the game less repetitive.

Let’s start by outlining these different parameters in settings.py, a file which we can import anywhere in our project to gain access to these parameters without creating many copies of the same data structure.

enemy_data = {
    'Fairy 1' : {'health': 100, 'damage': 5, 'attack_r' : 100, 'notice_r' : 200, 'resistance' : 10, 'speed':5, 'cooldown' : 80},
    'Fairy 2' : {'health': 100, 'damage': 3, 'attack_r' : 80,'notice_r' : 300, 'resistance' : 25, 'speed': 8, 'cooldown' : 50},
    'Fairy 3' : {'health': 100, 'damage': 10, 'attack_r' : 50, 'notice_r' : 100, 'resistance' : 30,'speed': 6, 'cooldown' : 100}
}

Each fairy begins with 100% health, which will decrease in accordance to player attacks. ‘damage’ specifies how much the player’s health will decrease when the enemy attacks it. ‘attack_r’ and ‘notice_r’ are the attack and notice radius respectively, a.k.a, the distances from the player at which the fairies can attack, and ‘notice’ (chase) the player. ‘resistance’ is how much the fairies will sort of bounce back when attacked by the player. ‘speed’ is self-explanatory and cooldown is the amount of time after which the fairies can re-cast their attacks.

The base of the enemy class should look something like this, following the general ‘Tile’ template we used for everything else :

from pygame import *
from settings import *
from math import *

class Enemy(sprite.Sprite):
    def __init__(self, pos, groups, type, path, player, obstacles):
        super().__init__(groups) #adds the sprite to the given groups
        self.sprite_type = type #when creating the map, I gave each entity a certain class. enemy sprites under "enemy", gems under "collectible" etc
        self.current_sprite = 0.0 #to keep track of the animation
        self.enemy_type = path.split('\\')[3].split('.')[0]
        self.speed = enemy_data[self.enemy_type]['speed']
        self.health = enemy_data[self.enemy_type]['health']
        self.resistance = enemy_data[self.enemy_type]['resistance']
        self.attack_r = enemy_data[self.enemy_type]['attack_r']
        self.notice_r = enemy_data[self.enemy_type]['notice_r']
        self.damage = enemy_data[self.enemy_type]['damage']
        self.cooldown = enemy_data[self.enemy_type]['cooldown']
        self.status = 'idle'
        self.direction = math.Vector2()
        self.image = image.load(path)
        self.rect = self.image.get_rect(topleft = pos)
        self.mask = mask.from_surface(self.image)
        self.player = player #passing in an instance of the player to get its position and stuff
        self.attack_timer = 0 #this'll make sense later
        self.last_hit = 0 #this too

self.enemy_type is the type of fairy (1,2 or 3) extracted from the path to the image passed into the enemy object. We then use this variable to access the correct type of fairy’s information (speed, damage etc.) from enemy_data, the list we imported from settings.py. You’ll recognize that most of the class variables match our player class, and that’s because they’re essentially the same type of thing, but perform a different role.

My images for the enemies were in the form of spritesheets, so I used the same load_sprite_sheet function as the player class to load them in. The animation function is a bit different here though, since there isn’t a whole new spritesheet to render when the enemy is attacking (we’ll ignore attacks right now and work on them later in our projectile class) :

def animate(self, dir):
        sheet = f"levels//level_1//tilesets//{self.enemy_type}_spritesheet.png"
        sprites = self.load_sprite_sheet(sheet, 32, 64)
        self.current_sprite += 0.15
        if self.current_sprite >= 3:
            self.current_sprite = 0
        if dir == 'right':
            self.image = sprites[int(self.current_sprite)] # if the player is towards the right of the player, 
                                                           # the enemies will face right
        else:
            self.image = transform.flip(sprites[int(self.current_sprite)], True, False) #if not, we flip the enemies
                                                                                        #so that they face left
        self.mask = mask.from_surface(self.image)

The logic behind the animation is still the same as our Player and Hazard classes. Enemy movement is a bit different however, since they can go over obstacles that the player cannot.

def move(self, direction):
        #vector subtraction. V (direction) = VB (player) - VA (enemy)
        old_rect = self.rect.copy()
        if direction.length() != 0: #if the distance between them is not 0
            self.direction = direction.normalize()
        else:
            self.direction = math.Vector2(0, 0)

        self.trymove('h', self.direction.x*self.speed, old_rect)
        self.trymove('v', self.direction.y*self.speed, old_rect)

move() calls trymove() in both the horizontal and vertical directions, passing in a velocity vector and the old position of the enemy as arguments. I realized that simply moving the enemies in the direction of the player wasn’t the best idea, because the fairies ended up overlapping with each other and moving towards the player as a single entity. As a solution, I created a function trymove() which checks for enemy-enemy collisions and separates them.

def trymove(self,dir, val, old_rect):
        copy = sprite.Group() # i dont know why but copy = self.obstacles.copy() wasnt working so i had to add its sprites to copy using add
        copy.add(self.obstacles)
        copy.remove(self) # remove self from the copy and check if it collides with any other fairies

        if dir == "h":
            if sprite.spritecollideany(self, copy, sprite.collide_mask) == None:
                self.rect.x += val

            for spr in sprite.spritecollide(self, copy, False, sprite.collide_mask):

                if spr.sprite_type == 'enemy': #if two sprites overlap, move them a little so they dont overlap
                    offset = self.rect.centerx - spr.rect.centerx, self.rect.centery - spr.rect.centery
                    distance = hypot(*offset)
                    if distance < 32 and math.Vector2(offset).length != 0: #if distance between their centers is less than half a tile which means they're in the same tile
                        push_vector = math.Vector2(offset).normalize() * 5 
                        self.rect.x += push_vector.x 
                        self.rect.y += push_vector.y
                else: #we don't care about collision with obstacles like trees, rocks etc.
                    self.rect.x += val

        if dir == "v":
            if sprite.spritecollideany(self, copy, sprite.collide_mask) == None:
                self.rect.y += val
            for spr in sprite.spritecollide(self, copy, False, sprite.collide_mask): 
                if spr.sprite_type == 'enemy': #if two sprites overlap, move them a little so they dont overlap
                    offset = self.rect.centerx - spr.rect.centerx, self.rect.centery - spr.rect.centery
                    distance = hypot(*offset)
                    if distance < 32 and math.Vector2(offset).length != 0: #if distance between their centers is less than half a tile which means they're in the same tile
                        push_vector = math.Vector2(offset).normalize() * 5 
                        self.rect.x += push_vector.x 
                        self.rect.y += push_vector.y
                else: #we don't care about collision with obstacles like trees, rocks etc.
                    self.rect.y += val

Creating the ‘Projectile’ class to handle enemy attacks

Okay, so now that we have animated enemies that move towards the player without overlapping, we can move on to making enemy attacks! To keep the enemy class nice and short, I created a new class ‘Projectile’ to handle projectile attacks.

from pygame import *
from math import *
from settings import *
import glob #I'll explain this later 

class Projectile(sprite.Sprite):
    def __init__(self, pos, direction, speed, groups, enemy_type, player, enemy_that_shot_projectile):
        super().__init__(groups)
        self.sprite_type = "projectile" #remember we need this when detecting collisions
        self.enemy_type = enemy_type #the type of enemy that shot the projectile, Fairy 1, Fairy 2 etc.
        self.image = Surface((10, 10), SRCALPHA)
        self.rect = self.image.get_rect(center=pos)
        self.mask = mask.from_surface(self.image)
        self.cooldown = enemy_data[enemy_type]['cooldown']
        self.direction = direction.normalize()
        self.speed = enemy_data[self.enemy_type]['speed']
        self.lifetime = 30  # Frames until it disappears so like 1/2s frame at 60 FPS
        self.screen = display.get_surface()
        self.current_sprite = 0 
        self.player = player
        self.attackable = groups[1] #self.attackable (I'll discuss what this is
        self.enemy_that_shot_projectile = enemy_that_shot_projectile #a copy of the enemy object that shot the projectile

Again, the projectile class is just another spin on the ‘Tile’ class template. The class variables that are new to this class have comments outlining their purpose. For this to work, we need to create a new group called ‘attackable’, which will include the enemies and their projectiles; these are as the name suggests, things the player can attack. Let’s head back to our map loader class and replace the part where we create the ‘enemies’ layer with the following code :

if layer == "enemies":
    if col in self.tileset.keys():
         #y + 64-16 because the images are 16x16px not 64x64
       enemy = Enemy((x,y+52), [self.visible, self.obstacles, self.attackable], 'enemy',self.tileset[col], self.player, self.obstacles)
       enemy.projectile_group = [self.visible, self.attackable]

This initializes an object of the Enemy class and adds it to self.attackable as well as self.obstacles and self.visible. It also creates a class variable called ‘projectile_group’ that contains self.visible and self.attackable, which we’ll use when creating an object of the Projectile class.

Fixing our Player class

One problem that I ran into when making this game was that if there was more than one enemy nearby and the player was attacking, regardless of which enemy the attack was directed at, it killed all of them. To fix this, I created a function within the Player class called ‘attack’, which finds the ‘target’ enemy, a.k.a the enemy at which the attack was targeted.

def attack(self, enemies):
        direction = self.current_state
        attack_range = 100
        target_enemy = None

        for enemy in enemies:
            if enemy.sprite_type == "enemy":
                dx = enemy.rect.centerx - self.rect.centerx
                dy = enemy.rect.centery - self.rect.centery

                if direction == "r" and 0 <= dx <= attack_range and abs(dy) < 32: #chooses the enemy in the most appropriate direction, right, left, top or down
                    target_enemy = enemy

                elif direction == "l" and -attack_range <= dx <= 0 and abs(dy) < 32:
                    target_enemy = enemy

                elif direction == "u" and -attack_range <= dy <= 0 and abs(dx) < 32:
                    target_enemy = enemy

                elif direction == "d" and 0 <= dy <= attack_range and abs(dx) < 32:
                    target_enemy = enemy

                if target_enemy:
                    break  # only one enemy

        if target_enemy:
            self.target = target_enemy
            target_enemy.rect.x += target_enemy.resistance
            target_enemy.rect.y += target_enemy.resistance
            target_enemy.health -= attack_data[self.weapon]['damage']

The parameter ‘enemies’ is a bit of a misnomer here since what we pass in is actually the entire obstacle group (that’s why we check the sprite type within the loop). The way to find the target enemy is quite simple, you just check which direction the player is facing and check which of the enemies lie within the same tile (<32px) and the attack range (100px). Once the target enemy is found, you push it back by its resistance and decrease its health by the amount of damage of the weapon used. We can then call this function in the players update function by adding the lines :

    def update(self):
        global attacked #declare attacked as false at the beginning of the program
        self.input()
        self.move()
        if self.is_attacking:
            attacked = True
            self.attack(self.obstacles)
            if time.get_ticks() - self.attack_time > 360: #360s is the cooldown
                self.is_attacking = False #we can attack again after 360s

Class ‘Projectile’ continued

Okay, back to the Projectile class. The animation stays exactly the same, so you can use the animate() function from any of the other classes. In the update function however, we need to write some code :

def update(self): #THIS IS THE PROJECTILE CLASS' UPDATE FUNCTION NOT PLAYER
        self.animate()
        self.rect.x += self.direction.x * self.speed
        self.rect.y += (self.direction.y * self.speed)
        self.lifetime -= 1
        if self.lifetime <= 0:
            self.kill()
        if hasattr(self.player, 'shield') and self.player.shield != None: #can't attack when shield is active         
            if self.mask.overlap(self.player.shield.mask, (self.player.shield.rect.x - self.rect.x, self.player.shield.rect.y - self.rect.y)):
                self.kill()                         #offset is how far the masks are away from each other 
        if self.mask.overlap(self.player.mask, (self.player.rect.x - self.rect.x, self.player.rect.y - self.rect.y)):
            if self.player.target == self.enemy_that_shot_projectile and self.player.is_attacking:
                self.kill() #shot disappears if it hits the player
            else:
                self.player.health -= enemy_data[self.enemy_type]['damage'] #player only takes damage if he doesnt hit the projectile coming from the target enemy
                self.kill() #shot disappears if it hits the player

The direction the projectile moves in is the same as the enemy’s direction vector, so we just pass it in when creating the object. Each time the projectile updates, we decrease 1 from its lifetime, so after about 30 seconds, the projectile should disappear. Now, disappearing doesn’t mean that it doesn’t have any effect, it just means that like a real projectile, it stops once it covers a certain range. If the player gets hit, we decrease its health by the amount of damage caused by the type of enemy that shot the projectile, as defined in settings.py. But if the player attacks the projectile, we simply kill the projectile using self.kill().

Lets import this class into our Enemy file and create a function to call it :

def shoot_projectile(self):
        direction = math.Vector2(self.player.rect.x, self.player.rect.y) - math.Vector2(self.rect.x, self.rect.y) 
        if direction.length() != 0:
            direction = direction.normalize()
        else:
            direction = math.Vector2(0, 0)

        projectile = Projectile(self.rect.center, direction, 5, self.projectile_group, self.enemy_type, self.player, self)
        return projectile.cooldown

Again, this is pretty standard logic. We figure out the direction vector (the difference of the player and enemy vector) and pass it into the projectile object. We then return the cooldown which will be our enemy’s attack timer. Now we can call this function in the enemy’s update method to make it attack.

def update(self):
        if self.health <= 0:
            self.player.points += 2 #increase 2 points only when the enemy is actually dead
            self.kill()

        player_vector = math.Vector2(self.player.rect.center)
        enemy_vector = math.Vector2(self.rect.center)
        distance = player_vector.distance_to(enemy_vector)
        direction = (player_vector - enemy_vector)

        if self.player.rect.x > self.rect.x :
            dir = "right"
        else:
            dir = "left"

        if distance <= self.notice_r and distance >self.attack_r:
            self.move(direction) 
        if distance <= self.attack_r and self.attack_timer<=0:
            self.attack_timer = self.shoot_projectile()

        self.animate(dir)
        if self.attack_timer > 0:
            self.attack_timer -= 1

        if hasattr(self.player, 'shield') and self.player.shield:
            shield_center = self.player.shield.rect.center
            enemy_center = self.rect.center

            dx = enemy_center[0] - shield_center[0] # since its enemy - shield it'll create a vector pointing from the SHIELD to the ENEMY (opp dir)
                                                    # if enemy is to the left, dx = -ve, which'll make it move more to the left, if enemy is to the right, dx = +ve, which'll make it move more to the right
            dy = enemy_center[1] - shield_center[1]
            distance = hypot(dx, dy)

            if distance < 100:
                # moves the enemy away from the shield along the vector pointing from the shield to the enemy
                direction = math.Vector2(dx, dy)
                if direction.length() > 0:
                    direction = direction.normalize()
                    self.rect.x += direction.x * self.speed
                    self.rect.y += direction.y * self.speed
                return  # stops normal movement like the projectile

To sum up, we check the coordinates of the player and the enemy: if the player is to the right of the enemy, the enemy faces right and vice versa. Then, if the player is within the enemy’s notice radius, we call the move() function to make it move closer, and once its close enough (within the attack radius), we call the shoot_projectile() function and set the attack timer to the projectile’s cooldown (which we returned, remember?). One special edition here is that I wrote a couple lines of code to actively move the enemy away from the player (in a vector pointing opposite to the direction of the player) if the player’s shield has been activated. This gives the effect of a protective halo around the player, because even though we block the projectile attacks in our code, its good to provide visual confirmation too.

Conclusion

That’s a wrap for part 3! Now that we’ve made our enemies, the only thing really left to do is to refine our code and add some UI/UX elements, which we’ll cover in the next part. We MIGHT also implement a pathfinding algorithm for the enemy or make them smarter using AI, but the game should work perfectly fine without it. Anyway, thank you for making it to the end and see you next time :)

• Properties : The player will have attributes like number of lives, health, coins and points, as well as the magic objects it has collected so far. Physically, it will be represented by an image, or rather a sequence of images called a sprite sheet which we will discuss later on.

• Movement : The player can move in all 4 directions, but not on top of objects in our ‘Boundaries’ layer, for example trees and rocks. The arrow keys will trigger these movements.

• Attack : The player will be able to attack the enemies when we press the ‘a’ key.

• Spells : The shield spell will automatically enable once the player as gathered 20 coins. Once it is activated, it will block out all enemies within the player’s radius and last for 8 seconds before the coin count resets. The other spell is the reveal spell, which can be cast by the player by pressing the ‘r’ key. It will last for 12 seconds, and will recharge after 24 seconds. The reveal spell, as the name suggests, will reveal the 5 hidden magic objects to the player.

• Collision : Collision detection will depend on the type of object the player collides with. For example, if the player collides with a gem, it will collect it and the coin count will increase. Collisions with a hazard will decrease the player’s lifespan, but there are no health-related repercussions to colliding with a boundary, it’ll just have to go around it.

Sprite animations

Let’s start with the easiest animation first, the hazards. I only have one type of hazard in my game, but you can use the same code for multiple. I don’t have a sprite sheet for hazards, but rather 4 consecutive images in the same folder that I’ll loop over to create animation. Let’s start adding the animation function to our Hazard class now :

def animate(self):
        self.current_sprite += 0.15
        if self.current_sprite >= 3:
            self.current_sprite = 0
        self.image = image.load(f'levels//level_1//tilesets//hazards//plant_{int(self.current_sprite)}.png') #simple sprite animation. this is why i made a class for hazards and didnt just use tile
        self.mask = mask.from_surface(self.image)

This function uses the class variable current_sprite to keep track of the animation frame we are currently on. Each time our game updates, which is at 60 frames per second, our current_sprite increases by 0.15. Now the reason we increase it by that and not 1 is so that the animation isn’t too fast. Once all the images in the sequence have loaded, we reset current_sprite to 0 to repeat the animation. My hazard images are named ‘plant 0’ … ‘plant 3’ so I set self.image to the directory they’re in, changing the image number according to current_sprite each time.

Moving on to animating some actual sprite sheets, lets animate the player. We’ve already decided on what the player can do, the animation just has to reflect that. To recap, the player can move or remain idle in all 4 directions + it can attack.

Let’s start by writing a function to load the sprite sheet :

def load_sprite_sheet(self, path, frame_width, frame_height):
        sheet = image.load(path).convert_alpha()
        sw, sh = sheet.get_size()
        #Note: the image you're using should have proper sprites of the size frame_width * frame_height
        #at proper space increments.
        sprites = []
        for y in range(0, sh, frame_height):
            for x in range(0, sw, frame_width):
                frame = Surface((frame_width, frame_height), SRCALPHA)
                frame.blit(sheet, (0, 0), (x, y, frame_width, frame_height)) #blit different parts of the spritesheet 
                sprites.append(frame)

        return sprites

This function basically returns a list containing images from a given sprite sheet, by cropping parts of it onto different transparent surfaces of frame_width and frame_height. Since our sprite is 64×64 px, these 2 variables will almost always be those dimensions but I haven’t hardcoded it to be more flexible.

We will then use this function to load our movement (which I call running in my code) and attack spreadsheets in the function below :

 def load_images(self):
        states = {}
        run_right = self.load_sprite_sheet('assets//sprites//level_1_mc//running.png', 64, 64)
        run_left = [transform.flip(img, True, False) for img in run_right]
        run_up = [transform.rotate(img, 90) for img in run_right]
        run_down = [transform.rotate(img, -90) for img in run_right]
        #...

‘Running.png’ is a sprite sheet of the player running in the RIGHT direction. Notice that we can get a sprite sheet of the player running left just by flipping the images horizontally? Well that’s what we’re doing in line 4! Since run_right contains a list of consecutive images of the player running right, we use array comprehension to create a new array run_left which stores image in run_right after flipping it horizontally. The issue at hand here, is that in the asset pack I used, there were no sprite sheets for upward and downward movement (front and back profiles of the MC). So I came up with a very wonky solution, which was to just rotate the player 90 degrees to make it look like it was going up, and -90 degrees to make it run down.

The last thing left to do in this function is to add all these lists to our dictionary states. To make directions easier to set, I represent them with their initial, as in r for right, l for left etc. We can then define states for each of the directions as states[‘running_r’] = run_right and changing the key and value for each direction. Once you have movement down, you can do the exact same for attack in all direction.

Now, before we get to writing our animate() function, we need to know when to animate the player. Let’s write a function to get input from the user to determine this :

    def input(self):
        self.animate = False
        keys = key.get_pressed()
        if keys[K_RIGHT]: 
            self.direction.x = 1
            self.current_state = "r"
            self.animate = True

        elif keys[K_LEFT]:
            self.direction.x = -1 
            self.current_state = "l"
            self.animate = True
        else:
            self.direction.x = 0

        if keys[K_UP]:
            self.direction.y = -1 
            self.current_state = "u"
            self.animate = True
        elif keys[K_DOWN]:
            self.direction.y = 1 
            self.current_state = "d"
            self.animate = True
        else:
            self.direction.y = 0

        if keys[K_a]:
            self.is_attacking = True
            self.weapon = "attack"
            self.attack_time = time.get_ticks()

        if keys[K_c] and 'special' in self.spells: #unlock special weapon if the player has collected at least 30 coins. only this special weapon can kill the ending fairies
            self.is_attacking = True
            self.weapon = "special"
            self.attack_time = time.get_ticks()

This is a pretty simple function, it detects which key has been pressed and sets the current_direction to it. If we press the ‘a’ key, is_attacking becomes True . We can now animate using all these functions.

def animate_player(self):
        direction = self.current_state

        if self.animate:
            if self.is_attacking:
                animation = self.sprite[self.weapon+"_" + direction]
                self.current_sprite += 0.15
                if self.current_sprite >= len(animation):
                    self.current_sprite = 0
                self.image = animation[int(self.current_sprite)]
            else:
                animation = self.sprite['running_' + direction]
                self.current_sprite += 0.15
                if self.current_sprite >= len(animation):
                    self.current_sprite = 0
                self.image = animation[int(self.current_sprite)]
        else:
            if self.is_attacking:
                animation = self.sprite[self.weapon+"_" + direction]
                self.current_sprite += 0.1
                if self.current_sprite >= len(animation):
                    self.current_sprite = 0
                self.image = animation[int(self.current_sprite)]
            else:
                self.image = self.sprite['idle_' + direction]

        self.mask = mask.from_surface(self.image)
        self.rect = self.image.get_rect(center=self.rect.center)

This is a variation on our initial animate function that we used for hazards. Before you do this, you’ll need to call load_images() in your constructor and store the dictionary states in a class variable. I call this variable sprite.

Remember how we created states? We set an action + ‘_’ + r, l, u or d as the key and the corresponding list of images as the value. Well, that dictionary is precisely what we use now to load the correct set of images and run the animation.

For enemies, use the same code to load the sprite sheets and then the animation function from hazards (since enemies don’t require user input to determine their direction like the player). Later, when we code our enemy class, we’ll modify the function slightly to make sure the enemies always face the player.

The player

To construct the player class, we’ll start by translating some of the things we wrote above, about what we wanted the player to do, into code. Beginning with the constructor :

class Player(sprite.Sprite):
    def __init__(self, pos, groups, obstacles):
        super().__init__(groups)
        self.sprite = self.load_images()
        self.current_sprite = 0.0
        self.animate = False
        self.current_state = "r"
        self.image = self.sprite["idle_"+self.current_state]
        self.rect = self.image.get_rect(topleft = pos)
        self.direction = math.Vector2() #x and y position of player as a vector. keyboard input will change these values
        self.obstacles = obstacles
        self.mask = mask.from_surface(self.image)
        self.coins = 0
        self.points = 0
        self.is_attacking = False
        self.attack_time = None
        self.weapon = "attack"
        self.current_spell = None
        #UI healthbar
        self.condition = {'health' : 100, 'attack' : 10, 'spells' : 1, 'weapons' : 1, 'speed' : 7, 'lives' : 3}
        self.health = self.condition['health']
        self.spells = ['regular']
        self.speed = self.condition['speed']
        self.lives = self.condition['lives']
        self.magic_objs = []
        self.reveal_timer = 0

So… that’s a lot of variables, but we’ll use them all some way or the other I promise. Moving on to collision detection :

      def collision(self,dir, old_rect):  
        if dir == 'horizontal':
            for sprite in self.obstacles:
                if self.mask.overlap(sprite.mask, (sprite.rect.x - self.rect.x, sprite.rect.y - self.rect.y)):
                    self.rect.x = old_rect.x #undo the move
                    if sprite.sprite_type == 'collectible':
                        sprite.kill() 
                        self.coins += 1
                        self.points += 1
                    if sprite.sprite_type == 'magic_obj':
                        sprite.power_up(self)
                        sprite.kill() # i realized that if i killed the obj to remove it from the screen, that would mean removing it from all groups, which would mean that it didnt get updated so the cooldown wouldnt work
                                        #instead i add it to a group call collected and update that group in my level class
                        self.collected.add(sprite)
                        self.magic_objs.append(sprite.magic_type)
                        self.points += 5
                    if sprite.sprite_type == "hazard" and self.current_spell!='shield_circle':
                        time.wait(400)
                        self.health -= 30

collision() takes in 2 parameters, dir , which can be either horizontal or vertical and old_rect, which stores the old position of the player so that we can undo a move. First, we check for horizontal collisions, then vertical so we know whether to undo the move in the x direction or the y. We start with looping over all the obstacles, and checking for collisions with each one of them. Let me break down the line that actually does the check :

if self.mask.overlap(sprite.mask, (sprite.rect.x - self.rect.x, sprite.rect.y - self.rect.y))

So what I’m doing here, is basically checking if there is any overlap between the masks of the obstacle sprite and the player sprite. Remember from part 1 how I created a variable self.mask in the class template for Tile, which we used as a base for all classes? Well what that mask is, is a precise pixel by pixel outline of the image we use as a sprite. Mask collisions are much more precise than the usual rect collisions which you may have seen, thus to make things smoother, I’m using those here.

The rest is pretty straightforward, if we collide with an obstacle of the type ‘Collectible’, we remove it from the screen (to show that it’s been collected of course), by ‘killing’ it. Then we increase our coin count and points by one. Collisions with magic objects and hazards do exactly what the code implies.
Also, ignore this part in the third to last line for now : self.current_spell!='shield_circle'

You can now copy-paste this block and make dir == ‘vertical’ instead. Okay so now we have - collisions, animations and input down. Let’s tackle movement next.

def move(self):
        old_rect = self.rect.copy() #store the prev positions incase i need to undo a move in collision
        #When we press both up/down and right/left keys together, the player moves significantly faster. 
        #Here, I check if the vector has a magnitude, which is possible if there is movement in both the axis. 
        #If there is, I normalize the vector to have a magnitude of 1 so that speed in that direction stays the same as the speed moving only horizontally or vertically
        if self.direction.magnitude() != 0: 
            self.direction = self.direction.normalize()
        self.rect.x += self.direction.x * self.speed
        self.collision("horizontal", old_rect) #check for horizontal collisions when moving on the x axis so we dont accidently reverse the y move
        self.rect.y += self.direction.y * self.speed
        self.collision("vertical", old_rect) #check for vertical collisions when moving on the y axis so we dont accidently reverse the x move

Remember to call both move(), animate_player() and input() in your update() method.

We can now work on our spell function.

def cast_spell(self):
        keys = key.get_pressed()
        if keys[K_r] and self.current_spell == None and self.can_cast_again:
            self.current_spell = "reveal"
            self.cast_time = time.get_ticks()
         #What this segment does, is adds the hidden magic objects 
         #to self.visible, which makes them show up on screen.
            if hasattr(self, 'hidden'):
                for spr in self.hidden:
                    self.groups()[0].add(spr)
                    self.obstacles.add(spr)
            self.dark_overlay = pygame.Surface(display.get_surface().get_size(), pygame.SRCALPHA)

        if self.coins >= 25 and self.current_spell == None:
            self.cast_time = time.get_ticks()
            self.current_spell = 'shield_circle'
            shield_img = transform.scale(image.load('assets//sprites//level_1_mc//shield_circle.png'), (100,100))
            self.shield = Tile((self.rect.centerx, self.rect.centery), [self.groups()[0], self.obstacles], 'protection', shield_img) 

        #self.groups()[0] is just visible sprites. i add it to visible sprites when its active and remove it by killing it when not

This is the implementation of the spells part of the player we outlined at the beginning. We check if the player is currently under any spell, and if the cooldown for the last one has worn off (self.can_cast_again). Then, if the play has pressed the ‘r’ key, we activate the reveal spell and save the time in self.cast_time (so that we can calculate how much time has passed since we cast it, and de-activate it accordingly).

If the player has collected more than 25 coins, we activate the shield spell and draw a shield around the player.

self.dark_overlay is a transparent-y black surface the size of the screen.
We can’t actually draw anything on screen through this function, but we can access the class variables and draw them in our Level class’ draw function, as such :

if hasattr(player, 'dark_overlay') and player.dark_overlay != None:
   player.dark_overlay.fill((0, 0, 0, 180))
   draw.circle(player.dark_overlay, (0, 0, 0, 0), player.rect.center- self.offset, 64) #circling the player and the objects with a transparent circle to give a flashlight effect
   for obj in player.hidden:
       draw.circle(player.dark_overlay, (0, 0, 0, 0), obj.rect.center - self.offset, 64) 
   self.screen.blit(player.dark_overlay, (0, 0))

Finally, for now, we can add some stuff to our player’s update function to deal with spell de-activation.

        if self.health <= 0:
            self.lives -= 1
            self.health = 100

        self.cast_spell()

        if self.current_spell == 'shield_circle' and hasattr(self, 'shield'):
            self.shield.rect.center = self.rect.center

        if self.current_spell:
            if time.get_ticks() - self.cast_time >= protection[current_level][self.current_spell]['lasts_for']:
                if self.current_spell == 'shield_circle': #once the shield circle is over i kill the shield
                    self.shield.kill() #remove the shield from the screen.
                elif self.current_spell == 'reveal':
                    self.cast_time = time.get_ticks()
                    self.can_cast_again = False
                    for spr in self.hidden:
                        self.groups()[0].remove(spr) # remove trhe objects from sight
                        self.obstacles.remove(spr)
                    self.dark_overlay = None

                self.current_spell = None
                self.coins = 0 #resets the coin count each time so i can activate the shield again and again when the criteria is met
                print('over') #just print debugging 


        if time.get_ticks() - self.cast_time >= protection[current_level]['reveal']['cooldown']:
            self.can_cast_again = True #after 24 seconds

Conclusion

And that’s it for part 2! There is a lot you can customize here, from spells to movement and even attack logic, so don’t be afraid to tweak and play around :)

Main character sprite sheet : https://14collective.itch.io/fantasy-mice

Designing the map

Okay, so before we even get started with the code, we’ll need to design the map of the level. Now if this was a simpler level, we could’ve gotten away with creating a 2D array to store map information, but since we have multiple layers (which I will soon discuss), we’ll need something more large-scale. For that purpose, we’ll be using Tiled as our editor!

To get started, download the latest version of Tiled (http://www.mapeditor.org/download.html) on your device and follow the installation guide. Once you have it installed, go to ‘New’ and select ‘New Map’, then create a 40×30 map with 64×64px tiles. These are the dimensions I used for mine, but you can adjust them to make yours larger or smaller. Now, we can get to the layers.

Layers in a map are used to group elements of the same type, or rather elements that serve the same purpose, together. In our game, we’ll have 7 layers :

• Background : As the name suggests, the background contains paths and greenery etc., basically anything the player can walk on. You can use an image for this or design it manually by placing tiles.

• Boundaries : This layer will contain the tiles lining the edge of the map to prevent the player going out of the screen. Also, it will have the solid objects like trees, rocks etc. , that the player cannot walk on.

• Collectibles : This layer will contain gems that the player can pick up along the way.

• Enemies : We’ll position the enemies throughout the map and put the attack logic in our code.

• Hazards : Traps or obstacles that can harm the player.

• Magic Objects : This layer will store the position of the 5 magic objects the player will have to collect in the game.

• Portal : The portal is the gateway to crystal castle (the game destination). This layer will only contain 1 element and that is the portal placed at the end of the map.

The reason I’ve separated these elements into layers is because each layer will be loaded as objects of its corresponding class in my code later on. For example, all gems will be objects of the Collectible class. Remember, these layers should be TILE layers.

This is what your background should somewhat look like at this point. On top of this, we’ll then place our objects in their corresponding layers.

To add boundaries, hazards, collectibles etc., you will first have to import their images as a tile set. You can do this by heading over to file and creating a new tile set, selecting the image of your choice as the source. Once you have these tile sets ready, you can start placing them all over the map.

Now the only thing left to do is to export this map so we can use it in our code. To do this, we’ll export the background as an image separately and the rest of the layers together as a .tmj file.

Project setup

To start setting up the project, create two folders, one to store level information and the other for assets, such as the sprite sheets. The directory should look something like this :

In this part we’ll deal only with level.py, map_loader.py and main.py so you can ignore the rest for now. But first, remember to import all the image files you used to create your tile sets in Tiled into your assets or levels folder. My tile sets are stored in levels (this will be important later on). The main file is fairly straightforward, we import the libraries we need along with the Level class from our level.py file, and initialize the game loop.

import sys, pygame
from pygame import *
from level import Level

class Game:
    def __init__(self):
        pygame.init()
        self.screen = pygame.display.set_mode((1000, 500))
        self.clock = time.Clock()
        self.level = Level(self.screen)

    def run(self):
            while True:
                for evt in event.get():
                    if evt.type == QUIT:
                        quit()
                        sys.exit()
                self.level.run() #we'll write this function later
                pygame.display.update()
                self.clock.tick(60)

if __name__ == '__main__':
    game = Game()
    game.run()

Next, we can start writing our level class. This will initialize two sprite groups, visible sprites, and obstacle sprites. As the names suggest, visible sprites contains all the sprites that will get drawn on the screen whereas obstacle sprites are the sprites we will detect player collision with.

from pygame import *
from map_loader import Map

class Level:
    def __init__(self, screen):
        self.screen = screen
        #visible sprites is the only group that I'll draw on the screen. Obstacles are sprites that can collide with the player
        self.visible = Camera()
        self.obstacles = Camera()
        self.attackable = sprite.Group()
        self.hidden = sprite.Group()
        self.player = None #we havent made the player yet
        self.map = Map(self.visible, self.obstacles, self.player, self.attackable, self.hidden) #we'll do this next
        self.ui = UI()


    def run(self):
        self.visible.draw(self.player)
        self.visible.update()
        self.hidden.update() #update groups
        return

You will notice that both visible and obstacle are not initialized as sprite groups, but as instances of the Camera class. This is because I wanted to create the illusion of a camera following the player, and to do that you need to move everything else around the player in a way that centers it. We can accomplish this by offsets.

In level.py, create another class called Camera that inherits from Pygame’s sprite group.

class Camera(sprite.Group):
    def __init__(self):
        super().__init__() #initialize the parent class of sprite.Group()
        self.screen = display.get_surface()
        self.offset = math.Vector2()
        self.background = image.load('levels\\level_1\\level_data\\background.png').convert()
        #this is the background we exported as an image from tiled
        self.bg_rect = self.background.get_rect(topleft = (0,0))

    def draw(self, player): #overwriting the inbuilt draw function
        #To create the illusion of a camera following the player, I add an offset to the position of the sprites surrounding the player based off the player's position
        #2528 = (64*40 => size of 1 tile x no. of horizontal tiles) - 64//2 (tilesize//2)
        if player.rect.x < 2528 - WIDTH//2: #right out of bounds
            self.offset.x = player.rect.centerx - (self.screen.get_width()//2) #to center the player amidst the camera
        #1888 = (64*30 => size of 1 tile x no. of vertical tiles) - 64//2 (tilesize//2)
        if player.rect.y < 1888 - HEIGHT//2: #bottom out of bounds
            self.offset.y = player.rect.centery - (self.screen.get_height()//2)

        if player.rect.x < WIDTH//2: #left. if the player moves left past half of the current screen, there's no offset otherwise we get a bit of the black screen
            self.offset.x = 0
        if player.rect.y < HEIGHT//2: #top
            self.offset.y = 0
        #create the background here so its always below the sprites
        self.screen.blit(self.background, (self.bg_rect.topleft - self.offset))
        for sprite in self.sprites():
            offset_pos = sprite.rect.topleft - self.offset
            self.screen.blit(sprite.image, offset_pos)

Now, you have your player centered amidst the screen. However, you don’t have a player yet, so this won’t work. In order to see what we have built so far, you can use a placeholder image for self.player.

Loading the map

Finally, we get to the main part, or at least the one I struggled with quite a bit. But, before we get to it, you’ll need to initialize empty classes for enemy, player, hazard, magic object and portal, along with a general class ‘Tile’ which’ll act as the base for any tile on our map. We’ll use the following template for all these classes-

from pygame import *

class Tile(sprite.Sprite):
    def __init__(self, pos, groups, type, surface = surface.Surface((TILESIZE, TILESIZE), SRCALPHA)):
        super().__init__(groups) #adds the sprite to the given groups. 
        self.sprite_type = type  
        self.image = surface
        self.rect = self.image.get_rect(topleft = pos)
        self.mask = mask.from_surface(self.image) #I'll explain this later on

Now, in the main file, create a class called Map and initialize self.visible, self.obstacles, and self.hidden with the passed-in params. If you open up your map’s .tmj file, you’ll see that it contains JSON code, which we’ll need to read properly using the python JSON module.

Next, we’ll need to create 3 functions. The first will format the JSON code into a 2D array containing the locations (GIDs) of objects in each layer. The second, will create a tile set in the form of a dictionary, associating each tile’s GID (global index) to its corresponding tile image (our json file kinda does this already, but it associates each GID to its tile set file which is a .tmx file, we’ll clean this up so that it actually renders in pygame). The third will utilize these functions to create the actual map.

Let’s start with the first one.

 def format(self,data):
        data_formatted = []
        c = 0
        for i in range(30): #30 rows in 1 column
            row = data[c:40+c] #40 columns in 1 row
            data_formatted.append(row)
            c += 40
        return data_formatted

In our tmj file, the data for each layer isn’t stored as a 2d array of 30 rows and 40 columns, but instead as 1 massive 1D array of 1200 values. This function breaks it down into a 2D array with the same dimensions as our map.

Then, we need to write a function to create the tile set within python :

def create_tileset(self, data):

        def image_path(path):
            return f"levels\\level_1\\tilesets\\{path.split('/')[2].split('.')[0]}.png"

        tileset = {} 
        for tile in data:
            tileset[tile['firstgid']] = image_path(tile['source'])

        return tileset

Okay I lied, its actually 1 nested function, but its pretty simple nonetheless. Let’s breakdown create_tileset() first. Our .tmj file contains an object literal (similar to a dictionary in python) where one of the keys is ‘tilesets’. It looks something like :

"tilesets":[
        {
         "firstgid":1,
         "source":"..\/tilesets\/forest.tsx"
        },
        ... ]

Each tile set as you can see contains a ‘first GID’ and a ‘source’ which is the path to the tileset’s .tsx file in Tiled. Our loop creates a python dictionary setting this firstgid as a key and the source as its corresponding value after formatting it properly using image_path(), which creates a path to the tile’s image file by taking in the path to its .tsx file. In the tileset above, for example, image_path() will take in the source "..\/tilesets\/forest.tsx", remove the part after / and before .tsx which is forest, aka, the name of the tile, and position it between “levels\level_1\tilesets\ .png” which is where its image is stored. You can adjust this location according to where your tilesets are stored.

Finally, we get to the main function. You’ll need to initialize empty arrays for each of the layers, so we can extract information from our tiled file into them. Then, we’ll use the json module to actually load the file and read information from it, like so :

def create_map(self):
        magic =  ['key', 'amulet', 'potion', 'cheese', 'scroll'] #the 5 magical objects we placed around the map
        shuffle(magic) #randomize the positions everytime 
        boundary = []
        collectible = []
        hazard = []
        enemy = []
        portal = []
        magic_obj = []
                    #path to your .tmj file
        with open('levels\\level_1\\level_data\\level1_3.tmj', 'r') as file:
            data = json.load(file)
            self.tileset = self.create_tileset(data['tilesets'])

            for layer in data['layers']:
                if layer['name'] == "Boundaries":
                    boundary = layer['data']
                if layer['name'] == "collectible":
                    collectible = layer['data']
                if layer['name'] == 'enemies':
                    enemy = layer['data']
                if layer['name'] == 'hazards':
                    hazard = layer['data']
                if layer['name'] == 'portal':
                    portal = layer['data']
                if layer['name'] == 'magic_objects':
                    magic_obj = layer['data']
        layers = {
                     'boundaries' : self.format(boundary),
                     'collectibles' :   self.format(collectible),
                     'enemies' :   self.format(enemy),
                     'hazards' :   self.format(hazard),
                     'portal' :   self.format(portal),
                     'magic_objs' :   self.format(magic_obj)
                    }

Make sure to match the names of the layers exactly to how they are in your json file, or you won’t be reading in any data. Now, we can loop over each layer in layers and create objects for each tile.

#the following loop iterates over all the layers inside my map, and creates an instance of the appropriate class based
        #on what the layer contains. for example, the portal is an instance of the Portal class. 
        #based on whether or not i want them to show up on screen, i add them to the visible sprites group (self.visible) and all the obstacles
        #are in self.obstacles. 
        for layer, map in layers.items():
            for rind, row in enumerate(map):
                for cind, col in enumerate(row):
                    if col != 0:
                        i = 0
                        x = cind * TILESIZE
                        y = rind * TILESIZE
                        if layer == "boundaries":
                            if col in self.tileset.keys():
                                surf = image.load(f'{self.tileset[col]}').convert_alpha()
                                Tile((x,y), [self.visible, self.obstacles], 'boundary',surf) 
                        if layer == "collectibles":
                            if col in self.tileset.keys():
                                surf = image.load(f'{self.tileset[col]}').convert_alpha()
                                #y + 64-16 because the images are 16x16px not 64x64
                                Tile((x,y+52), [self.visible, self.obstacles], 'collectible',surf)
                        if layer == "hazards":
                            if col in self.tileset.keys():
                                surf = image.load(f'{self.tileset[col]}').convert_alpha()
                                #y + 64-16 because the images are 16x16px not 64x64
                                Hazard((x,y+32), [self.visible, self.obstacles], 'hazard',surf)
                        if layer == "enemies":
                            if col in self.tileset.keys():
                                #y + 64-16 because the images are 16x16px not 64x64
                                enemy = Enemy((x,y+52), [self.visible, self.obstacles], 'enemy',self.tileset[col], self.player, self.obstacles)

                        if layer == "portal":
                            if col in self.tileset.keys():
                                surf = image.load(f'{self.tileset[col]}').convert_alpha()
                                #y + 64-16 because the images are 16x16px not 64x64
                                Portal((x,y+52), [self.visible, self.obstacles], 'portal',surf)

                        if layer == "magic_objs":
                            print(col)
                            surf = image.load(f'assets\\magic_objs\\{magic[col-1]}.png').convert_alpha()
                            #y + 64 because the images are 16x16px not 64x64
                            magic_object((x,y), [self.hidden], f'{magic[col-1]}',surf)

You’ll notice that magic objects are not added to either of self.visible or self.obstacles, but rather to self.hidden. This is because we’ll reveal them with a special command, and then make them visible and collide able. Therefore they are hidden for the time being.

Now another interesting thing, is that enemies are not passed in the image as a surface, rather they are passed the path directly. This is because the enemies are animated, and their image is actually a spritesheet, not a single image. Later when we write our enemy class, we’ll write a function to break down this spritesheet and add animations but you can ignore that for now.

Let me explain what this line does : surf = image.load(f'{self.tileset[col]}').convert_alpha()

Remember how we created a tileset corresponding firstgids to sources earlier? well, we use that same tileset to access the image path at ‘col’ , the value of the layer’s 2D array at that index, and we know this array contains GIDs of the tiles, so all we’re doing is getting the image for that specific tile on the map and passing it into the tile’s object to draw on the screen.

Conclusion

I know this seems like a lot to take in but just experiment with the data file and you’ll see why and how our functions work. In the meantime, try working on animating the player and enemies yourself.
See you in part 2, happy coding!

What exactly is color?

We know color to be the result of electromagnetic radiation within a specific range of wavelengths (the visible spectrum), however, astronomers have a different definition. In astronomy, color is defined as the difference between the magnitude of a star in one passband and the magnitude of the same star in a different passband. This basically means that color (also referred to as the color index) is the difference between the brightness of a star when viewed from two different wavelength filters. The most common wavelength filters are ‘U’ (ultraviolet), ‘B’ (blue), ‘R’ (red), ‘V’ (visible), and when light is viewed through them, we get the brightness of the star in that specific wavelength range.

How does color relate to temperature?

The color of a star is a crucial indicator of its temperature. This relationship is based on the principles of black-body radiation and Wien's Law. Blackbody radiation describes the connection between an object's temperature and the wavelength of the electromagnetic radiation it emits. A black body is an ideal object that absorbs all the electromagnetic radiation it encounters. It then emits thermal radiation in a continuous spectrum based on its temperature.
Stars act similarly to blackbodies, which helps explain why they have different colors. Red stars are cooler and emit most of their radiation in the red wavelengths. In contrast, stars that appear blue or white are much hotter, and emit most of their radiation in ultraviolet/blue wavelengths.

We don't see any stars as green because stars with peak wavelengths in the green also emit a lot of radiation in the red and blue parts of the spectrum. Our eyes mix all these colors, and we perceive them as white. Much cooler objects, like planets and humans, emit most radiation in the infrared (this is why body heat shows up on infrared cameras!). Even cooler objects emit microwaves and radio waves.

As the diagram above shows, an increase in temperature leads to a decrease in wavelength.

Wien's Displacement Law states that the peak wavelength of emission from a blackbody is inversely proportional to its absolute temperature. In simple terms, as an object gets hotter, the color of its emitted light shifts toward shorter (bluer) wavelengths. Cooler objects radiate longer (redder) wavelengths. This is because hot objects have more energy (thermal), which allows them to give off a larger fraction of their energy at shorter wavelengths (higher energies) than cool objects. We can also describe our observation that hotter objects radiate more power at all wavelengths in a mathematical form. If we sum up the contributions from all parts of the electromagnetic spectrum, we obtain the total energy emitted by a blackbody, given by the Stefan-Boltzmann law :

𝐸=𝑒𝜎𝑇⁴

The table below gives some example colors and their associated temperatures :

Color Indices

To figure out a star's exact color, astronomers usually check out its brightness using filters that only let through certain colors of light. They use a set of filters that measure brightness in ultraviolet, blue, and yellow light. These filters are called U (for ultraviolet), B (for blue), and V (for visual, which is yellow). They let through light at around 360 nm, 420 nm, and 540 nm, respectively. The brightness through each filter is shown in magnitudes. The difference between two of these magnitudes, like between blue and visual (B–V), is known as a color index.

Astronomers have decided that in the UBV system, the ultraviolet, blue, and visual magnitudes are set so that a star like Vega, with a surface temperature of about 10,000 K, has a color index of 0. The B–V color indexes for stars can go from −0.4 for the really blue stars, which are around 40,000 K, to +2.0 for the really red ones, which are about 2000 K. The Sun's B–V index is about +0.65. Just remember, the B–V index is always calculated as the “bluer” color minus the “redder” one.
But, why is this so? Well, for a color index, let’s say B-V, a negative value implies that Vmag > Bmag while a positive value implies that Vmag < Bmag. Since magnitudes are inversely proportional to brightness, if B-V is negative, we can conclude that the brightness in B is greater than the brightness in V, since the magnitude in B is less than the magnitude in V. Similarly, if B-V is positive, it implies that the brightness in V is greater than the brightness in B, making it appear ‘redder’.

How does this matter in astronomy?

A celestial body’s color is crucial in astronomy, because not only does it tell us a lot about its temperature, it also reveals the body’s chemical makeup, age, and even if there's interstellar dust making it look redder than it is. By creating color-magnitude diagrams from these indices, astronomers learn about how stars evolve and the history of star clusters and galaxies. In some cosmic mergers, changes in the color of electromagnetic radiation can also show the formation of heavy elements like gold and neodymium, giving us a glimpse into the chemical processes happening.

…And that concludes this article. Thank you for reading till the end, and happy learning!

Implementing a JavaFX application with IntelliJ IDEA

~ ( IntelliJ IDEA ide). To get started, create a new project selecting JavaFX as the generator.

Once you create the project, open the .java file and start writing your code after the JavaFX package import statement (package com.example.javafx;) Other than this, we also need to import the javafx.application.Application class which contains the start() method, the entry point of any JavaFX application as well as the javafx.stage.Stage; class which forms the parameter for the start() method.

A Stage object represents a window on the computer's screen. The stage that is passed as a parameter to start() is constructed by the system. It represents the main window of a program, and is often referred to as the "primary stage." A program can create other windows by constructing new objects of type Stage.

Once everything has been imported, we need to create a public class. Since this is going to be an application, our class needs to extend an application. Inside the class, there will be two methods. A main method (makes things easier to call) and a start method that is included in the javafx.application.Application; class. Your code should look something like this:

Any element that we now create in the start method will be added to a scene() which will then be added to the stage that is passed to the start() method at the top. The stage, which creates a window on the screen can contain many components such as menus, buttons, input boxes or even drawing areas for 2d or 3d shapes.

Let's see how you can create some of these components:

1.Creating shapes :

JavaFX provides a variety of shape classes like Rectangle, Circle, Line, and Ellipse that you can use to draw basic shapes. For example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Ellipse;
import javafx.stage.Stage;

public class ShapeDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Create shapes
        Rectangle rectangle = new Rectangle(50, 50, 100, 75);
        rectangle.setStyle("-fx-fill: lightblue;");

        Circle circle = new Circle(200, 100, 50);
        circle.setStyle("-fx-fill: lightgreen;");

        Line line = new Line(50, 200, 250, 200);
        line.setStyle("-fx-stroke: black;");

        Ellipse ellipse = new Ellipse(150, 300, 80, 50);
        ellipse.setStyle("-fx-fill: lightcoral;");

        // Create a layout container
        Pane pane = new Pane();
        pane.getChildren().addAll(rectangle, circle, line, ellipse);

        // Create a Scene and set it on the Stage
        Scene scene = new Scene(pane, 300, 400);
        primaryStage.setScene(scene);
        primaryStage.setTitle("JavaFX Shapes");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Here:

Rectangle: Created with position (50, 50) and size (100, 75).

• Circle: Centered at (200, 100) with a radius of 50.

• Line: Drawn from (50, 200) to (250, 200).

• Ellipse: Centered at (150, 300) with radii 80 and 50.

2.Buttons and events :

Buttons are triggers used to perform certain actions, that can be customized using event handlers. Let's look at an example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class ButtonDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click Me");
        button.setOnAction(e -> button.setText("Button Clicked!"));

        VBox vbox = new VBox(button);
        vbox.setSpacing(10);

        Scene scene = new Scene(vbox, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.setTitle("JavaFX Button");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

3.Creating Menus

A menu bar, commonly seen in navbars of websites, contains items in a certain order to make them more accessible. Here's how you can create one with file and edit menus :

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MenuDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Create menu items
        MenuItem newItem = new MenuItem("New");
        MenuItem openItem = new MenuItem("Open");
        MenuItem saveItem = new MenuItem("Save");
        MenuItem cutItem = new MenuItem("Cut");
        MenuItem copyItem = new MenuItem("Copy");
        MenuItem pasteItem = new MenuItem("Paste");

        // Create menus
        Menu fileMenu = new Menu("File", null, newItem, openItem, saveItem);
        Menu editMenu = new Menu("Edit", null, cutItem, copyItem, pasteItem);

        // Create menu bar
        MenuBar menuBar = new MenuBar(fileMenu, editMenu);

        // Create a layout container
        BorderPane borderPane = new BorderPane();
        borderPane.setTop(menuBar);

        // Create a Scene and set it on the Stage
        Scene scene = new Scene(borderPane, 400, 300);
        primaryStage.setScene(scene);
        primaryStage.setTitle("JavaFX Menu");
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

To run these, simply compile and execute to see your window containing all the different components.

Thanks for reading, hope this taught you something new :)

One of the newer, and more efficient ways to do this is via the Transit method. In this article, I’ll go over how the Transit method works, and one of the best algorithms used to filter true transits from raw data- the Box Least Squares algorithm!

The Transit Method

This technique involves watching the brightness of stars over time and looking for the small dips caused when an orbiting planet passes in front of its host star, blocking some of its light.

The transit produces a characteristic light curve (a graph of brightness versus time) with a slight, periodic dip in intensity caused by the orbiting exoplanet each time it blocks the part of the star observed by the telescope. The depth and duration of these dips provide important information about the planet’s size and orbit. A deeper drop usually indicates a larger planet, while the distance between drops gives us the exoplanet's orbital period.

Furthermore, we can use Kepler's third law of planetary motion to determine the distance of the exoplanet from its star. This information could give an idea as to whether the planet might possibly be in its host star's habitable zone (regions where the physical conditions may be just right for liquid water!).

Astronomers gather this data from space telescopes like NASA’s Kepler and TESS missions, which collect vast amounts of light intensity measurements over months and years. The raw data can be noisy due to instrumental effects or stellar activity, which is where computational methods help filter out true transits.

Box Least Squares (BLS)

One popular technique to do this is the Box Least Squares (BLS) algorithm. It works by dividing the light curve into equal sections, and phase-folding them (folding them on top of each other to fit within a mathematically determined period) to fit a simple box-shaped model. It tries many different possible values for this orbital period until finding one that results in the signals (dips in brightness) aligning.

Implementing BLS using Astropy and Matplotlib

Now that we know how this algorithm works, we can move on to analyzing some data ourselves! For this article, I’m using Kepler & TESS Exoplanet Data from Kaggle that contains information about confirmed exoplanets (since I’ll need a transit event to actually occur for me to demonstrate BLS). I’m not going to be plotting raw telescope data, rather, using these known planetary periods and radii I’ll simulate how a star's brightness would look if these planets were passing in front of it.

Let’s start by importing all the external libraries we’ll need,

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
from astropy.timeseries import BoxLeastSquares

Then, we can write a function to simulate a light curve from the planet’s data as shown below.

def simulate_lightcurve(period, radius, n_points=1000):
    time = np.linspace(0, max(period)*3, n_points)
    flux = np.ones_like(time)

    for p, r in zip(period, radius):
        depth = (r * 0.009158)** 2
        duration = 0.1 * p
        phase = (time % p) / p
        in_transit = (phase < duration/p)
        flux[in_transit] -= depth

    return time, flux

This function generates an array time[] that covers three orbits of the planet with the longest period and initializes the normalized brightness (flux) as 1. Then, for each planet it calculates the expected transit depth using the formula-

phase = (time%p) / p folds the continuous timeline into repeating cycles between 0 and the period p. in_transit is a Boolean array that contains all time points that fall within the transit window. We then subtract the depth of the transit from the flux array at times when the light curve is in the transit event. Finally, we return the synthetic combined light curve representing all planets’ transits.

We can then write another function called bls_implementation() that extracts the period and radius from the Kaggle dataset and calls simulate_lightcurve() using them as parameters.

def bls_implementation(csv_path, max_planets=5):
    # Load kaggle data
    df = pd.read_csv(csv_path, comment='#')

    # Extract planets with valid orbital period and radius (Earth radii)
    planets = df[['pl_orbper', 'pl_rade']].dropna()

    # Filter realistic values
    mask = (planets['pl_orbper'] > 0) & (planets['pl_rade'] > 0)
    planets = planets[mask]

    # Limit to first 'max_planets' for simulation clarity
    sample = planets.head(max_planets)
    periods = sample['pl_orbper'].values
    radii = sample['pl_rade'].values

    # Simulate combined light curve for selected planets
    time, flux = simulate_lightcurve(periods, radii, n_points=5000)

Here, pl_orbper and pl_rade are column names in the csv file that correspond to a planet’s orbital period and radius.

Now for the BLS implementation, we can use Astropy’s BoxLeastSquares function as such :

    flux = flux / np.nanmedian(flux)

    # Compute BLS periodogram
    bls = BoxLeastSquares(time, flux)
    periods_grid = np.linspace(0.5, 1.5*max(periods), 20000)
    results = bls.power(periods_grid, 0.1)

    # Find best period peak
    best_idx = np.argmax(results.power)
    best_period = periods_grid[best_idx]
    best_power = results.power[best_idx]

We first normalizes the brightness data, so all the flux values are centered around 1 by dividing by their median. This makes it easier to detect subtle dips caused by planetary transits. Then, we apply the Box Least Squares (BLS) algorithm to the normalized light curve over a range of possible orbital periods, searching for the best-fitting periodic box-shaped dip which represents the transit signal of a planet passing in front of its star. The code finds the period with the highest detection power, which is likely the planet’s orbital period.
We have orbital period data in our CSV file, allowing us to visualize the expected transit. However, real-world exoplanet hunters don't have this luxury. That's why they rely on algorithms like BLS, which provide highly accurate period values. We'll demonstrate this accuracy by plotting the light curve we simulated (based on real exoplanet periods and radii) alongside the BLS model's prediction below.

    # Plot combined light curve & BLS periodogram
    best_t0 = results.transit_time[best_idx]
    best_dur = results.duration[best_idx]
    model = bls.model(time, best_period, best_dur, best_t0)

    fig, (ax1, ax2) = plt.subplots(2,1, figsize=(10,7), gridspec_kw={'height_ratios':[2,1]})
    ax1.plot(time, flux, 'k-', markersize=2, alpha=0.6, label='Simulated Flux')
    ax1.plot(time, model, 'r-', lw=1.5, label='BLS Transit Model')
    ax1.axvspan(best_t0 - 0.5*best_dur, best_t0 + 0.5*best_dur, color='r', alpha=0.1)
    ax1.set_xlabel('Time (days)')
    ax1.set_ylabel('Normalized Flux')
    ax1.set_title('Simulated Exoplanet Transit Light Curve')
    ax1.legend()

    ax2.plot(periods_grid, results.power, 'k-')
    ax2.axvline(best_period, color='purple', linestyle='--', label=f'Best Period = {best_period:.5f} d')
    ax2.set_xlabel('Period (days)')
    ax2.set_ylabel('BLS Power')
    ax2.legend()

    plt.tight_layout()
    plt.show()

Calling bls_implementation() on the Kaggle data should result in a plot that looks something like this :

From the first plot, we see that the time intervals for the simulated curve and the BLS model overlap almost entirely! However, the depth of the transit is significantly lower in the model. One possible reason for this is that because the BLS algorithm fits a simplified "box-shaped" model and works with imperfect data, it often estimates a shallower (less deep) transit depth than the idealized simulated transit that perfectly uses known planet size and orbit like the one in our confirmed exoplanets catalog. Still, we see that BLS matches the intervals between transits almost exactly, confirming the orbital period and reliably pinpointing when each transit occurs!

Conclusion

So, what does all this mean? Basically, by using real exoplanet data to simulate how these planets would block their stars, and then applying the BLS algorithm to detect those dips in light intensity, we can get an idea of how transit detection actually works. The simulation gives us a clear, ‘ideal' picture of the transits, while BLS finds those signals in messier data that has some noise (like the data you’d get from a telescope). Even though the depths of the transits might not perfectly match, BLS discerns the timing of their occurrence almost exactly, which is what really matters when confirming and discovering planets.

Thank you for reading! All the code can be found below :

https://github.com/fa22991/bls_algorithm_for_exoplanet_detection

1. Focus, Hover and nth-child

Focus, Hover, and nth-child are a few of the most useful pseudo classes in CSS. A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). Pseudo-classes allow you to apply styles to elements based on various conditions that cannot be represented by simple selectors alone.

1. Hover. :hover allows you to change the style of the element when the user's mouse hovers over it.
2. Focus. :focus allows you to change the style of the selected element when an element is in focus, and the style remains as long as the element is in focus.
3. nth-child. :nth-child(n) allows you to change the style of element "n" contained in the parent block.

These classes are demonstrated below :

As shown above, the nth-child class is given "odd" as a parameter, allowing it to change the color of the odd-numbered spans contained inside the section (keep in mind it does not depend on the TEXT contained in the spans). Instead, you can pass in even or any number of your choice.

2. Transitions and animations

In CSS, transitions and animations are powerful tools for adding dynamic and visually appealing effects to web elements. Transitions enable smooth changes in property values over a specified duration, offering a seamless transition between different states. For instance, you can use transitions to smoothly alter the color or size of an element when a user hovers over it. On the other hand, animations provide more complex and customizable motion effects. CSS animations allow you to define keyframes that describe the style changes at different points in time, creating more intricate and dynamic movements. Whether it's a subtle fade-in effect or a complex sequence of transformations, transitions and animations enhance the user experience by bringing life and interactivity to web interfaces, making them more engaging and responsive.
The following clip demonstrates the above :

As shown above, transition: , allows for a gradual change in the background-color attribute of the button instead of a harsh one. Some transitions are demonstrated below:

The @keyframes rule defines an animation named "rotate" that gradually rotates an element 360 degrees. The .spinner class applies this animation, creating a spinning effect. This animation is relatively simple, but you can create a lot more complex animations using CSS, which an article in the near-future might elaborate on.

3. 3d effects

We can make use of the box-shadow and text-shadow provided by CSS to create 3d illusions. box-shadow as the name suggests allows you to add a shadow, or multiple, to an element such as a div or section, whereas text-shadow does the same for text inside tags. The following clip illustrates a few designs you can create :

At first glance, these effects may seem complex, but all you need to do is tweak the four parameters to get the effect you desire. Any text, or box, shadow is added as such :
text/box-shadow : x y blur-radius color;
The first parameter determines the position of the shadow on the x axis, the second determines how far away from the y axis it will be, the third determines how far the shadow will be stretched out and the last determines the color. Using these four parameters, you can create any number of combinations to get the effect you need.

4. Translating and rotating

Translating and rotating in CSS is a simple yet impressive task, which can be done via keyframes. Both translate and rotate are enclosed in the transform attribute, as demonstrated below:

5. Translating and rotating in the third dimension

CSS can be used to create 3d transforms as well. However, to do this, you have to define a perspective attribute of the body. In CSS, the perspective property is used in combination with 3D transformations to create a sense of depth and perspective for transformed elements. When applied to a parent container, the perspective property determines the distance between the viewer and the z=0 plane (the plane at which elements appear without any perspective). This allows for functions such as translateX and translateY etc.

As the object approaches us, we can see it get bigger, which is a result of translating in the z axis.

6. Filters and Gradients

CSS filters enable the manipulation of visual content by applying a variety of effects. Filters such as blur, brightness, contrast, grayscale, sepia, and more can be used to alter the appearance of images and elements. For example, applying a blur filter can create a subtle or dramatic softening effect, while adjusting brightness and contrast allows for fine-tuning the overall visual impact. For example :

CSS gradients provide a way to smoothly transition between two or more colors, either horizontally, vertically, or radially. Gradients can be applied to backgrounds or even as text colors, creating visually appealing and dynamic designs. Linear gradients move from one color to another in a straight line, while radial gradients radiate from a central point.

7. Fonts, and Font awesome

While there are a limited number of inbuilt fonts in CSS, you can use import to import fonts from libraries on the internet, such as google fonts. For example:

To get the import code for these fonts, head over to the google fonts webpage and copy the text from there.

Coming on to font awesome. Font Awesome is a true gem for web designers and has saved me much time and effort personally. To use, head over to cdnjs.com and copy the font awesome cdn and add it to your html. Or, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Font Awesome is designed to be used with inline elements. The <i> and <span> elements are widely used for icons. You place Font Awesome icons by using the prefix fa and the icon's name. To find the icon of your choice, head over to Font Awesome and copy the imbed link, and add it to your html.

8. Button styles

In CSS, button styling is a fundamental aspect of creating visually appealing and interactive user interfaces. Buttons can be customized to match the overall design theme of a website, providing a cohesive and engaging user experience. CSS properties such as background-color, color, border, padding, and box-shadow allow developers to control the visual aspects of buttons. Hover and active states can be further enhanced using pseudo-classes like :hover and :active, enabling smooth transitions or color changes when users interact with the button. Additionally, CSS frameworks and methodologies like Flexbox and Grid can be employed for layout consistency and responsiveness. I have created a couple of button styles using the ::before and ::after pseudo classes, shown below.

And that concludes this list!

Prerequisites - basic HTML and CSS

PART I: Setting up web scraping libraries -

1. Installing requests (cmd)-
   pip install requests

2. Installing lxml (cmd) -
   pip install lxml

3. Installing BeautifulSoup (bs version 4) -
   pip install bs4

   You might need to restart your computer for these to start working.
   To use these in your programs, import them.

PART II: Grabbing titles, classes and images -

Here, we'll be using www.example.com for every demonstration. Make sure to include "http://" or "https://" depending on which one your site has.
Now, to begin, start by importing requests. Requests has a function called "get" which lets you "get" a response from a page.

import requests

response = requests.get("http://www.example.com")

print(type(response)) #prints the type of response
print(response.text) #prints the response text

*If you face any issues running the above, check your firewall to make sure it isn't blocking python.

The code above prints two things. The type of the response, as well as the text contained within. The text, however, is returned simply as a string. This is where BeautifulSoup comes into play; parsing. That is, bs4 will help us obtain specific data from the site, using ids and classes etc.

To create our "soup" object, we use the BeautifulSoup class within the bs4 module; to demonstrate :

import requests
import bs4 

response = requests.get("http://www.example.com")

soup = bs4.BeautifulSoup(response.text, "lxml") #second parameter is the engine

In our "soup" object, we've used the bs4 module's BeautifulSoup class to parse through the response text using the engine specified by the second parameter, that is, lxml. The lxml library helps sort through the data and grab classes, tags and ids etc.
Now, to grab specific elements or tags from the page, we can use something called "select()" and pass in the tag or element we want to select.

import requests
import bs4

response = requests.get("http://www.example.com")
soup = bs4.BeautifulSoup(response.text, "lxml") 
title = soup.select("title")

Here, we're grabbing the content between the HTML "<title>" and "</title>" tags. Grabbing paragraphs, headings, divs etc works the same way, for example if you wanted to select a link, you could just put in "a" inside the quotes instead.
However, this by default returns a list of the content, as well as the tag. To get rid of both, you can simply return the first index of the string and return just the content using "getText()" : title = soup.select("title")[0].getText
If this doesn't work, you can use another approach:

element = soup.find('p') text = element.getText()

Grabbing a class is slightly different. Instead of selecting an HTML tag, we can instead access specific parts of the src using css attributes like "#id" and ".class"

Images, can be accessed the same way. ex -

image = soup.select('img')[0] source = img['src']

PART III: Building the Goodreads web scraper -

import requests
from bs4 import BeautifulSoup

# URL of the Goodreads list you want to scrape
url = "https://www.goodreads.com/list/show/1.Best_Books_of_the_21st_Century"

# Send an HTTP GET request to the URL
response = requests.get(url)

# Parse the HTML content of the page using Beautiful Soup
soup = BeautifulSoup(response.content, "html.parser")

# Find all the book containers on the page
book_containers = soup.find_all("tr", itemtype="http://schema.org/Book")

# Loop through each book container and extract title and author information
for container in book_containers:
    title = container.find("a", class_="bookTitle").get_text(strip=True)
    author = container.find("a", class_="authorName").get_text(strip=True)
    print(f"Title: {title}\nAuthor: {author}\n")

In this example, we first import the necessary libraries: requests for making HTTP requests and BeautifulSoup for parsing HTML. We then send an HTTP GET request to the Goodreads URL and parse the HTML content using Beautiful Soup.

We use Beautiful Soup's find_all method to locate all the book containers on the page, which have the itemtype attribute set to "http://schema.org/Book". Within each container, we extract the title and author information using the appropriate HTML tags and class names.

Finally, we loop through each book container and print out the extracted title and author information.

(P.S what do you call a spider that codes?
.... a web scraper)

1. CSV files

   A CSV file stores tabular data (numbers and text) in plain text. Each line of the file is a data record consisting of one or more fields, separated by commas. To work with such files, Python has a built-in module called 'csv'.

    import csv
    data = open("colors.csv",encoding="utf-8") #opening the file
    csv_data = csv.reader(data) #reading from the file
    data_lines = list(csv_data) #creating a list
   
    for line in data_lines[:5]:
        print(line)
   

   For example, the file we're working with, called 'colors.csv', contains three columns - the name of the colour, its hex code and its RGB value. The first few lines open the file, read data from it, and store the said data in a list. The for loop, however, is used to print individual rows from the list upto the 5th row (data_line[:5] splices the list to the 5th row).

   But here comes another question. How could you get only the RGB values of each colour up to line 5?

    for line in data_lines[:5]:
        print(line[2])
   

   We know that the third column contains the RGB values. We also know that list indexing starts from index 0, making the index position of the third column 2. So, by replacing line with line[2], we can access the values in the third column of the 5 rows.

   

   Since data_lines[i] (i because the value keeps changing as the loop progresses) is line, line[2] gives the same output as the above-mentioned.

   Now imagine you wanted to store the hex values (2nd column) of all the rows in 'colors.csv'. To do this, we could start by creating an empty list, to which we could then append the hex values of each row as we go through them.

    import csv
    data = open("colors.csv",encoding="utf-8") #opening the file
    csv_data = csv.reader(data) #reading from the file
    data_lines = list(csv_data) #creating a list
   
    hex_values = []
   
    for line in data_lines[1:]: #Excluding the first row (labels) 
        hex_values.append(line[1]) #attaching each hex code to the list
   
    print(hex_values)
   

   Everything mentioned above dealt with reading data from a CSV file, but what if you wanted to write to one? To do that, you just need to change the 'mode' when you open the file from 'r' for reading to 'w' for writing, and use CSV 'writer'.

    import csv
    colors = open('colors.csv',mode='w',newline='')
    writer = csv.writer(colors,delimiter=',')
    writer.writerows([['red','#ff0000','rgb(255,0,255)'],['green','#00ff00','rgb(0,255,0)']])
    colors.close()
   

   This piece of code overrides the current contents of 'colors' and writes 2 new rows instead - using 'writerows'. The code for modifying a CSV file is similar to that for reading from one. While creating the writer, the 'delimiter' parameter basically specifies what we want to use to separate our columns.
   If you don't want to override the current contents but do want to add rows to the file, changing the mode from 'w' to 'a' (for append) allows you to add content to the bottom of the CSV files without modifying any of its current contents.

2. PDF files

   To work with PDFs in Python, you can install the PyPDF2 library using the following pip command :

   pip install PyPDF2

   Reading a PDF Document

   To read a PDF document using PyPDF2, you first need to open the document using the PdfReader class. Once you have opened the document, you can access its various properties, such as the number of pages or the document information.

    import PyPDF2
   
    with open('sample.pdf', 'rb') as pdf_file:
        pdf_reader = PyPDF2.PdfReader(pdf_file)
   
        # Print the number of pages in the document
        print(len(pdf_reader.pages))
   
        # Print the document information
        print(pdf_reader.metadata)
   

   Extracting Text

   Extracting text from a PDF document is one of the most common tasks when working with PDF files. PyPDF2 provides a simple interface to extract text from a PDF document using the PdfReader class.

    import PyPDF2
   
    pdf_file = open('sample.pdf', 'rb')
    pdf_reader = PyPDF2.PdfReader(pdf_file)
   
    # Extract text from the first page
    page = pdf_reader.pages[0]
    text = page.extract_text()
   
    print(text)
   

   Merging Text

   Merging multiple PDF documents into a single document is another common task when working with PDF files. PyPDF2 provides a simple interface to merge PDF documents using the PdfMerger class.

    import PyPDF2
   
    pdf_merger = PyPDF2.PdfMerger()
   
    # Add PDF documents to the merger
    pdf_merger.append('document1.pdf')
    pdf_merger.append('document2.pdf')
   
    # Merge the documents and save the output
    with open('merged_document.pdf', 'wb') as output:
        pdf_merger.write(output)
   

   The code above merges the two pdfs into one document which we've named 'merged_document.pdf'.

   Encrypting a PDF Document

   Encrypting a PDF document is a great way to protect sensitive information. PyPDF2 provides a simple interface to encrypt a PDF document using the PdfWriter class.

    import PyPDF2
   
    pdf_file = open('sample.pdf', 'rb')
    pdf_reader = PyPDF2.PdfReader(pdf_file)
   
    pdf_writer = PyPDF2.PdfWriter()
   
    # Copy the pages from the original document to the new document
    for page_num in range(len(pdf_reader.pages)):
        pdf_writer.add_page(pdf_reader.pages[page_num])
   
    # Set the encryption parameters
    pdf_writer.encrypt('password', 'random', use_128bit=True)
   
    # Save the encrypted document
    with open('encrypted_document.pdf', 'wb') as output:
        pdf_writer.write(output)
   

   This piece of code creates a new document (encrypted_document.pdf) to which it copies pages from the original document and then sets a password that restricts access to it. The encrypt() method of PyPDF2's PdfWriter class is used to add password-based encryption to a PDF document. The pdf_writer.encrypt() takes the password to put on the document, which in this case is 'random' and an optional use_128bit parameter which specifies whether to use a 40-bit or 128-bit encryption (128 if set to true, and 40 if not).

3. Spreadsheets

   One of the most popular Python libraries for working with files is openpyxl, a library for working with Excel (.xlsx) files.

   Installing openpyxl

   To install openpyxl, run the following command.

    pip install openpyxl
   

   Reading Data from a Spreadsheet

   To read data from the spreadsheet, the function load_workbook is used.

    import openpyxl
   
    # Load the workbook
    workbook = openpyxl.load_workbook('sample.xlsx')
   
    # Select the worksheet
    worksheet = workbook.active
   
    # Print the values of the cells in the first row
    for cell in worksheet[1]:
        print(cell.value)
   

   In this code snippet, we first load the Excel file 'sample.xlsx' using the load_workbook() function, then select the active worksheet using the active attribute of the workbook object. Finally, we iterate over the cells in the first row of the worksheet using a for loop and print the value of each cell using its value attribute.

   Writing Data to a Spreadsheet

   Next, let's look at how we can write data to an Excel file using openpyxl. Here's a code snippet that demonstrates how to create a new Excel file and write some data to it:

    import openpyxl
   
    # Create a new workbook
    workbook = openpyxl.Workbook()
   
    # Select the worksheet
    worksheet = workbook.active
   
    # Write some data to the worksheet
    worksheet['A1'] = 'Name'
    worksheet['B1'] = 'Age'
    worksheet['A2'] = 'Alice'
    worksheet['B2'] = 25
   
    # Save the workbook
    workbook.save('output.xlsx')
   

   In this code snippet, we first create a new Excel workbook using the Workbook() function. We then select the active worksheet using the active attribute of the workbook object. Finally, we write some data to the worksheet by assigning values to the appropriate cells using indexing and save the workbook as 'output.xlsx'. Note that we can use either letters or numbers to index the columns.

   Modifying an Existing Spreadsheet

   Finally, let's look at how we can modify an existing Excel file using openpyxl. Here's a code snippet that demonstrates how to load an Excel file, modify some of its contents, and save the changes:

    import openpyxl
   
    # Load the workbook
    workbook = openpyxl.load_workbook('sample.xlsx')
   
    # Select the worksheet
    worksheet = workbook.active
   
    # Modify some of the cell values
    worksheet['A2'] = 'Bob'
    worksheet['B2'] = 30
   
    # Save the changes to the workbook
    workbook.save('sample.xlsx')
   

   In this code snippet, we first load the Excel file 'sample.xlsx' using the load_workbook() function. Finally, we modify some of the cell values using indexing and save the changes to the workbook using the save() function.

Project Ideas using file manipulation

1. Budget Analyzer: Create a program that reads in a CSV file containing income and expenses data and generates a summary report. Users can specify the date range for the report, and the program can calculate the total income, total expenses, and net income for the period.

2. Invoice Generator: Create a program that generates PDF invoices based on a CSV file containing customer information and order details. Users can customize the invoice format, including the logo, header, footer, and payment terms.

3. Movie Recommendation Engine: Create a program that reads in a CSV file containing movies' rating data and uses collaborative filtering to recommend movies to users. The program can generate a list of top-rated movies, similar movies, and personalized recommendations based on the user's previous ratings.

It is a set of Python bindings for the Qt application framework, which is a popular and powerful C++ GUI toolkit used for building cross-platform applications. PyQt provides a range of modules and classes for creating graphical user interfaces, including buttons, labels, text boxes, and more.

The ✨Logic✨

Every PyQt application is built on two fundamental objects -

1. QApplication -
   Deals with event-handling and initialization. It does all the stuff that happens under the hood and is mostly automatic.

2. MainWindow -

   Handles graphic elements and logic, done manually.

Graphical elements of PyQt are called 'Widgets' and are created by the user to be displayed on the screen, for example - buttons or textfields.

The ✨Implementation✨

If you've never worked with PyQt before, you need to install it by running the following command in windows command prompt(CMD) or powershell, and in the terminal for mac users.

pip install PyQt5

Once this is downloaded, fire up your IDE and start writing a basic GUI application.

import sys
from PyQt5.QtWidgets import QApplication, QWidget
if __name__ == "__main__": #checks if the script is being run as the main program
    app = QApplication(sys.argv) #takes a command line argument from the user
    w = QWidget() #creates the main widget
    w.resize(300,300) #sets the size of the window to 300x300
    w.setWindowTitle("Basic program1") #sets the title for the widget
    w.show() #displays the window
    sys.exit(app.exec_()) #starts the Qt event loop and waits for user interaction to stop

To start off, you need to import the sys module along with the required 'widgets' to create a window. The other lines basically create a window of size 300x300 named 'Basic program1'. Line-by-line explanations are given through comments in the code above.

If there are no command line arguments to be given, we can replace the line app = QApplication(sys.argv) with app = QApplication([]) and thereby would not have to import the sys module.

Before we jump into making the actual program, look at some of the commonly used widgets :

1. QLabel: A widget used to display text or an image.

2. QPushButton: A widget used to display a clickable button.

3. QLineEdit: A widget used to accept a single line of text input.

4. QTextEdit: A widget used to accept multiple lines of text input.

5. QCheckBox: A widget used to display a checkbox.

6. QRadioButton: A widget used to display a radio button.

7. QComboBox: A widget used to display a drop-down list of options.

8. QSpinBox: A widget used to display a spin box for numerical input.

9. QSlider: A widget used to display a slider for adjusting a value within a range.

10. QProgressBar: A widget used to display a progress bar.

Now, for the actual calculator;

✨Building the calculator✨

Part I: Base template -

import PyQt5.QtWidgets as qtw
class MainWindow(qtw.QWidget): #where the widgets are added
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Calculator")
        self.show()

app = qtw.QApplication([])
mw = MainWindow()
app.exec_()

First, the code imports the PyQt5 QtWidgets module containing all the required widgets and renames it as qtw for convenience.

Next, a new class named MainWindow is defined that inherits from the PyQt5 QWidget class. The __init__ method of the MainWindow class calls the __init__ method of its superclass using the super() function, which initializes the MainWindow object as a QWidget. All the visual elements of the program are defined here.

The MainWindow object is then created by calling its constructor with no arguments, which sets up the window with default size and properties. Finally, the show() method is called on the MainWindow object to display the window on the screen.

The QApplication object is created with an empty list [] as its argument. This is because QApplication is the top-level application object and requires a list of command-line arguments, but in this case, we have no command-line arguments to pass, so an empty list is used.

Finally, the MainWindow object is created and stored in the variable mw. The exec_() method of the QApplication object is called to start the event loop and run the application. This event loop waits for user events such as mouse clicks, key presses, and so on, and handles them as they occur.

Part II : Layout -

Whenever we create a new widget, since there is no specific layout for the program, Qt will not know where to put it. To specify the location of widgets, there are a few pre-made layouts that we can use, such as the QV (vertical layout), the QH (horizontal layout) and the QGrid Layout. For the main window, we'll use a QV layout, and for the inner calculator keypad, we'll create a grid layout.

import PyQt5.QtWidgets as qtw
class MainWindow(qtw.QWidget): #where the widgets are added
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Calculator")
        self.setLayout(qtw.QVBoxLayout())
        self.keypad()

        self.show()

    def keypad(self):
        container = qtw.QWidget()
        container.setLayout(qtw.QGridLayout())

        self.result_field = qtw.QLineEdit()
        result = qtw.QPushButton('Enter')
        clear = qtw.QPushButton('Clear')
        b9 = qtw.QPushButton('9')
        b8 = qtw.QPushButton('8')
        b7 = qtw.QPushButton('7')
        b6 = qtw.QPushButton('6')
        b5 = qtw.QPushButton('5')
        b4 = qtw.QPushButton('4')
        b3 = qtw.QPushButton('3')
        b2 = qtw.QPushButton('2')
        b1 = qtw.QPushButton('1')
        b0 = qtw.QPushButton('0')
        plus = qtw.QPushButton('+')
        mins = qtw.QPushButton('-')
        mult = qtw.QPushButton('*')
        div = qtw.QPushButton('/')


app = qtw.QApplication([])
mw = MainWindow()
app.exec_()

As you can see in the code above, we've added a new function keypad() containing the buttons of our calculator. This was done just to give it a seperate layout.
In lines 6 and 11, we've set the layouts for the widgets using .setLayout(qtw.Layouttype) However, if you run this code, you can see that none of the widgets actually appear on the screen. This is because we haven't actually added the widgets to the layout, they're just... there. To add these to the layout, we need to understand how grid layouts work -

In each of these 'Cells', we need to position our widgets to match the grid layout. The coordinates of the cell begin with 0,0 and so on. To add a widget in a cell, we use addWidget('widget name',3,4,2,4), which takes in 5 parameters - the widget to be added, the coordinates and the span of the cell. This span is simply the number of rows and columns our cell stretches across; the 4th parameter being for the rows and the 5th for the columns. To implement this, add the following code after declaring all the widgets -

container.layout().addWidget(self.result_field, 0, 0, 1, 4) 
container.layout().addWidget(result, 1, 0, 1, 2)
container.layout().addWidget(clear, 1, 2, 1, 2)
container.layout().addWidget(b9, 2, 0)
container.layout().addWidget(b8, 2, 1)
container.layout().addWidget(b7, 2, 2)
container.layout().addWidget(b6, 3, 0)
container.layout().addWidget(b5, 3, 1)
container.layout().addWidget(b4, 3, 2)
container.layout().addWidget(b3, 4, 0)
container.layout().addWidget(b2, 4, 1)
container.layout().addWidget(b1, 4, 2)
container.layout().addWidget(b0,5,0,1,3)
container.layout().addWidget(plus, 2,3)
container.layout().addWidget(mins, 3, 3)
container.layout().addWidget(mult, 4, 3)
container.layout().addWidget(div, 5, 3)
self.layout().addWidget(container) #adds all the widgets to the main window

Notice how we have used the self keyword in both the declaration of the result_field as well as while adding it to the layout. This is just to make result_field accessible outside of this method, so that we can use the input from here and incorporate it into our final step, the calculator logic.

Part III : The calculator Logic -

Every Qt widget can send signals and has slots for recieving signals from other widgets.Whenever an event takes place, widgets send signals to other widgets. This is essentially how widgets communicate with each other.
For this calculator, we'll use the 'clicked' signal which is emitted when a button is clicked, and use the setText() slot to change the text of the result_field when it recieves the clicked signal from the buttons.
To start off, we'll need a method that changes the text field according to the button that is pushed. We can do this by associating a seperate function for each of the buttons. For example, if we press the button '5', it'll set the function number(N) to 5.
Moreover, we'll need to create seperate function for each operator, that uses the value passed to it to perform a specific operation on the numbers passed.
The two main things we need to do now are to update the text_field methodically once any button is pressed and to display the answer when the enter button is clicked.

def __init__(self):
    super().__init__()
    self.setWindowTitle("Calculator")
    self.setLayout(qtw.QVBoxLayout())
    self.keypad()
    self.tnum = []
    self.fnum = []

Firstly, enter in the __init__ method, define two lists using self. so that they can be accessed when objects are made.The first list, tnum, stores the numerical values passed to the widget slots in the form of strings inside the list. Similarly, the second list, fnum, stores the final typed in string, combining the operator and the digits.

def keypad(self):
    container = qtw.QWidget()
    container.setLayout(qtw.QGridLayout())

    self.result_field = qtw.QLineEdit()
    result = qtw.QPushButton('Enter', clicked = self.resultf)
    clear = qtw.QPushButton('AC',clicked = self.clearf)
    b9 = qtw.QPushButton('9', clicked=lambda: self.num_press('9'))
    b8 = qtw.QPushButton('8',clicked=lambda: self.num_press('8'))
    b7 = qtw.QPushButton('7',clicked=lambda: self.num_press('7'))
    b6 = qtw.QPushButton('6',clicked=lambda: self.num_press('6'))
    b5 = qtw.QPushButton('5',clicked=lambda: self.num_press('5'))
    b4 = qtw.QPushButton('4',clicked=lambda: self.num_press('4'))
    b3 = qtw.QPushButton('3',clicked=lambda: self.num_press('3'))
    b2 = qtw.QPushButton('2',clicked=lambda: self.num_press('2'))
    b1 = qtw.QPushButton('1',clicked=lambda: self.num_press('1'))
    b0 = qtw.QPushButton('0',clicked=lambda: self.num_press('0'))
    plus = qtw.QPushButton('+',clicked=lambda: self.func_press('+'))
    mins = qtw.QPushButton('-',clicked=lambda: self.func_press('-'))
    mult = qtw.QPushButton('*',clicked=lambda: self.func_press('*'))
    div = qtw.QPushButton('/',clicked=lambda: self.func_press('/'))

Secondly, inside the keypad function, we create a lambda function for each of the buttons, which passes the numerical value from the button to the num_press function. If you're getting an error around this part, it's because you haven't imported the lambda function. You can do that be writing the following statement at the top of your program - from _ast import Lambda . A lambda function is basically a short, one-time use function that you can use instead of creating full-length functions for each of the buttons. Here, we call four functions - resultf(), clearf(), num_press() and func_press() - which each perform a seperate function which we'll look at below.

def num_press(self,key):
    self.tnum.append(key)
    tstring = ''.join(self.tnum)
    if self.fnum:
        self.result_field.setText(''.join(self.fnum)+tstring)
    else:
        self.result_field.setText(tstring)

def func_press(self,operator):
    tstring = ''.join(self.tnum)
    self.fnum.append(tstring)
    self.fnum.append(operator)
    self.tnum = []
    self.result_field.setText(''.join(self.fnum))
def resultf(self):
    fstring = ''.join(self.fnum)+''.join(self.tnum)
    rstring = eval(fstring)
    fstring += '='
    fstring += str(rstring)
    self.result_field.setText(fstring)
def clearf(self):
    self.result_field.clear()
    self.tnum = []
    self.fnum = []

Add the following code after the part where you add the widgets to the layout.

num_press() :
The num_press function appends the value of the button we've pressed to the tnum list. For example we press 4, then the value of tnum becomes ['4']. It then creates a new string tstring to store the value of tnum, just so python doesn't start evaluating it like an integer, so that the written expression can be displayed in result_field first. It then has an if statement which basically just checks if a number or operator has been added to fnum before, and joins the new given number to tstring if so. Otherwise, it just sets the text of the result field to the given number.

func_press() :
The func-press() function joins the values of tstring (containing the numerical value) and the operator which is passed in. It then sets tnum back to an empty string so that another number can be typed in (or rather pressed in). Lastly, it sets the text field to fnum, which contains the final expression (number + operator) typed in by the user.

resultf() :
The resultf() function joins fnum (first number+operator) to the second number. It then creates a variable rstring that stores the evaluated form of the expression and adds an equal sign. Then, it sets the completed string fstring as the text field.

clearf() :
As the name clearly suggests, this function clears the result_field and resets both the lists.

✨Final product✨

The code for the final calculator is as follows :

from _ast import Lambda
import PyQt5.QtWidgets as qtw
class MainWindow(qtw.QWidget): #where the widgets are added
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Calculator")
        self.setLayout(qtw.QVBoxLayout())
        self.keypad()
        self.tnum = []
        self.fnum = []

        self.show()

    def keypad(self):
        container = qtw.QWidget()
        container.setLayout(qtw.QGridLayout())

        self.result_field = qtw.QLineEdit()
        result = qtw.QPushButton('Enter', clicked = self.resultf)
        clear = qtw.QPushButton('AC',clicked = self.clearf)
        b9 = qtw.QPushButton('9', clicked=lambda: self.num_press('9'))
        b8 = qtw.QPushButton('8',clicked=lambda: self.num_press('8'))
        b7 = qtw.QPushButton('7',clicked=lambda: self.num_press('7'))
        b6 = qtw.QPushButton('6',clicked=lambda: self.num_press('6'))
        b5 = qtw.QPushButton('5',clicked=lambda: self.num_press('5'))
        b4 = qtw.QPushButton('4',clicked=lambda: self.num_press('4'))
        b3 = qtw.QPushButton('3',clicked=lambda: self.num_press('3'))
        b2 = qtw.QPushButton('2',clicked=lambda: self.num_press('2'))
        b1 = qtw.QPushButton('1',clicked=lambda: self.num_press('1'))
        b0 = qtw.QPushButton('0',clicked=lambda: self.num_press('0'))
        plus = qtw.QPushButton('+',clicked=lambda: self.func_press('+'))
        mins = qtw.QPushButton('-',clicked=lambda: self.func_press('-'))
        mult = qtw.QPushButton('*',clicked=lambda: self.func_press('*'))
        div = qtw.QPushButton('/',clicked=lambda: self.func_press('/'))

        container.layout().addWidget(self.result_field, 0, 0, 1, 4)
        container.layout().addWidget(result, 1, 0, 1, 2)
        container.layout().addWidget(clear, 1, 2, 1, 2)
        container.layout().addWidget(b9, 2, 0)
        container.layout().addWidget(b8, 2, 1)
        container.layout().addWidget(b7, 2, 2)
        container.layout().addWidget(b6, 3, 0)
        container.layout().addWidget(b5, 3, 1)
        container.layout().addWidget(b4, 3, 2)
        container.layout().addWidget(b3, 4, 0)
        container.layout().addWidget(b2, 4, 1)
        container.layout().addWidget(b1, 4, 2)
        container.layout().addWidget(b0,5,0,1,3)
        container.layout().addWidget(plus, 2,3)
        container.layout().addWidget(mins, 3, 3)
        container.layout().addWidget(mult, 4, 3)
        container.layout().addWidget(div, 5, 3)
        self.layout().addWidget(container)

    def num_press(self,key):
        self.tnum.append(key)
        tstring = ''.join(self.tnum)
        if self.fnum:
            self.result_field.setText(''.join(self.fnum)+tstring)
        else:
            self.result_field.setText(tstring)

    def func_press(self,operator):
        tstring = ''.join(self.tnum)
        self.fnum.append(tstring)
        self.fnum.append(operator)
        self.tnum = []
        self.result_field.setText(''.join(self.fnum))
    def resultf(self):
        fstring = ''.join(self.fnum)+''.join(self.tnum)
        rstring = eval(fstring)
        fstring += '='
        fstring += str(rstring)
        self.result_field.setText(fstring)
    def clearf(self):
        self.result_field.clear()
        self.tnum = []
        self.fnum = []


app = qtw.QApplication([])
mw = MainWindow()
app.setStyle(qtw.QStyleFactory.create('Fusion'))
app.exec_()

...and that was how to create a calculator with PyQt!

Github repository - https://github.com/fa22991/PyQt-Calculator

RGB

An RGB color is composed of 3 channels on computer screens. These 3 channels have a minimum intensity of 0 and a maximum intensity of 255; 0 being the darkest shade and 255 being the lightest. An RGB color value is specified with rgb(red, green, blue). For example, rgb(255,0,0) is rendered as the color red, as the red parameter is set to its highest value 255 and the others are set to 0.
Another thing to remember is that RGB colors are Additive colors, as they combine to form white, unlike Subtractive colors which, as the name suggests, subtract to form white.

If all the sliders are set to 0, the darkest shade, the color presented would be black. Similarly, if they were all set to 255, the lightest shade, the color would be white.

In the example above, we have set the intensity of blue to 255 and the others to 0, turning the background of the page blue. You can create most of the color combinations by adjusting the light of these three colors appropriately, for example :

• red + green = yellow

• red + blue = magenta

• green + blue = cyan

Changing the intensity of the triplet can help make the color lighter or darker as needed.

Changing the opacity of RGB colors:

In addition to the typical rgb() function, CSS provides a rgba() function which helps to control the opacity of the color. The rgba() function defines colors using the Red-green-blue-alpha (RGBA) model, which is nothing but an extension of RGB color values.

The code example above changes the background of our body to the color red with an opacity of 0.5.
This opacity can range from 0.0-1.0, 0 making the color transparent and 1 making the color fully opaque.

Hexadecimal

In general, hexadecimal values have a base of 16. They follow a decimal number system up to base '10' but, as soon as they reach 10 (the first non-single-digit number), they switch to alphabets. The hexadecimal numbering would look something like: 1 2 3 4 5 6 7 8 9 A B C D E F
Note: The letters A-F are used to represent the numbers 10-15.
Hex codes are usually represented by a 'hashtag' followed by a pair of each of the Red, Green and Blue values.

In the color example above, the first two characters of the hex code represent the intensity of red, the second pair of characters represent the intensity of the color green and lastly, the third pair represents the intensity of blue.

How does the computer know which color to display using hex codes?
All color is represented by mixing the amounts of red green and blue. The computer interprets the amount of red from a hex code by converting it into rgb values. Considering the hex code above, look at the interpretation below.

The value of red :
'd8' - 8 is at one's place and has the base 16, thus, we can multiply 8 with 16 to the power 0. 'd' on the other hand is simply the value 13 represented in base 16. Since d is at tens place and has the base 16, we multiply d with 16 to the power 1. Adding the value of both of these equations, we get the amount of red in the color.
8 x 16^0 = 8
13 x 16^1 = 208
8 + 208 = 216
Thus, the concentration of red in the color #d8b3fc is 216.

The value of green :
'b3' - 3 is at one's place and has the base 16, thus, we can multiply 3 with 16 to the power 0. 'b' on the other hand is simply the value 11 represented in base 16. Since b is at tens place and has the base 16, we multiply b with 16 to the power 1. Adding the value of both of these equations, we get the amount of green in the color.
3 x 16^0 = 3
11 x 16^1 = 176
3 + 176 = 179
Thus, the concentration of green in the color #d8b3fc is 179.

The value of blue :
'fc' - c is at one's place and has the base 16, thus, we can multiply the decimal value of c (that is 12) with 16 to the power 0. 'f' on the other hand is simply the value 15 represented in base 16. Since f is at tens place and has the base 16, we multiply f with 16 to the power 1. Adding the value of both of these equations, we get the amount of blue in the color.
12 x 16^0 = 12
15 x 16^1 = 240
12 + 240 = 252
Thus, the concentration of blue in the color #d8b3fc is 252.

These 3 values of Red, Green and Blue combine to form the color - rgb(216,179,252), which as you might notice is the same color as #d8b3fc. This converted rgb value is used to display color.

How can you convert RGB colors to Hexadecimal colors?
Consider the RGB color (255,255,255). To convert this to hexadecimal, you would first have to convert the value of each separate color to base 16 and then concatenate the three together.
Red, Green and Blue - The value of red, green and blue is 255 in our example. We know that in every hex color, there are two places for each color. The tens place and the one's place. We start with first place (16^1) and move on accordingly.
15 x 16^1 = 240
15 x 16^0 = 15
Since at both positions for every color, the value is 15, we can represent it as #FF in hexadecimal as 15 is represented by the letter F. As the value of all the 3 colors is the same, we can simply write the color as #FFFFFF ( a pair of F for each color).

Bonus: How to create CSS gradients using hex and rgb colors? CSS gradients let you transition smoothly between two or more colors. These transitions can be done Linearly (going up, down, left, right or diagonally), Radially (defined by their center) or Conically (rotated around a center pivot). The following code imbed displays the types of CSS gradients on the different divs.

Div 1 uses a linear gradient that transitions (as specified) to the right. Div 2 uses a radial gradient and we see the color transitioning from the center. Div 3 uses a conic gradient which spreads the color evenly from the starting angle. If this starting angle is not specified, by default it is considered 0 (the center).

QuickSort

First on the list, and most efficient, is the "QuickSort" Algorithm. QuickSort, is a Divide and Conquer algorithm, meaning that it selects an element as a pivot and consequently partitions the given array around the picked pivot. Now, how does QuickSort actually sort the array? Well, the first step would be to select a random element from the array, element x, which we'll consider the pivot. The algorithm first puts x at its correct position, then puts all the elements smaller than it before position x and similarly, puts all elements greater than it after position x.

There can be multiple ways to implement partition. The logic is quite straightforward, we start from the leftmost element, keeping track of the indexes of elements smaller than element x (our pivot element). While going through the array, if we find a smaller element, we swap that element with the element x. Otherwise, we ignore the current element and move to the next. Implementation of this method is provided below :

/* C++ implementation of QuickSort */
#include <bits/stdc++.h>

using namespace std;

// A utility function to swap two elements

void swap(int* a, int* b)

{
    int t = *a;
    *a = *b;
    *b = t;
}

/* This function takes the last element as a pivot, places
the pivot element at its correct position in sorted
array, and places all smaller (smaller than pivot)
to the left of the pivot and all greater elements to the right
of pivot */

int partition(int arr[], int low, int high)

{
    int pivot = arr[high]; // pivot
    int i
        = (low
           - 1); // Index of the smaller element and indicates
                 // the right position of pivot found so far

    for (int j = low; j <= high - 1; j++) {
        // If the current element is smaller than the pivot
        if (arr[j] < pivot) {
            i++; // increment index of the smaller element
            swap(&arr[i], &arr[j]);
        }
    }
    swap(&arr[i + 1], &arr[high]);
    return (i + 1);

}

/* The main function that implements QuickSort
arr[] --> Array to be sorted,
low --> Starting index,
high --> Ending index */

void quickSort(int arr[], int low, int high)
{
    if (low < high) {
        /* pi is partitioning index, arr[p] is now
        at the right place */

        int pi = partition(arr, low, high);

        // Separately sort elements before
        // partition and after partition

        quickSort(arr, low, pi - 1);
        quickSort(arr, pi + 1, high);

    }
}
/* Function to print an array */

void printArray(int arr[], int size)
{
    int i;
    for (i = 0; i < size; i++)
        cout << arr[i] << " ";
    cout << endl;

}

// Driver Code
int main()
{
    int arr[] = { 10, 7, 8, 9, 1, 5 };

    int n = sizeof(arr) / sizeof(arr[0]);

    quickSort(arr, 0, n - 1);

    cout << "Sorted array: \n";

    printArray(arr, n);

    return 0;

}

// This code is contributed by rathbhupendra (geeksforgeeks website)

Lomuto Partition ⬆️

Analysis of QuickSort :

The time taken by QuickSort in general can be written as follows :

T(n) = T(k) + T(n-k-1) + Θ(n)**

Worst Case Scenario - Θ(n²)
Best Case Scenario - Θ(nLogn)

Admittedly, the worst-case time compressibility of QuickSort, being Θ(n^2) is quite high. However, it is much quicker in practice as the worst-case scenario is rarely faced. QuickSort can be implemented in different ways by changing the choice of the pivot therefore, the worst case rarely occurs for a given type of data

Merge Sort

Merge sort, on the other hand, uses the "Divide and conquer" strategy. Diving an array into its consistent subarrays, It sorts these subarrays and then merges the subarrays together to form a completely sorted array.

Note: a "subarray" is just a fancy way of saying "a part of an array" or "a smaller section of an array".

What are the benefits of using Merge sort?
Merge sort is used to sort large arrays in meagre time. Another great thing about using merge sort is the fact that it is a stable sort. A stable sort is a sort that preserves the original order of the given array, which means that if it encounters two equal elements in the array, it will put the element that was first in the given array before the second equal element, therefore preserving the original sequence.

Working process :

Merge sort is basically an algorithm that continuously divides an array into smaller and smaller arrays until the array becomes empty or has only one element left.

For example, we're given an array consisting of 6 elements:

The first step that the merge sort algorithm would implement would be to break this array into equal halves. This algorithm works recursively meaning that it keeps on dividing the array until it cannot be divided further. Once all the subarrays are divided and sorted, they are merged together to form a completely sorted array.

The Algorithm for Merge Sort :

step 1: start

step 2: declare array and left, right, mid variable

step 3: perform the merge function.
if left > right
return
mid= (left+right)/2
mergesort(array, left, mid)
mergesort(array, mid+1, right)
merge(array, left, mid, right)

step 4: Stop

Implementation for Merge Sort :

# Python program for implementation of MergeSort
def mergeSort(arr):
    if len(arr) > 1:
         # Finding the mid of the array
        mid = len(arr)//2
        # splicing the list before the middle (therefore in case of an array     having an odd number of elements, the left halve gets more elements.

        L = arr[:mid]
        # splicing the list after the middle
        R = arr[mid:]
        # Sorting the first half by recursion
        mergeSort(L)
        # Sorting the second half by recursion
        mergeSort(R)
        i = j = k = 0

        # Copy data to temp arrays L[] and R[]
        while i < len(L) and j < len(R):
            if L[i] <= R[j]: #if the first element of the left halve is greater than the first element of the right halve
                arr[k] = L[i]
                i += 1
            else:
                arr[k] = R[j]
                j += 1
            k += 1

        # Checking if any element was left
        while i < len(L):
            arr[k] = L[i]
            i += 1
            k += 1

        while j < len(R):
            arr[k] = R[j]
            j += 1
            k += 1

# Code to print the list

def printList(arr):
    for i in range(len(arr)):
        print(arr[i], end=" ")
    print()

# Driver Code
if __name__ == '__main__':
    arr = [12, 11, 13, 5, 6, 7]
    print("Given array is", end="\n")
    printList(arr)
    mergeSort(arr)
    print("Sorted array is: ", end="\n")
    printList(arr)

# This code is contributed by Mayank Khanna (Geeks for Geeks website)

Time Complexity :

Best, Worst and Average cases: As merge sort divides the array into two halves, sorts them and then merges them together in linear time, the time complexity for all three cases is θ(nlogn).

Bubble Sort

Bubble Sort is the simplest sorting algorithm that works by repeatedly swapping the adjacent elements if they are in the wrong order (that is if the second element is smaller than the first). However, this algorithm is not suitable for large data sets as its average and worst-case time complexity is quite high.

Working :

Bubble sort starts with the first element of the given array, which we call the 'bubble element. It then continues to swap that element with the adjacent elements if they are placed in the wrong order up until the end of the array. For example :

Algorithm for Bubble Sort :

begin BubbleSort(list)

   for all elements of list
      if list[i] > list[i+1]
         swap(list[i], list[i+1])
      end if
   end for

   return list

end BubbleSort

Implementation :

def bubbleSort(arr):
    n = len(arr)
    # Traverse through all array elements
    for i in range(n):
        # Last i elements are already in place
        for j in range(0, n-i-1):
            # traverse the array from 0 to n-i-1 (end of the array)
            # Swap if the element found is greater than the next element
            if arr[j] > arr[j+1]:
                arr[j], arr[j+1] = arr[j+1], arr[j]
# Driver code to test above
if __name__ == "__main__":
  arr = [5, 1, 4, 2, 8]
  bubbleSort(arr)
  print("Sorted array is:")
  for i in range(len(arr)):
      print("%d" % arr[i], end=" ")

Time Complexity :

Worst and Average case: The worst and average cases occur when the array is reverse-sorted.

Total number of comparison (Worst case) = n(n-1)/2*
Total number of swaps (Worst case) =* n(n-1)/2

Therefore, the time complexity is O(N²)*.*

Best Case: The best case for bubble sort is when the given array is already sorted. The time complexity for this is O(N)*.*

Selection Sort

The selection sort algorithm sorts an array by repeatedly finding the minimum element from the unsorted part and placing it at the front. ( Yes, at the beginning there is no "sorted part" so we traverse the entire array ).

Working :

For this example, consider array of n=5 to be arr[] = {48,52,13,34,19}

First Pass :
For the first pass in the selection sort algorithms, we traverse the array from index 0-4. As a result of this traversal (where we also simultaneously compare elements), we find that 13 is the lowest element. Replacing the element at index 0 (48) with 13,
The new array becomes - {13,52,48,34,19}

Second Pass :
For the second pass, the algorithm skips over the sorted element (which is the element at position 0) and iterates over the remaining unsorted portion. It finds the smallest number and then places it before the unsorted section (i.e. after element[0]).
The new array becomes - {13,19,48,34,52}

Third Pass :
For the third pass, the algorithm skips over the sorted elements (the elements at indexes 0 and 1) and iterates over the remaining unsorted position. It finds the smallest number from the unsorted portion and once again places it after the sorted portion and before the unsorted portion.
The new array becomes - {13,19,34,48,52}

Fourth pass :
For the fourth pass, the algorithm skips over the sorted elements (elements at indexes 0, 1 and 2) and iterates over the unsorted elements. Fortunately, this 'unsorted' portion is already sorted as 48 is placed before 52. And there we have our fully sorted array -
{13,19,34,48,52}

Implementation :

import sys
A = [64, 25, 12, 22, 11]
# Traverse through all array elements
for i in range(len(A)):
    # Find the minimum element in remaining
    # unsorted array
    min_idx = i
    for j in range(i+1, len(A)):
        if A[min_idx] > A[j]:
            min_idx = j   
    # Swap the found minimum element with
    # the first element       
    A[i], A[min_idx] = A[min_idx], A[i]

# Driver code to test above
print ("Sorted array")
for i in range(len(A)):
    print("%d" %A[i],end=" ")

Time Complexity :

In the selection sort algorithm, the time complexity is O(n²) in all three cases. This is because, in each step, we are required to find minimum elements so that they can be placed in the correct position. Once we trace the complete array, we will get our minimum element.

What is the time complexity of an algorithm? :

Instead of measuring the actual time required in executing each statement in the code, Time Complexity considers how many times each statement executes.

O(nlogn) > O(n²) > O(n)

CSS Animations:

In CSS, the @keyframes command is used to create animations. Note that @keyframes might not work on every browser. The table below specifies which version of different browsers can support @keyframes :

For example, consider the following code snippet:

@keyframes works by slowly transitioning from the beginning position or beginning styles to the modified positions or styles. To declare a keyframes animation, @keyframes is used along with the name of your animation. Inside the brackets, you'll have to declare the "from" which is the starting position and the "to" which is the final position. "From" and "to" are the equivalent of "0%" and "100%" which is also an alternative you can use.

If you want to create an animation that is a bit more complex, i.e. has a couple of different stages, you can use different percentages such as "20%", "50%" etc. which can apply different styles or different properties at different stages in your animation. Consider the code below which uses different stages to change the colour of a div:

Notice the syntax used to give the animation properties to the div. animation-name, and animation-duration. The following table contains a few of the essential CSS animation properties.

You can condense all of these properties into a single line using the animation: property with the following syntax :
animation: name duration timing-function delay iteration-count direction fill-mode play-state;

JavaScript :

JavaScript animations are a tad bit trickier. Consider the following piece of code, which we'll break down to understand how to build a JavaScript animation.

In our HTML section, we've created a button and passed the method "move()" to it to be called on a user's click. In function move(), we've assigned the element "animate" which is a div to the constant "elem". Setting the initial position variable (pos) to 50, we then create a new frame every 5 milliseconds (using setInterval(frame, 5)). This will go on for as long as the position does not become 350. While the position is not 350, we increment the value of pos by 1. The only thing left to do is to assign the new positions to the element.

Conclusion:

While I agree that both CSS and Js are great in their own ways, there needs to be a clear winner. That winner, for me, would be CSS. CSS, although used mostly for simpler "one-shot" animations is much more efficient than JavaScript which, however, is still preferred for advanced and more complex animations. CSS can be used to create a wide variety of animations smoothly and seamlessly without any of the complex syntaxes that come with JavaScript (who wants to write that much code?!).

Now, you may be wondering what the point is in using lists when arrays are much faster. Well, that is because the elements stored in an array are homogeneous i.e. they have the same datatype, whereas a list can contain all sorts of data regardless of its data type, which makes it much more efficient to group certain information together.

~ Accessing elements in a list

Since lists are collections of items, you can access any element in a list by telling python its position or index. Indexing always begins at 0. This is because an index is simply the distance of an element from the starting point. Since the first element is positioned at the start, the distance becomes 0 and therefore the index becomes 0. Take a look at the following code sample :

new_list = ['Jake', 'Amy', 'Charles'] #note the square brackets
print(new_list)

On running this, we get an output that looks something like this :

['Jake', 'Amy', 'Charles']

As you can see, Python returns its representation of a list, including the square brackets. To remove these and get the actual values, you can print each individual item in the list using its index.

new_list = ['Jake',  'Amy',  'Charles']             
print(new_list[0])

Since the element at index zero, that is the first element, is 'Jake', the output produced will be Jake.

If you don't want to manually go on printing the entire contents of a list by this method, you can use a for loop to iterate over each element and consequently print it.

new_list = ['Jake',  'Amy',  'Charles']
for name in new_list:
    print(name)

The output produced would look something like this:

Jake
Amy
Charles

~ List functions

1. Adding Elements to a list

   a. To add elements to the end of a list, you can use the append() function.

    orig_list = ['Jake',  'Amy',  'Charles'] 
    new_list = ['Jake',  'Amy',  'Charles']   
    new_list.append('Rosa')
    print(orig_list)
    print(new_list)
   

   The output would look something like this :

   ['Jake', 'Amy', 'Charles'] ['Jake', 'Amy', 'Charles', 'Rosa']

b. You can also insert an element into a list at any given position using the .insert() function.

orig_list = ['Jake',  'Amy',  'Charles'] 
new_list = ['Jake',  'Amy',  'Charles']   
new_list.insert(0,'Rosa')
print(orig_list)
print(new_list)

The output would be :

['Jake', 'Amy', 'Charles'] ['Rosa', 'Jake', 'Amy', 'Charles']

As you can see, the insert function opens up a space at index zero (as mentioned above) which is then filled up by 'Rosa', the element inserted into the list.

1. Removing Elements from a list

   a. Removing an element from a certain position

   For this purpose, you can use the del statement.

    orig_list = ['Jake',  'Amy',  'Charles'] 
    new_list = ['Jake',  'Amy',  'Charles']   
    del new_list[0]
    print(orig_list)
    print(new_list)
   

The above code removes the element at index 0, which is Jake, leaving us with ['Amy', 'Charles'].

b. Removing an element and re-using it
You can remove a certain element from a list using the pop() method and store the deleted element in a variable so that it can be reused.

orig_list = ['Jake',  'Amy',  'Charles'] 
new_list = ['Jake',  'Amy',  'Charles']   
popped = new_list.pop()
print(orig_list)
print(new_list)

By default, the element popped is that of the last index. However, you can pop an element off of any index by specifying it in between the brackets of pop() like : new_list.pop(0)

c. Removing an element without knowing the index
If you want to remove an element from a list but do not know anything but its value, you can use the remove() function.

orig_list = ['Jake',  'Amy',  'Charles'] 
new_list = ['Jake',  'Amy',  'Charles']   
new_list.remove('Amy')
print(orig_list)
print(new_list)

The code above, quite obviously, removes Amy from the list new_list.

Other common list methods include :

1. Sort() -

   list.sort() is used to sort a list alphabetically.

2. Reverse() -

   list.reverse() is used to reverse a list.

3. len() -

   len(list) is used to get the length of a string which might be useful if you want to create a loop.

And that was an introduction to lists in Python! Hope you learned something new and thanks for sticking around till the end.

A dry run, in any programming language simply means to execute your code manually by going over each iteration, operation, and function to test it before the compilation and real execution of the program by a legit compiler.

Dry runs are usually performed for the following purposes:

1. To mitigate the effects of possible failure of a piece of code
2. To validate a test case and improve it before documenting its steps and assertions down.
3. To verify that a piece of code does not contain any bugs.
4. To identify and solve logical errors
5. To help understand code.

Traditionally, a dry run would involve a programmer sitting down with a pen and paper and manually following the value of a variable to check that it was used and updated as expected. If the value is not what it is supposed to be, they can identify and correct the section of code that resulted in the errors. For this example, consider the following piece of code that reverses a given number:

#include <stdio.h>

int main() {

  int n, reverse = 0, remainder;

  printf("Enter an integer: ");
  scanf("%d", &n);

  while (n != 0) {
    remainder = n % 10;
    reverse = reverse * 10 + remainder;
    n /= 10;
  }

  printf("Reversed number = %d", reverse);

}

We have three variables here, n, reverse and remainder. Let's track the value of each of these via a table.

In our code, we have assigned the value of the user's input to the variable 'n'. Say that the integer we enter is '3456'. The variable n sets to 3456. Next, there is a while loop, where the condition is set to n!=0 meaning that the loop will run as long as n is not equal to zero. The variable 'remainder' is set to n%10 which in this case is 3456%10, which equals 6. The variable 'reverse' is set to reverse x 10 + remainder. 'Reverse' is initialized above to zero, hence the condition becomes 0x10+remainder. Plugging in the value of 'remainder', we get reverse = 0x10+6, which equals 6 as well. Now, for the last statement in the while loop, n/=10. The '/=' operator is a shorthand operator which can be written alternatively as n = n/10. The updated value of n becomes 3456 (the original value of n) / 10, which evaluates to 345. Putting in the values of all our variables, our table should look something like this:

The loop will not end here, however. As the value of n is 345 which satisfies the condition n!=0, the loop will run a couple more times. Since the loop runs once more, the statements inside it will run again as well. The variable 'remainder' is set to n%10, that is, 345%10, which evaluates to 5. The variable 'reverse' becomes 6 (the new value of reverse) x 10 + 'remainder', which evaluates to 60+5, that is 65. The variable n is updated to n/10, which is 345/10, which evaluates to 34.

The value of n, which is 34, is still greater than zero. Thus, the loop runs once again. The variable 'remainder' is set to n%10, that is, 34%10, which evaluates to 4. The variable 'reverse' becomes 65 (the new value of reverse) x 10 + 'remainder', which evaluates to 650+4, that is 654. The variable n is updated to n/10, that is 34/10, which evaluates to 3.

The value of n, which is 3, is still greater than zero. The loop runs one final time. The variable 'remainder' is set to n%10, that is, 3%10, which evaluates to 3. The variable 'reverse' becomes 654 (the new value of reverse) x 10 + 'remainder', which evaluates to 6540+3, that is 6543. The variable n is updated to n/10, that is 3/10, which evaluates to 0.

Now that the value of n has finally become zero, the loop ends as the condition evaluates to false. Therefore, the line after the loop, that is the print statement, will be executed. The output produced would look something like this: Reversed number = 6543.

And that was the end of this article! Hope you learned something new.

1. Array declaration : In order to declare strings, you first need to understand what a string actually is. A string, is an array of characters, meaning that strings are actually chains of individual characters. You just need to declare an array of any size you want and assign it, the string value enclosed in double quotes.

#include <stdio.h>

int main (void) 
{
char str[3] = "Hi!";

printf("%s\n",s);

}

The output would look like - Hi!

Inputting a string is comparatively harder. You need to get memory from a library and use it to ask the user for a string.

#include <stdio.h>
#include <stdlib.h>

int main (void) 
{

    char s[3];
    for(int i = 0; i<3; i++){
    s[i] = malloc(3*(sizeof(char))); //getting memory for 3 chars from the user
    }
    scanf("%s",s);
    printf("%s\n",s);
    free(s);

}

1. Pointer declaration : In C, there are variables to store the address of certain things, like characters or integers. These pointers can help us store the address of characters, which form, you guessed it, a string. Now, how would you implement this in code? Well, a pointers is declared by '*', and a string stores a double quote value, so you might write this in code as -

#include <stdio.h>

int main (void) 
{
char *s = "Hi!";
printf("%s\n",s);

}

The output would look like - Hi!

String input :

#include <stdio.h>
#include <stdlib.h>

int main(void)
{
    char *s = malloc(3*(sizeof(char))); // getting as much memory required for 3 chars
    scanf("%s",s); // getting the string
    printf("%s\n",s); // printing the string
    free(s); // freeing the memory
}

1. Creating a string : In my opinion,this is the easiest and most efficient way to deal with strings. You don't have a string data type? just create one! I know you're probably thinking that it's some advanced code but trust me, its not. To create your own data type, the function typedef is used. You use this (function?) and then the format which it replaces.

#include <stdio.h>

typedef char *string; //string is the name you want to call the datatype

int main(void)
{
string s = "HI!";
printf("%s\n",s);
}

To input a string :

#include <stdio.h>

typedef char *string; //string is the name you want to call the datatype

int main(void)
{
string s;
scanf("%s",s);
printf("%s\n",s);
}

And these are my 3 favorite ways to declare Strings!