Category: today i learned (til)

health, fitness, medicine, environment, ecology, how to learn tricky topics in science and math, new discoveries, news, current events

  • Origami & Bio-inspired Design

    Origami & Bio-inspired Design

    You’ve probably seen pictures of origami before, or even folded some yourself! Origami is an ancient art form that originated in China in the 2nd century AD. It made its way to Japan around the 6th century, where it became an art for both recreation & decorating shrines. In the centuries since, it’s evolved into a complicated craft that produces beautiful art from a very simple medium—a single sheet of square paper. What you might not realize, however, is how closely origami is linked with science and math.

    The Mathematical Basis of Origami

    Whenever you fold a piece of paper, you’re performing an action that’s incredibly mathematical. The rules of geometry govern origami, and you can describe all possible folds in six axioms. These axioms tell you what kinds of geometric constructions & proofs are possible with origami and can be used to determine if a set of folds is even physically possible. If you want to learn more about these axioms, check out this webpage by origamist Robert J. Lang!

    Bio-inspired design is an interdisciplinary approach to design that takes inspiration from nature to design new technologies. You can combine the mathematical principles of origami with bio-inspired design to create novel robot inventions. Today, we’ll go through a few examples that span a wide spectrum of species!

    Worms, Snakes, and Other Slithery Ones

    Engineers are currently trying to develop better rescue robots that can navigate complex terrain. Worms, snakes, and other slithering & slinking creatures cross crazy (relative to them) terrain on a day-to-day basis, and are a great source of inspiration for scientists.

    Some robotics labs have taken inspiration from the movements of snakes, and have created robot origami snakes that slither around and replicate the moving patterns of their natural counterparts. These multi-segment robot prototypes have a versatile range of movement.

    Other labs have also mimicked the slinking movement of worms! Each of the segments in these worm-bots is made up of Yoshimura-Ori folds. You can see the crease pattern below in (A) of figure 1. The Yoshimura-Ori fold is a series of repeating triangles that can be collapsed into a cylindrical structure. They can be folded into an “open” or “closed” configuration which determines how compressed the unit is. A sequence of these folds is highly compressible & deformable while still maintaining its rigidity. It allows for a wide range of motion, which you can see in figure 2 of the movement of an earthworm inspired robot.

    Creaese diagram for yoshimura-ori folds, with diagrams of it expanded/contracted.
    Figure 1. Crease pattern of yoshimura-ori earthworm robot
    sequence of diagrams and photos showing the degree of motion of the worm robot
    Figure 2. Range of motion of yoshimura-ori folds

    The Yoshimura-ori structure allows the robot to mimic both the crawling motion that earthworms take as well as sharp directional turns. This technique holds a lot of promise for the future of all-terrain robots!

    Jellyfish & Aquatic Robots

    The land isn’t the only place origami is impacting robotics. The undulating motions that jellyfish swim with are both pretty and inspire researchers to develop new modes of underwater movement.

    Jellyfish are a type of organism called a medusa, which means that their body is umbrella shaped. Medusae are recognized to be the earliest multicellular organisms to have evolved muscular swimming, and while jellyfish generally float along ocean currents wherever they might go, they can use their hydrostatic skeleton to control vertical movement in a pinch. Prolate (long) medusae use jet propulsion to rapidly accelerate and avoid predators.

    They do this by contracting a water pouch in their bodies. The water expelled propels them in the opposite direction. They then expand their pouch and fill it with water again, ready to repeat for another burst of movement.

    Researchers are attempting to mimic this motion by combining soft-body robotics and origami engineering. The idea is that by creating a flexible origami polyhedral (a flexiball) they can motorize it in the same way medusae use jet propulsion underwater. The resulting flexiball they went with is known as a rhombic triacontahedron, and has 30 faces.

    Below is a picture of their 3D printed flexiball and how it changes shape after contraction.

    a before and after image of a 3d printed flexible triacontahedron being deformed
    Figure 3. Rhombic triacontahedtron flexiball

    The researchers then designed a lightweight, waterproof enclosure for the flexiball. The flexiball is contracted using three ropes connected to the grooves of the polyhedra’s edges.

    side profile diagram of jellyfish robot
    Figure 4. Side profile of jellyfish bot mechanisms

    Make your own!

    You don’t have to be an engineer to explore origami & science yourself! Try folding your own tessellation using the template below! Fold all the blue/dashed lines in one direction, and the red/dotted lines in the opposite direction.

    miura ori crease pattern
    Miura ori template! Try folding it yourself
    gif of miura ori fold expanding and contracting
    What your miura ori fold should do!

     

    Sources:

    Hu et al., “An Origami Flexiball-Inspired Soft Robotic Jellyfish.”

    Qiu et al., “Design and parameter optimization of a biomimetic jellyfish origami mechanism (BJOM) based on waterbomb tessellation.”

    Luo et al., “OriSnake: Design, Fabrication, and Experimental Analysis of a 3-D Origami Snake Robot.”

    Zhang et al., “Yoshimura-origami Based Earthworm-like Robot With 3-dimensional Locomotion Capability.”

    Schroeder, et al., “An electric-eel-inspired soft power source from stacked hydrogels.”

    Miura-ori crease pattern & GIF from Wikipedia Commons

  • Daguerreo-what? The Chemistry Behind Early Photography!

    Daguerreo-what? The Chemistry Behind Early Photography!

    Before smartphones and DSLRs were everywhere, photography was a physical, hands-on process. I’ll give you a quick overview of the chemistry behind the first type of photograph, the daguerreotype!

    Daguerreotype of Junius Booth, an actor, in theatrical garb
    Example of a daguerreotype

    Daguerreotypes were invented by Louis-Jacques-Mandé Daguerre in France in 1839. They consist of a picture developed on a silver-plated copper sheet. Each daguerreotype is a direct positive, meaning its image is created directly from the exposure without an intermediary negative. This contrasts with film, where your pictures are taken on a negative (a filmstrip) and then exposed as needed to create a positive. Because of this, the only way to replicate a daguerreotype is to rephotograph it, making each image incredibly unique!

    When preparing to take a daguerreotype, you would need to first polish a silver sheet until it was reflective like a mirror. Traditionally, to save resources photographers would use copper sheets plated with silver. Next, they would expose the plate to halide vapors to make the surface photosensitive Ag halides.

    When Louis Daguerre first invented the daguerreotype, he used iodine vapors. Iodine halides weren’t actually very photosensitive, and after a year of experimentation and innovation, people began to use more reactive halides such as chlorine and bromine as substitutes.

    The chemical formula for this step can be written down as:

    2Ag(s) + 1I2(g) à 2AgI

    2Ag(s) + 1Cl2(g) à 2AgCl

    2Ag(s) + 1Br2(g) à 2AgBr

    Once the plate is prepared, the photographer would set up the camera, pose their subject, and focus the lens. After their shot was composed, they would insert the plate into the camera’s plateholder, and begin taking the photograph. Because exposure times were so slow, instead of having a mechanical shutter, they would simply take the lens cap off to start the exposure and put it back on to stop it. While the plate is exposing, it would react with light:

    10AgX + 10hv à 2Ag5(s) + 5X2(g) (x being the halide)

    After the exposure is taken, portions of the plate that reacted to light consist of just Ag, while nonreactive ones remain AgX. At this point, the picture would still be invisible, and needs to be developed to be seen.

    Next, photographers would develop it using mercury vapor. This causes an amalgam (a mercury alloy) to form with the silver.

    11Ag5 + 45Hg(g) à 5Ag11Hg9 & 3Ag5 + 20Hg(g) à 5Ag3Hg4

    While this developed the image, it left the image in a highly reactive state. It could literally be wiped off by your hand! In order to fix the image to the plate, they would wash it with water and sodium thiosulfate. It would react with the thiosulfates to remove unreacted Ag halides and prevent the mercury amalgams from tarnishing.

    2Na2S2O3 + AgX à Na3[Ag8S2O3] + NaX

    This is where the traditional daguerreotype process finished! For display, they would be placed in a frame under glass to keep the picture safe. Further innovations to the technique included adding a layer of protective gilding & manually coloring the image.

    What makes the daguerreotype so cool is that it’s accurate down to the molecular level. Unlike digital cameras limited by pixels and film stock limited by crystal grain, daguerreotypes are direct exposures to light. If you look at a daguerreotype, you’ll notice they’re incredibly sharp images.

    Recently, there’s been a revival of traditional photographic techniques. Tons of practitioners have been experimenting with daguerreotype and other similar techniques such as wet-plate collodion, and many have been hosting workshops to introduce the public to them.

    Hopefully, this has sparked an interest in the daguerreotype. I’d encourage you to explore it more! It’s a really cool form of photography, and learning about it helps you appreciate the point-and-click cameras we take for granted today!

    Works Cited

    https://www.metmuseum.org/essays/daguerre-1787-1851-and-the-invention-of-photography

    https://medium.com/@mert.kty81/unveiling-the-past-daguerreotypes-and-the-legacy-of-mercury-fumes-a81f09398841

    https://daguerreiansociety.org/Making-a-Daguerreotype

    https://doi.org/10.3390/s23094341

    Picture credit Library of Congress

  • The Science Behind AI

    The Science Behind AI

    When I wrote my first line of code in 8th grade, I found a passion that would grow with me through high school and beyond. But as I delved deeper into both scientific concepts and artificial intelligence, I realized something profound: science builds AI, and AI transforms science right back. This two-way relationship creates a cycle of innovation that’s reshaping our world faster than ever before.

    The foundation of modern AI isn’t just computer science – it’s a blend of mathematics, neuroscience, psychology, and computational theory all working together in harmony. This mashup of disciplines creates something greater than its parts. Every AI breakthrough begins with scientific principles and the same process of hypothesis, testing, and refinement that powers all scientific discovery.

    With classes like Data Structures and Machine Learning Principles, “universities are preparing students to continue this scientific tradition” (Frueh). The principles that scientists like Alan Turing (look at the evolution of programming languages article to learn more!) developed decades ago still form the backbone of today’s most advanced AI systems. The mathematics of linear algebra and calculus provide the quantitative tools for modeling complex relationships, while neuroscience contributes insights about how biological neural networks function, inspiring artificial ones.

    But the relationship goes both ways. AI has become science’s most powerful tool, scanning astronomical data to find celestial objects human researchers might miss or predicting protein structures to accelerate drug discovery. It excels at seeing patterns in massive datasets that would take humans lifetimes to analyze. Climate scientists employ neural networks to improve weather forecasting, while medical researchers use deep learning to detect cancer in medical images with unprecedented accuracy.

    As a student studying Computer Science, these applications fascinate me because they show how AI isn’t just about creating smart assistants or recommendation systems – it’s about expanding human capabilities in every scientific domain. The research opportunities in this field seem endless, from artificial intelligence to warehouse-scale computing systems.

    Most intriguing is how AI transforms scientific discovery itself. While traditional science follows hypothesis-driven research where scientists form theories and then test them, AI introduces a complementary data-driven approach where algorithms identify patterns first. Systems like AlphaFold solve 50-year scientific challenges independently by accurately predicting protein structures from amino acid sequences. This represents a fundamental shift in how discovery happens.

    This partnership raises big philosophical questions. If an AI predicts phenomena accurately but can’t explain its reasoning in human terms, have we truly gained scientific understanding? Is prediction equivalent to explanation? These questions reflect deeper tensions about what knowledge really means in an age of increasingly capable but opaque AI systems.

    Looking ahead, science and AI will continue evolving together, creating new forms of inquiry that blend human creativity with machine intelligence. This partnership will enable us to tackle humanity’s most pressing challenges – from climate change to disease – with previously unimaginable capabilities. The possibilities and opportunities in this field are truly endless.

     

    Citations

     

    Frueh, Sara. “How AI Is Shaping Scientific Discovery.” Nationalacademies.org, 6 Nov. 

    2023, www.nationalacademies.org/news/2023/11/how-ai-is-shaping-scientific-discovery.

     

    “Science in the Age of AI | Royal Society.” Royalsociety.org, 2024, royalsociety.org/news-resources/projects/science-in-the-age-of-ai/.

     

    Wang, Hanchen, et al. “Scientific Discovery in the Age of Artificial Intelligence.” Nature, vol. 620, no. 7972, 1 Aug. 2023, pp. 47–60, www.nature.com/articles/s41586-023-06221-2, 

    https://doi.org/10.1038/s41586-023-06221-2.

     

  • How Ink Becomes Art

    How Ink Becomes Art

    A Brief History of Tattooing

    Tattoos have been part of history for thousands of years, serving as cultural markers, expressions of identity, and art. There are many methods of tattooing, such as stick and poke with a mallet and needle and machine tattoo guns. While styles and meanings have changed, one question many people may have is how do tattoos actually work?

    The Permanence of Tattoos

    The nature of tattoos lies in the body’s response to injury and pigment. In essence, tattoos are an open wound when first done. When a tattoo needle pierces the skin, it inserts pigment into the dermis, the second layer of skin that lies beneath the outer epidermis, which is composed mainly of the cell called keratinocytes. Unlike the epidermis, which renews itself every few weeks, a process called skin turnover, the dermis remains relatively stable, allowing ink to stay in place (Magnum Tattoo Supplies, 2024).

    Macrophages, a type of immune cell, rush to the area to absorb the foreign ink particles. Some of these macrophages remain in the dermis with the ink trapped inside, while others die, releasing the pigment again and restarting the cycle. This immune response is important for the tattoo’s visibility and permanence (Mimzi Pma, 2023).

    Skin Layers and Needle Depth

    Tattooing requires precise depth control. The epidermis, which sheds over time, cannot hold ink permanently. If the needle deposits pigment too shallowly, the ink will fade as the skin regenerates. On the other hand, if the needle penetrates too deeply into the hypodermis (subcutaneous fat layer), it can cause a “blowout”. This is a smudged or blurry effect as ink disperses into fat tissue and can cause scarring (Mykhalevych, 2025).

    Daemon, a practicing tattoo artist, explains: “Needle depth is kind of complex depending on the type of skin you’re tattooing and how thick the skin is in certain types of the body… you can tell when you’re going too deep when you see the ink starts to bleed into the vein.” In hand-poked methods, she relies on feeling and auditory cues like a soft “pop” to gauge correct penetration depth.

    Pigment Chemistry: What’s in Tattoo Ink?

    Tattoo inks are composed of pigments in a carrier solution. Black ink commonly contains carbon or iron oxide. White inks may use titanium dioxide, which can cause allergic reactions in some people. Lastly, colored pigments vary widely. Red often contains mercury sulfide or azo dyes, while greens and blues may include copper-based compounds (Miranda, 2019).

    Some inks use organic pigments, especially in vegan or eco-conscious formulations. These pigments can be less stable and may break down faster. Moreover, different skin tones and types can influence how pigments appear and heal. As Daemon notes, “Certain ink might not show up as well on darker skin types… and sometimes ink or healing products can cause mild skin reactions.”

    Healing and Aftercare

    A fresh tattoo is an open wound, vulnerable to infection and irritation. The aftercare process is crucial to both healing and the tattoo’s long-term appearance. As Daemon emphasizes, “Don’t touch it, don’t scratch it… [because] you’re going to pick the scab off and the ink is going to fall out with it.”

    She recommends gentle cleansing with unscented soap, using a thin layer of ointment, and limiting sun exposure. New technologies like second skin bandages offer a breathable barrier during the healing process but must be used with care to avoid excess moisture buildup. Additionally, moisturizing remains important even after healing, as dry skin can cause fading and distortion.

    Aftercare is not only about preventing infection but preserving the artwork. “It’s a piece of art,” Daemon says. “Taking care of it and taking care of yourself will make it look super good.”

    Concluding Remarks

    Tattooing is a combination of biology, chemistry, and craftsmanship. From understanding skin anatomy to mastering pigment behavior and immune responses, both science and skill are important aspects in the art of tattooing. As tattoos continue to grow in popularity and cultural significance, so too does our scientific appreciation for them.

     

    Sources Cited

    Mykhalevych, Alina. (2025). “Physico-Technical Basis for Needle Depth Control in Fine Line Technique”, Universal Library of Innovative Research and Studies; 2(1): 01-06. DOI: https://doi.org/10.70315/uloap.ulirs.2025.0201001.

    Kapoor, Sky. (2021, October 31). From machines to macrophages: Breaking down the science of tattooing. The Varsity. https://thevarsity.ca/2021/10/31/science-of-tattooing/

    mimzipma. (2023, July 5). The science of tattooing—Mimzipma. https://mimzipma.com/science/

    Miranda, M. D. (2019). Tattoos and tattoo inks: Forensic considerations. WIREs Forensic Science, 2(1), e1360. https://doi.org/10.1002/wfs2.1360

    The science behind why and how are tattoos permanent. (2024, February 12). Magnumtattoosupplies. https://www.magnumtattoosupplies.co.uk/blogs/article/the-science-behind-why-and-how-are-tattoos-permanent

    Weiß, K. T., Schreiver, I., Siewert, K., Luch, A., Haslböck, B., Berneburg, M., & Bäumler, W. (2021). Tattoos – more than just colored skin? Searching for tattoo allergens. JDDG: Journal der Deutschen Dermatologischen Gesellschaft, 19(5), 657–669. https://doi.org/10.1111/ddg.14436

  • Mind the Tentacles: How Octopuses Outsmart Scientists (and Aquariums)

    Mind the Tentacles: How Octopuses Outsmart Scientists (and Aquariums)

    Mind the Tentacles: How Octopuses Outsmart Scientists (and Aquariums)

    When you first think of an octopus, you’re probably picturing an animal with 8 tentacles floating around in the ocean. As unseeming these creatures may seem, they are one of the smartest animals in the ocean! Octopuses have a nervous system, which controls their movements, thought processes, memory, and more (Carls-Diamante, 2022). Octopuses are said to have two brains – one in their head and a complex net of massive nerves in each of their tentacles (Carls-Diamante, 2022). About 2/3 of an octopus’ nerves are in their tentacles, and this allows each tentacle to act independently or jointly with the others (Shamilyan et al., 2021). Let’s explore the capabilities and intelligence of an octopus!

     

    Flexibility:

    Octopuses use their flexibility in the natural environment to escape and hide from predators by squeezing into very tight spaces. For example, scientists have put a small octopus in a jar with a closed screw-lid. The challenge for the octopus was to escape the jar from the inside, which the octopus managed to do using its incredible flexibility (Mather, 2021). Since octopuses are immensely flexible, some octopuses have managed to escape from aquarium tanks by opening the top lid! In addition to their amazing flexibility, they have several other surprising abilities to survive in the wild.

     

    Camouflage:

    Octopuses are known for their abilities to blend in with their surroundings by changing their color to match that of their surroundings (Young, 2023). This ability to camouflage into their surroundings is a key survival mechanism to prevent predators from spotting them. However, octopuses also use their color-changing abilities to communicate with each other (Young, 2023). An octopus’ color changes based upon its mood and can be used to warn other octopuses of potential danger (Carls-Diamante, 2022). Octopuses often go on hunting trips together, but how do they remember their way back home? That’s where their navigational memory comes in!

     

    Spatial and Navigational Memory:

    Octopuses make their homes in holes in the seabed or coral reefs. They go on long hunting trips for food, often for days or weeks at a time for long distances before returning back home. They frequently take different paths home each time they go hunting, indicating they have incredible spatial memory on how to return home (Carls-Diamante, 2022). In addition, some octopuses have been seen putting rocks near their home as an identifier, like how people put numbers outside their homes or apartments to identify which residence is theirs (Carls-Diamante, 2022). Octopuses are more like humans than we originally thought!

     

    In conclusion, octopuses are amazingly intelligent ocean creatures whose wit should not be underestimated. They are able to escape closed spaces using their flexibility, change colors at will to disguise themselves or communicate with other octopuses, and use spatial memory to identify where their homes are. Next time you go to an aquarium, check out the octopuses and see their tricks in action!

     

    Citations:

    Carls-Diamante, S. (2022). Where Is It Like to Be an Octopus? Frontiers in Systems Neuroscience, 16. https://doi.org/10.3389/fnsys.2022.840022

    Mather, J. (2021). Octopus Consciousness: The Role of Perceptual Richness. NeuroSci, 2(3), 276–290. https://doi.org/10.3390/neurosci2030020

    Shamilyan, O., Kabin, I., Dyka, Z., Kuba, M., & Langendoerfer, P. (2021, June 1). Octopuses: biological facts and technical solutions. IEEE Xplore. https://doi.org/10.1109/MECO52532.2021.9459727

    Young, N. (2023, December 27). Exploring Problem-Solving Skills through the Octopus Mind – West Coast Centre For Learning. West Coast Centre for Learning. https://www.wccl.ca/problem-solving-skills/

  • The Science Behind JaPow

    The Science Behind JaPow

     

     

    This past winter break, I had the pleasure of returning to the beautiful country of Japan. This trip was different from the other ones because this time, I was getting to see Japan in winter. Every season brings a different feel to the country, with different emphasises on its culture, like hot spring for winter. Another addition to this trip includes going skiing. This was a non-negotiable for my boyfriend, as he develops an insatiable desire for the slopes once December hits. I was a bit intimidated when I first found out since I had not gone skiing since more than a decade ago. The blurred memories of skiing with an instructor came to mind, and the one word I heard all too often:  “Pizza!”. 

    Fast forward the long flight, train ride, and hike up to the ski resort– it was time. Since the train arrived in the afternoon, we got to the resort midday- there were already set tracks in the snowy mountains. Skiing down the mountain was terrifying with my limited experience. What surprised me was how much lighter and easier it was the next day. We got to the ski resort right when it opened- 8am on the dot. Skiing down was just as nerve inducing, but it seemed like I was floating a bit on the snow. My turns were slower, and therefore easier to execute. Coming to a stop was also more gradual as the snow easily piled behind my skis. This led me to do some research behind the science of snow and the effects it has for the slopes.

    For snow in the Niseko region of Japan, there are special weather conditions that cause its special snow conditions. It is comically referred to as “Japow” for its powdery snowfall which gives an airy and light conditions for skiing. Snowfall for skiing is rated for its quality, quantity, and consistency, and Japan happens to have the perfect conditions for snow.

     

    Snowfall in the Japanese Alps takes place under two distinct meteorological scenarios. One scenario involves snowfall associated with synoptic cyclones, while the other is influenced by the northwest winter monsoon, which originates from the frigid Asian continent and moves over the warmer waters of the Japan Sea (Maejima 1980). The Japan sea scenario brings heavy snowfall because of the temperature difference between the water body and the air mass over the Japan Sea (Ninomiya, 1976). The distribution of snowfall associated with the Japan Sea effect is predominantly influenced by orographic lifting  (Estoque and Nimomiya, 1976).. As a result, the northern region of the Northern Japanese Alps experiences significantly greater snowfall compared to the southern regions of the Northern, Central, and Southern Japanese Alps.

     

    Even with all this information about how the snow should be the best for skiing, I fell many times during my trip. Even the green trails would put my balance and concentration to the test. All in all, come to Japan to ski and hopefully you are skillful enough to enjoy it!

     

    Estoque, M.A. and Ninomiya, K. (1976) ‘Numerical simulation of Japan Sea effect snowfall’,   <i>Tellus A: Dynamic Meteorology and Oceanography</i>, 28(3), p. 243-253. Available at: https://doi.org/10.3402/tellusa.v28i3.10285.

     

    Maejima, I.. (1980). Seasonal and regional aspects of Japan’s weather and climate.. 54-72. https://www.researchgate.net/publication/293128007_Seasonal_and_regional_aspects_of_Japan’s_weather_and_climate

     

    Takami, Kazuya & Kamamoto, Rimpei & Suzuki, Kenji & Yamaguchi, Kosei & Nakakita, Eiichi. (2024). Relationship between Newly Fallen Snow Density and Polarimetric Parameters Obtained from X-Band Radar Observations along the Sea of Japan Coast in January 2021. Journal of Atmospheric and Oceanic Technology. 41. 10.1175/JTECH-D-23-0114.1. 

  • How to Publish a HTML and JavaScript Game on GitHub

    How to Publish a HTML and JavaScript Game on GitHub

    Recently, I took part in the Atlanta Science Festival 2025 STEM edition. The STEMcomm VIP team organized a version of Scavenger Hunt, and I was part of the CyberQuest Team. I was responsible for the Scavenger Hunt game, which needed an online interactive site. I figure that GitHub Page is a good free platform to do this. However, GitHub Page has had quite a few updates in recent years and the guide sites have not updated accordingly. I spent quite some time trying to figure it out, and here I am wanting to share how I did it.

    In the past week I published an article about how to beat the popular 2048 game. You can take a look if you are interested!

    https://2026fat.chargedmag.org/2025/04/how-to-become-an-expert-at-2048/

    https://2026fat.chargedmag.org/2025/04/how-to-become-an-expert-at-2048/

    So, in this example, we are publishing a variant of 2048. Credit the codes to

    https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/

    1. Install a code editor like Visual Studio Code. If you already have one then just use yours. Choose the best one for your Operating Systems (OS). I’m using Windows for this tutorial.

    https://code.visualstudio.com/

    2. Create a GitHub account and make a public repository. You can choose or use alternative platforms that are able to host an HTML site.

    https://github.com/

    https://github.com/ddang37/ChargedMagazineGame2

    3. Clone this repository onto your local computer. There are alternative ways to do it. I recommend using GitHub Desktop which makes things easier. Follow the corresponding guide below if you are new to GitHub.

    https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository

    If you use GitHub Desktop:

    https://docs.github.com/en/desktop/adding-and-cloning-repositories/cloning-a-repository-from-github-to-github-desktop

    4. Open the local repository folder in your Code Editor.

    Create a HTML, CSS, and JavaScript file. Let’s name them game.html, style.css, and dynamic.js. You can change the names and have additional files for more complicated games.

    5. Write the codes into the files. HTML with elements, CSS with stylings, and JavaScript with animation and interaction. 

    For starters, you can search online for sample code and modify from there (make sure to credit the sources!). There are plenty of variants and implementations. You can also create your own!

    You can also fork from the original popular 2048 code:

    https://github.com/gabrielecirulli/2048

    The codes we are using is a much simpler implementation, but still difficult:

    https://www.geeksforgeeks.org/design-a-2048-game-in-javascript/

    6. If your codes are not original from scratch, make sure your game.html file is referring to the correct style.css and dynamic.js. 

    7. Save the codes. Double click the HTML file from file explorer, it should open a chrome site of your HTML game.

    8. When you are satisfied with the result, commit your changes to the online repository. You can do this multiple times, even after you publish the site.

    https://github.com/git-guides/git-commit

    If you use GitHub Desktop:

    https://docs.github.com/en/desktop/making-changes-in-a-branch/committing-and-reviewing-changes-to-your-project-in-github-desktop

    9. When you are ready to publish your code, go to your repository online. Go to Setting > Pages > Build and deployment > Branch, change None to main. An option for the folder will appear, just keep the default. Click Save.

    10. After a few minutes the page will go live. It will show up at the top under GitHub Pages.

    11. Click on the URL or Visit site. Add the extension of the HTML file name and the game will show up!

    https://ddang37.github.io/ChargedMagazineGame2/game.html

    For this 2048, the game do not autogenerate a tile of 2 or 4 upon making a move, but rather based on time. The random generated tiles can be 2, 4, 8, or higher based on the current tiles on the board. This make the game much harder to win.

    Fun fact: If you left this game alone, except for sliding, the game could play by itself!!!

    Note: The website might take up hours to update if you commit new changes after publication. If CSS stylings are not working like it did locally, double check if there’s any Chrome extension blocking it. If the website takes forever to update, try making the repository private and then public again. Refer to GitHub information sites if otherwise.

    https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits

    References: