DEV Community: Jithin KS

Understanding the Universe through Code: Planetary Motion

Jithin KS — Fri, 15 Jan 2021 03:58:12 +0000

We know that our planet Earth is in constant motion around the Sun.

Have you ever thought about how our ancestors discovered this?

I think most of us don't fully appreciate the difficulties that they encountered in making this discovery.

Even though we are not feeling it, the Earth is actually moving around the Sun at a staggering speed of 30km/s.

Just go out and look at the sky during the day time or at night and see if you can find any hints that will help you to reach this conclusion. It turns out that there aren't any trivial ones.

It took the effort of a lot of great scientific minds, over several years, to discover this.

In this article, we are going to make an effort to understand and appreciate the beauty of this discovery with the help of visualizations.

Before that, let me tell you about one of the most important observations made by our ancestors that lead to this discovery.

They carefully observed the motion of planets in the sky over several days and months and kept track of their positions very accurately.

They found out that the planets traced out a curve which looked like this.

Can you believe that this observation was what lead them to speculate (correctly) that the Earth and the other planets are moving around the Sun?

How on earth did this "curve" that they observe in the sky lead them to this seemingly unrelated conclusion?

Let us try to find this out by creating a miniature solar system visualization.

And with the help of a few lines of code, we make our solar system model.

There is Earth, Mars and the Sun.

Now let us shift the centre of the coordinate to the Earth. This is necessary because from our viewpoint, we feel that the Earth is stationary and the rest of the heavenly bodies are moving around us.

Now from this viewpoint, let us look at the trajectory traced by Mars.

At first, it might look confusing, but observe this visualization for some time.

Does the curve look familiar?

The curve that we see in the sky is a small portion of the curve that we obtained now. But it looks squeezed when viewed from Earth's vantage point.

We obtained this by shifting the centre of the coordinate system to the Earth and tracing the path of Mars. Cool isn't it?

It took Johannes Kepler almost 40 years to analyse the data of the positions of the planets to finally come up with his laws that mathematically explained these ideas.

If you wish to get more clarity into these ideas, please see the workbook given below and play around with the visualizations and code yourself.

Workbook (Open in desktop)

PS - While creating the visualizations, I've assumed that the orbits of the planets are circular. But in reality, they are elliptical. The circular orbit which is an approximation gives us a reasonably good explanation. But to be more precise, we need elliptical orbits. And of course, do not take the scales seriously.

Thanks for reading !!!

Dynamic Learning: An open-source project to teach effectively using interactive visualisations

Jithin KS — Fri, 23 Oct 2020 12:42:44 +0000

Visualizations are extremely powerful aids in education. If you are familiar with youtube channels like 3Blue1Brown, Zach Star, Minute Physics or Physics Videos by Eugene Khutoryansky (If you are not already, you should probably check them out, they are really good), you can't help but be amazed by how beautifully they explain difficult STEM topics. And this is because they make use of visualizations.

Now imagine a world in which every teacher could teach as beautifully as they do! That is our end-goal and the project that I'm going to describe is a small step towards that.

An open-source project/community comprising teachers and developers who are genuinely interested in using visualisations to aid their teaching.

If you are also a person who would love to see this, read on. This project would definitely keep you interested.

To begin, I asked myself the most important question:

How to make a tool that would best help in teaching this way?

For explaining topics in a visual way, teachers can make use of interactive visualizations, visualizations that we can interact with to get real-time responses. The advantage of interactive visualization is it can be used either in live classes or in recorded lessons. Also, students themselves can experiment with them to learn more about the system under study.

Currently, the web is one of the best platforms for creating and sharing visualizations. There are plenty of tools available for creating them. For this project, I've chosen to primarily work with an open-source javascript graphics library called p5.js because it is very beginner-friendly, but powerful enough for our needs. There is also an online web editor exclusively made for p5.js where we can very easily code and share visualizations.

I've been thinking about this problem for quite some time now. I want to help teachers teach using visualizations and this is a list of features that I think will help them adopt this teaching methodology.

Provide with a large repository of interactive visualizations from which teachers can easily browse through and find visualizations for a specific topic.
The ability to easily bring about whatever modifications that teachers want to, in the visualizations to suit their needs.
If the visualization that teachers need is not present in the said repository, they should be able to request the community of programmers and collaborate with them to create it. In this way, with time, we will have more and more visualizations enriching the repository.
A facility where they could organize and keep visualizations for a particular topic (maybe in the form of slides) so that they don't need to create these slides every time they present the same topic. Teachers may also share their slides with other teachers.
A tool where teachers can write/draw theorems/equations/diagrams and show interactive visualizations simultaneously.

How Dynamic Learning fits the bill!

Dynamic Learning is an open-source project/platform that is being developed for addressing these requirements. Let's see what it offers.

A central repository called simulation collection where we provide a collection of visualizations/simulations that can be added to lessons prepared by teachers.

