Kenneth's documentation blog

  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • AI Arts
  • Critical Data Visulization
  • Nature of Code
  • Make Believe

NOC-W09-Midterm Project-ATOM Imagination by Haoquan(Kenneth) Wang

April 11, 2020 by Haoquan Wang Leave a Comment

ATOM Imagination

1.Intro

After learning attraction, I was obsessed with the magic of various kinds of forces in the coding world. But in the course coverage, we only learn the macro physics force. So I decided to explore and test whether the microphysics law fits in the coding world or not. The topic that I chose is Coulomb forces. Also, inspired by the icon of Atom(text editor), I want to build an atom structure with the P5.js.

2.Inspiration

I have mentioned my inspiration and visual reference in my last post.

Link: NOC Midterm Project Concept

Pastel Themed Natural Plants Mood Board

This is the mood board of my project. The images on it are my most straightforward visual director.

3.Project Plan

General Plan Guidelines:

  1. Experiment of Forces
    1. Coulomb Forces in P5.js 
    2. Electron Movements around the core of an atom
  2. Visualization
    1. Proton & Neutron
    2. Electron
    3. Particles Sphere

Experiment of Forces

I started my project by testing the Coulomb Forces in the P5 sketch.

The formula is: F = kq1q2/r2

Look closely, it is similar to what we learn for gravitational attraction

After finding out this, my project shift to another direction: trying to build an atom structure with gravitational attraction.

However, after testing different value setting, I realize that it is impossible to achieve my expected visual effects with only one gravitational setting. The reason is:

  1.  In order to make electrons do orbital movement around the core and do not touch the core, we need to apply a force from sides to push electrons away from the core. I used repulsion at first, but I found out that electrons will be bounced back strongly when they get closer to the core if the adjusting value is too high; electrons’s moving track will be shifted a little bit if the adjusting value is smaller. So the conclusion is repulsion does not work in this case, and I cannot come up with a method to provide a force from sides.
  2. The speed of electrons is hard to control. By using gravitational attraction, electrons will gradually speed up and move towards the core. That is not what I want for the visual effect. Besides, electrons will slow down when they pass by the core, then speed up again, The process of speed up, slow down, and speed up again, looks weird.
  3. The orbital and movement of electrons are not regulated. I cannot form a system.

Above all, I think for my current ability, I cannot build an atom system with gravitational attraction. In order to finish the project, I decided to achieve the visual effect with simple attraction.

Visualization

This is the basic structure by applying a simple attraction function to particles.

For proton and neutron, I design them to be sparkle particles. To achieve this, I use for loop to draw many circles, which no fill in body but fill in stroke. When looping through, the radius of a circle increases, but the opacity of filled color in stroke decrease. As a result, proton and neutron look shining. Besides, by applying frameCount and sin/cos value, I make P&N animated.

For electron, I try to keep it simple because it will be hard for watching if the visual effect is too fancy.

For the particles sphere, it is the most tricky one. At first, I want to only make many particles distributed randomly within a circle. I did not know how to do it. So I turned to Moon. Moon provided me a solution, which keeps all the particles outside an invisible circle. When the particles reach to a specific position, we change the direction to opposites. Then we adjust the value of forces so that particles won’t go away but keep bouncing since they are always attracted by the core. Hence visually, it looks randomly distributed on the sketch.

Further development

Interaction Design

I did not put a lot of efforts in the interaction design. So I would say interaction design is one of the potential improvements in my project. I want to keep exploring the how can I combine add electron interaction with music playing. It can be a music interaction project actually. 

Visual Design

To be honest, my visual design ability is limited and my imagination is restricted by what I have learned so far. I am not surprised that I cannot do a good visual design. So if I have more time, I will definitely dig deeper to visual experiments.

 

 

 

Finally, big thanks to Moon!

 

 

Filed Under: Nature of Code

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • Make Believe Final Project: Autonomous Driving Taxi of the First Autonomous Work Group Company Service–Supportive Policy for Third Child Policy
  • Weekly assignment 5: TV Buddha by Nam June Paik
  • Make Believe Weekly Assignment 4–How to Explain Pictures to a Dead Hare 1965 by Joseph Beuys
  • Make Believe Weekly Assignment III: Uncommon Places The Complete Works By Stephen Shore
  • Make Believe Project II: Documentary “A Day with Black Chinese”

Recent Comments

  • A WordPress Commenter on Hello world!

Archives

  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020

Categories

  • AI Arts
  • Creative Game Design
  • Make Believe
  • Nature of Code
  • Uncategorized

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
  • AI Arts
  • Critical Data Visulization
  • Nature of Code
  • Make Believe

Copyright © 2025 · Agency Pro on Genesis Framework · WordPress · Log in