We only have four simulations in the repo now, but an increase in users will inevitably lead to more and more simulations.
Teachers will request new simulations to the programmer community and collaborate with them to develop more of them from here.

The simulations are developed and saved in the online p5 text editor. The advantage of this is that any time anyone can have access to the code for the visualization.
Teachers can create a duplicate of the visualization if they want and customize them according to their need if they know how to code (Or they can even get the help of the programmer community for making this change).
The workbook creator can be used to organize visualizations into slides. These slides can be saved and shared with the other teachers.

The workbook creator also has a draw mode using which they can draw, write and add annotations.

Teachers can create accounts and save, organize, share the lessons that they create.

The project is under active development and we need your support to improve and make it better.

How can you contribute?

Introduce the project to someone you know who is interested in teaching using interactive visualizations or who loves to code interactive visualizations.
Use Dynamic Learning in your lessons.
Suggest new STEM visualizations by creating new issues here.
Develop new visualizations, save them in p5 online text editor and share the link, we will add them to the simulations repo.
Use the application and report bugs here - front end, back end.
Suggest new features in the application.
Help develop new features.
Improve the code quality and add test cases in the application.

A lot of work has been put into making it this far. Thanks to all the contributors who helped. Thanks to Processing Foundation for developing amazing tools like p5.js and p5.js web editor which inspired me to start the project in the first place. Hoping to find more like-minded people willing to contribute.

If you are interested in contributing. Do leave a comment or contact us at developers@dynamiclearning.io

PS - I've used the terminologies interactive visualization and simulation interchangeably. They both refer to the same thing at least in the context of this project.

Some useful links-
Webapp
Sample workbook
About the project
Project organization
Front end source code (NextJS, React)
Back end source code (NodeJS, GraphQL)
Simulation ideas
GSoC 2018 article
GSoC 2019 article
Simulation Repo

Trajectory lab - fun project in p5.js

Jithin KS — Sat, 20 Jun 2020 10:46:54 +0000

I created an interactive visualization in p5.js. It visualizes the trajectory followed by a particle in gravitational field.

See the visualization

You can add new gravitational source by clicking the Add source button in the bottom. A source can be deleted by selecting it and pressing the delete button.

Here is the source code for the
project.

If you like it, please leave a star in github :)

Writing (clean) React code

Jithin KS — Wed, 11 Mar 2020 06:22:27 +0000

Building simple software

We generally think that building complex software is hard. But the hardest thing is building complex software in a way that is as simple as possible.

Even a simple software can turn into a complicated mess if we don't put a conscious effort into keeping it simple.

One of the main metrics of simplicity in a piece of software is how easily an outside developer can understand the codebase and work on top of it to extend and improve it.

In this post, I'm going to explain some of the things that I've learned in the past couple of months about writing simple and clean React code.

1. Make your React component as short as possible

Compared to the time taken to write code, developers spend almost 10x time to read and understand it. Our goal should be to make this process as effortless as possible for them. As the size of the code increases, the readability of the code drops drastically.

If you do not keep a check on the size of the React component, it can quickly grow beyond your control. If the component is really large, the person who wrote it might be familiar with all of its parts and understand its working, but it will never be easy for another developer to understand it. Components with 500 or 1000 lines of code will be a nightmare for an outside developer.

Always see if you can refactor the code into separate files. Break down your component into appropriate sub components. Put helper functions used within the component into separate JS files and import them. This helps improve reusability as a good side effect.

2. Components which are at the same level of abstraction should be together

If you're familiar with Clean Code by the infamous Uncle Bob, you might be familiar with this concept in terms of functions. Functions that are at the same level of abstraction should be present together. This makes the code easy to read. The same applies for components. Components that are at the same level of abstraction should occur together.

Case 1

<TopMenu/>
<TextEditor/>
<RightMenu/>

Case 2

<div>
  <button onClick={handleFilePress}>File</button>
  <button onClick={handleSavePress}>Save</button>
</div>
<Editor/>
<RightMenu/>

The first piece of code immediately gives the reader a high level idea about the text editor app. But the second piece of code is not as obvious as the first.

3. Reduce the number of props to as minimum as possible

In the book clean code, it is advised that no. of parameters of a function should be as minimum as possible. Why? Because as the number of parameters increases, what the function does will become less and less obvious(Props to a React component can be considered to be its parameters)

For example, consider the code

Case 1

<Table 
  height={100}
  width={20}
  scrollable
  resizable
  cellColor='grey'
  headerColor='black'
  font='Roboto'
  data={data}
/>

Case 2

const config={
  height:100,
  width:20,
  scrollable:true,
  resizable:true,
}
const styles = {
  cellColor: 'grey',
  headerColor: 'black',
  font: 'Roboto'
}
return (
  <Table
    config={config}
    data={data}
    styles={styles}
  />
)

The second code snippet looks more neat and understandable when compared to the first because when a developer looks at the component, in his mind, a mental picture is immediately formed, that the Table component has three high-level props which are data, style, and config. Then if he wants, he can dig deeper into any of them.

In the first code snippet, the developer is bombarded with a lot of information immediately and it is really easy for him to get lost here.

If needed, you should abstract the props as done in creating the config object. It is really easy to add more prop to the component every time you need to add one. But it takes some care and attention to stop, think and refactor to make the code look better.

Let me give you another example

<Circle
 x={x}
 y={y}
 radius={radius} 
/>

// center = {x,y}
<Circle
 center={center}
 radius={radius}
/>

I've abstracted the x and y into a center object which makes the code more neat and clean.

4. Abstract application-specific API calls using Promises

Rather than writing the API calls directly in the component. Abstract the fetch calls into functions.

Below is the code for rendering a list of comments.

Case 1

const CommentList = ({ postId }) => {

  const {commentList, setCommentList} = useState([])

  useEffect(()=>{
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      body: { postId }
    })
    .then(response => response.json())
    .then(commentList => setCommentList(commentList))  
  }, [])

  return (
    <>
      {comments.map(comment=>(
        <Comment
           author={comment.author}
           text={comment.text}
        />
      ))}
    </>
  )
}

Case 2

const CommentList = ({ postId }) => {

  const {commentList, setCommentList} = useState([])

  useEffect(()=>{
    getCommentList(postId).then((commentList)=>{
      setCommentList(commentList)
    })  
  }, [])

  return (
    <>
      {comments.map(comment=>(
        <Comment
           author={comment.author}
           text={comment.text}
        />
      ))}
    </>
  )
}

const getCommentList = (postId) => {
  return new Promise((resolve) => {
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      body: { postId } 
    })
    .then(response => response.json())
    .then(commentList => resolve(commentList))
    .catch(err=>console.log(err))
  })
}

In case 2, the React component for rendering comments in a post looks way cleaner when the details of the fetch call are taken out and abstracted into a new function.

To get your code even more organized, you can put all these application-specific API calls into a separate file that will reduce the clutter in the react component.

Conclusion

Rather than jumping in without a second thought and writing code, spend sufficient time in designing the components, their responsibilities, the hierarchy between them, props, state, etc. It will save a lot of time and effort for you as well as the other developers in your team.

So keep it short, sweet and simple and you should be okay :)

PS: Please feel free to add points that are not covered here in the comments

Understanding the Universe through Code: Spiral galaxies

Jithin KS — Fri, 06 Mar 2020 03:04:48 +0000

Mathematical nature of our Universe

The Universe, from the tiniest to the largest scale that we have so far been capable of exploring, is mathematical in nature; and this has always fascinated me! It is because we could understand and exploit this, that we were able to develop technologies that would’ve been perceived to be nothing less than magic by our ancestors if they were here to see them. At present, using technology, we can communicate with our loved ones even on the other side of the globe at any time simply because our Universe obeys laws of quantum mechanics (We use transistors in our devices which were built by making use of laws of quantum mechanics) and we were lucky enough to understand the laws and use it to our advantage.

This means that if we are good at Mathematics, we can learn a lot about our Universe. Scientific geniuses who have come before us like Newton and Einstein made use of Mathematics to gain a very deep understanding of our Universe. But I think we are a bit luckier than people who lived before us because we are living in the age of computers. Computers help us do mathematics and calculations more easily and quickly which means we have an opportunity to understand the Universe better now.

About this series of blog posts

In this blog series, I'm going to make an attempt to take up some interesting observations in the Universe and make use of the power of simple math and coding to gain more insights into them using visualizations.

I'll be using a Javascript library called p5.js which is one of the easiest libraries to create visualizations on the web. If you want to get familiarized with p5, there is an amazing Youtube channel called coding train which will help you and you can also make use of their documentation.

I'll be explaining a topic through a sequence of 2 blog posts. In the first, I'll illustrate the idea using visualizations and in the second, I'll explain in detail how those visualizations are created.

Spiral arms of galaxies

There won't be anybody who is not awestruck by the beauty of spiral galaxies. They are one of the most beautiful structures in the Universe that we have been able to observe. Today we are going to address the question of how galaxies get their beautiful spiral shape with the help of some simple simulations created using basic math and coding.

Unfortunately, even now, scientists don't fully understand how spiral galaxies get their shape. But some interesting theories have been developed to explain this out of which one of the most widely accepted is the Density wave theory.

According to this theory, the spiral arms of galaxies are the places where the density of the stars is relatively higher which is caused by gravitational effects within the galaxy.

The Spiral arms can be modeled by using elliptical orbits that are tilted slightly as their radii grow as shown in the figure above.

I'm going to illustrate this idea using an app called Dynamic learning. Dynamic learning is an open-source project/platform which aims at improving Science and Math education with the use of interactive visualizations.

Open the Lesson in Dynamic learning ( please view in desktop)

I hope you got a basic idea of density wave theory and how it leads to the formation of spiral arms of galaxies.

In the next post, I'll get into the details of creating the visualizations itself !!!