Tanya's JTerm Blog

For the 6th Assignment, we were asked to work with loading Data into p5.js by finding the JSON version of datasets available online or by looking for publicly available API keys.

I decided to look into the NY Times API for “Article Search” and begun by registering for an API key that I could use to access the URL to the relevant data in JSON format, as compatible with the p5.js library interface.

It was really tricky to find new sources of data; moreover, the NY Times is a conventional data source that people have been relying on for decades to expand their general awareness of the world around them.

I watched Professor Shiffman’s YouTube video tutorials on working with API datasets in p5.js and directly incorporated the code from the following video:

I was most interested in pulling up articles about NYU through the New York Times portal and hence, entered “q=NYU” for my search query into the url variable.  I added the createP function to pull up the main headline of the article and the lead paragraph.  I also added the publication date within the createP function within setup, in order to give the user an idea of when and how recent the article they’re looking at on the screen is.

Moreover, I tried creating a button that would load the news once pressed but I seem unable to make it work to launch the news once pressed.  I am guessing that is probably due to the fact that “gotData” is already a function defined by calling out multiple commands (including creating a variable, creating a paragraph for the article headline and lead paragraph, and creating a second paragraph for the publication date).

However, the API does indeed do its job of pulling out the articles on NYU with the headline, the lead paragraph and the publication date and seems to work with my API key without any issues.

 

Proposal # 1: Creating a simple app for high school students to visualize color of salts created by given acid-base reactions

There are a ton of interactive learning-based chemistry apps available offline via the Apple/ Android stores as well as online on the Internet.  I came across a few really cool ones that literally bring the science alive and the chemistry lab right to the user’s computer screen.

 Myriad of chem apps are available nowadays.

Here’s a particularly sophisticated rendition of a “virtual lab”:

However, I realized that there were no simple apps to aid young students to remember the color of the salt created by a particular acid-base reaction.  As a high school chemistry student myself, personally, one of the most dreaded stuff while preparing for a laboratory practical would be memorizing the color of the salt created from the reaction of a given acid with a given base.

To briefly brush up our 7th-grade chemistry, when an acid and a base react, they neutralize each other to produce a salt, which is the compound formed from the cation of the base and the anion of the acid. The acid-base reaction is called a neutralization reaction.

As a common example, the reaction of hydrochloric acid and sodium hydroxide produces common table salt or sodium chloride,

    HCl + NaOH -> NaCl + H2O

Coming back to the world of creative coding, I want to create an app that makes it easy for children to remember the color of the salt so produced from the given acid-base combination.  Seeing is believing and visualizing the color of the salt on the screen would help with the memorizing bit more than simply reading it in a book.

So, my app would include a set of acids and a set of bases in a hard-coded drop-down menu, and the user will be able to select any given acid from the menu and add it to any given base.  The output of this “reaction” (addition algorithm) would be the display of the name of the salt created on the screen and here’s the fun part: the BACKGROUND WOULD TURN THE COLOR OF THE SALT!! The code should essentially include creating an array of buttons, 2 drop-down menus and Boolean logic (if/ if else/ true/ false) statements that will display the name of the output salt and change the background color of the canvas to reflect the color of the salt created.

Wish the 12-year old me knew the basics of coding and I would’ve created this sort of a simple but effective app to help myself memorize the output color from a neutralization reaction; it would’ve been easier than rote learning!

 

Idea # 2: Creating a Thesaurus and an anti-Thesaurus in English and Francais

It is a relatively straightforward and somewhat conventional task to create a Thesaurus in the English language using one of the many available APIs.

However, I thought it might be more interesting to include both a Thesaurus and an anti-Thesaurus, that is, synonyms and antonyms within the same program. To spice things up, I visualized creating a program that makes these synonyms and antonyms of any given word available not only in English but also in French!  So, when the user types out any word, be it in English or in French and hits the “SEARCH” button, my program should directly link the search to 4 web APIs: for synonyms and antonyms in that language, and for synonyms and antonyms in the second language.

For example, when the user enters “happy” in English in the search box and then hits the search button, the screen should display 5 synonyms of “happy” in English such as “elated”, “joyous”, “delighted”, “content” and “glad”, followed by 5 antonyms of happy in English such as “unhappy”, “sad”, “serious”, “miserable” and “melancholy”, followed by 5 synonyms and antonyms in French.

However, the challenge is finding the relevant APIs in French and somehow linking the translation to English in between so that, the word is first translated into French and the program then looks for synonyms and antonyms of that French word.  Moreover, there are already ons of such Thesaurus and even more interactive visual Thesaurus apps available online, making the use of my program superfluous and slightly redundant.

Therefore, I am leaning more towards coding and designing the chemistry app, which I think will serve to be useful for young students studying for their laboratory exams and the hands-on interaction and visualization will hopefully make the learning process more fun.

 

 

Why Image Matters. A p5.js journey.

For our fifth assignment, we were asked to upload and play around with sound and image media in p5.js.  Professor Shiffman demonstrated several in-class examples involving inserting .png and .jpeg images into our p5 sketches and even dabbling with the camera built into our laptops to create cool effects and photo apps.

It was exciting for me to see how much more one could suddenly do using the p5.js library once one knew how to insert and manipulate images using code.  I had never expected that coding would give us this incredible amount of freedom to create these super interactive user-friendly programs which allow one to change images into mosaics, create interactive painting applications and even let the user use his or her own camera and microphone through an interactive interface.

While I was aware of the possibility of using and editing sound files, I decided to focus on images for this project.

I created two projects for this homework: one being the effect of musical notes hanging on and dancing around on the screen (so I bought these new headphones recently and they give such amazing sound clarity that one feels like the song is still lingering on in one’s head much like if musical notes were physically floating in the air).  The second project involves uncovering a mosaic-style clip art of an apple and as one moves the mouse across the screen, the apple is revealed along with the words, “Eat Me!”, encouraging users to indulge into more fruit like apples for a healthy lifestyle.

 This is a still image of the notes.

And here is the actual animation:

http://tb1561.nyuad.im/HM_5_Music_in_the_air/

 

 Here’s the Apple mosaic!

For the first project, the challenge was make multiple copies of the musical note to move around randomly at the same time. After preloading the resized .png image of one note, I set up a constructor function called ‘function Note (img, tempX, tempY)’ within which I defined the position of a single note in terms of its x- and y-coordinates.  In addition to that, I incorporated an update function, defined in terms of the sine of the angle of the image.  Finally, to lend the note movement, I wrote the code for the display function as follows:

this.display = function() {
image(this.noteImage, this.xpos + this.xoffset,this.ypos +this.yoffset);
}

And to create many copies of the note, I used a for loop within the draw function of p5:

for (var i=0; i<notes.length; i++) {
notes[i].update();
notes[i].display();
}

where, notes[ i] = new Note( noteImage, x, y);

For the second project, I decided to go for rectangles instead of ellipses (or circles) to uncover the apple in order to have more of a mosaic effect rather than the more conventional pointillism painting effect. I made sure to map the color of my rectangles to that of the image by using the “get” function built into p5 which targets the specific pixel of the image at any given spot within the canvas (which I sized to match the size of the image).

var col = apple.get(mouseX, mouseY);

here mouseX and mouseY point to the exact locations of the mouse on the user’s screen.

Moreover, I ensured that the text command followed the rectangle command within the draw function so that the words “Eat Me!” would be visible against the image.

---

 

Visit to Second Story:

The Second Story design studio felt to me more like a hipster cafe than a conventional architectural office let alone a programming lab.

Located in the Financial District in Manhattan and overlooking the Brooklyn Bridge, the design space was brimming with creativity, novelty and creative energy.  Two ITP graduates (and Professor Shiffman’s former students) led our class into the office space, where they showed us a brief power point presentation showcasing projects delivered by the firm (in collaboration with Sapient Nitro), followed by a tour around the office, pointing to and explaining us various prototypes developed by the firm.

Most interesting to me was how groups like Second Story are breaking stereotypes of programming as something far from the reach of ordinary people and architecture and design as something distant from the realm of technology, by visibly bringing the two worlds together into a physical, interactive space where users can interact with the space they inhabit.

I loved their project on story-telling where people were asked to put on the cool, colossal headsets and asked to walk around and derive snippets of the story from the actors/ story-tellers, and hence, in a way, model the story in their own ways.  I was also awe-struck by the project on the park, where technology, something which most people contrast with nature, was being used to express the elements of nature such as the time of the day or the different seasons.  It was cool to discover how interactive technology is not only being applied to exhibits at museums (as we saw at the Museum of Math and the American Museum of Natural History) but also in retail spaces!  Second Story has worked with brands like Whole Foods as well as top cosmetic and fashion brands where hands-on technology can be used to guide consumers from buying the right make-up products suited for their skin to pairing accessories with a clothing item!!

I feel that such creative combination of design and technology is instrumental in bringing people closer to aspects of the physical space they surround and Second Story is certainly playing its role by combining talents of experts from disciplines as diverse as technology with civil engineering and interior design for an effective synergy at the cross-roads of creative programming and interactive design.

 

 

 

The acclaimed Connected Worlds exhibit at the New York Hall of Science in Queens proved to be every bit awe-inspiring and fabulous as I had imagined it to be.  Our class this January Term has been really lucky to be exposed to a plethora of design ideas and technological possibilities that can be implemented using creative programming.  From interactive floors and fractal trees whose branches move with the onlookers’ arms at the Museum of Math to state-of-the-art exhibits on microbes, the human immune system and the universe at the American Museum of Natural History, my classmates and I have seen real-world application of interactive technology in educating people.

As Professor Shiffman had told us, the Connected Worlds exhibit was indeed a “grand ending” to our journey of looking at and learning from hands-on interactive exhibits at museums and other design spaces.

The 3000 square-feet large interactive floor on which one can manipulate the direction of water flowing from the 45-feet high waterfall using physical logs made from retro-reflective material, held together 6 different ecosystems spanning the walls.  The fascinating and immersive installation was very hands-on, with living creatures and rain clouds from one ecosystem freely migrating into another.  As the Director of Exhibits there told us, children were taught sustainability and balance between various ecosystems by regulating the amount of water each system received or by planting new seeds for trees to grow.

The feature of the Connected Worlds exhibit that best spoke to me and applied directly to the material we covered in class on physics simulations, particle motion and flocking and steering behaviors was the collaborative movement of the living creatures in flocks.  I was amazed how intuitive and sophisticated the design behind the movement of the birds and other organisms was.  What was even more incredible was how closely the systems followed patterns we actually observe in the natural world: for example, when a new ecosystem was first created, rainfall allowed little plants to grow, followed by the migration of flocks of small animals, which was in turn followed by that of larger animals.

On the other hand, what I found a bit less intuitive was the whole process of growing a tree from the seed.  While I certainly enjoyed interactive with the big, beautiful screens to manipulate the movement of the creatures, it wasn’t apparent to me that one could get better quality seeds by stretching out one’s palm in front of the screen for a longer period of time.

Moreover, it was frustrating to me that a lack of communication between the different groups of visitors could lead to drastic changes in the ecosystems; for instance, my classmates and I decided to focus on the desert ecosystem for a while and just when we were beginning to create a robust desert environment with plants and animals, some kids decided to “steal” everyone’s water and divert all the water from the waterfall into their forest ecosystem.  Honestly, it was a bit heart-breaking to see all of the other ecosystems (temporarily) die out in order for those kids to have one lush, green rainforest.

That said, I was tremendously impressed by the amount of thought and effort that would have gone into the design concept and the level of programming sophistication achieved in an exhibit as large scale as Connected Worlds.  Moreover, the architectural challenge of supporting the heavy projectors, sensors and computers was cleverly overcome by creating structural grid walls surrounding the interactive space, without modifying the old building.

Hence, for the Seventh homework assignment for Nature of Code, I decided to focus on creating a flock of moving living creatures that would move across the screen with the motion of the user’s mouse.

Because I really like butterflies and recently went into the Butterfly Hall at the Natural History Museum where I saw hundreds of live flitting butterflies in a single room, I chose butterflies as the object of my simulation.

Moreover, I have put up a picture of glowing butterflies emanating from a jar above my study desk, which I believe symbolizes hope and an essence of freedom.

So that’s where I got my whole butterfly inspiration from.  Now, the biggest challenge was controlling the movement of the butterflies.  First of all, I wanted them to start flying out of the jar on the screen, secondly, I wanted them to move as the user would move the mouse and finally, I wanted to give the butterflies an accelerated motion.  For this I turned to Professor Shiffman’s example 1.11 on an array of objects accelerating towards the mouse, in Chapter 1 (VECTORS) from his book, The Nature of Code.  The code from that example guided me on making my array of butterflies move with the user’s mouse on the screen.  I changed the position variable to start the movement from the jar itself.  Somehow, the motion is not smooth in my projection but the main ideas I had were achieved.

The final simulation is interesting to look at, the butterflies fly out of the jar as I had wanted and even though their motion isn’t as smooth as I wanted, they do move towards the mouse, giving the user a sense that they are following him or her!

For my fourth assignment, I sought inspiration from the various intriguing and hands-on educational yet interactive exhibits I saw at the American Museum of Natural History.

Our class trips to both the Math Museum as well as the American Museum of Natural History proved to be an exciting opportunity for me to discover how the tools of technology can be applied to educational and cultural contexts in order to create an informative and interesting learning experience for say, people looking at science exhibits.

For instance, the Museum of Math had an interactive fractal exhibit that detected the position and movement of the user’s arms to create a fractal tree pattern.  The interactive floor that connected two points based on the shortest distance between any two visitors was pretty cool too; I was impressed to see how technology was being used to demonstrate a mathematical law used in graphic design.  The most amazing part of the whole museum experience though, was to realize that creating such state-of-the-art exhibits and features was not just limited to a few master computer programmers and interactive design experts, whereas, even undergrad students like myself with no prior experience in coding techniques, could acquire the essential skills to build simple yet effective interactive models in a short span of time.

Coming back to the museum visits, what truly inspired me were the outstanding exhibits and interactive simulations at the American Museum of Natural History. It was incredible for me to discover how much technology, when properly designed and implemented,  could achieve.  The  technology was creative yet straightforward and pretty hands-on; visitors from older adults to young children were interacting with the big screens and tablets the size of big tables, to learn about microbes inside the human body!  My favorite exhibits were the “Secret World Inside Us” exhibit, that featured the video of a woman lying down on a computer screen and visitors could press certain buttons on the screen and expand the view to learn about microbes in specific areas of the body.  Another fun one was the immunity exhibit that created a sort of interactive game to teach people about the number and kind of microbes generated inside the human gut by consuming certain food items from kale ad yogurt to icecream and fries.  The most interesting part about the game was that users could press and aim the lever and “shoot” into the screen to generate microbes: grey colored balls for bad microbes and colorful balls for the good microbes.

I decided to build upon my earlier project of demonstrating the flow of red blood cells in plasma and restrict the movement of the cells to flow through a particular vein.  In addition to that. I wanted users to engage directly with the biological model on the screen by themselves clicking on the screen to generate the RBCs.  Two different museum visits were certainly enough to show me that math and science models that interact directly with the user are a great deal more effective and fun to try out.

I went about accomplishing this goal by drawing out a vein on the screen.  I then had to implement the ‘mousePressed” function within the setup function of p5 so that every time the user clicked on the vein/ pressed the mouse, a new RBC would appeared inside the vein on the screen.

The two challenges that came up were to firstly make the movement of the cells continuous and secondly,  to restrict that movement into the dimensions of the vein on the screen.

The first challenge was overcome by doing the same thing I had done in the previous assignment,

a) creating a for loop using the following code:

for (var i=0; i <cells.length; i++){
cells[i].move();
cells[i]. display();
}

and b) resetting the this.x value to 0 in case it exceeded the (screen width + 10) by using the if function within the move function:

if (this.x > width + 10) {
this.x = 0;
}

Finally, the second challenge was overcome by constraining the this.y-value such that it would lie within the dimensions/ parameters of the vein:

this.y = constrain(this.y,175,220); again this was added within the move function.

The end result was a truly interactive and smooth model of the flow of red blood cells through a vein in the human body.

 

 

For my second assignment, I was required to create something cool by implementing my design idea using a function and then using the same function to replicate the original design but in different dimensions by changing the parameters.

Only two days since the start of January Term, due to next to nil prior experience in programming and due to the unconditionally cold weather, I was already struggling a little with the course.  Wednesday was supposed to be the coldest day of the week and a few people were predicting either heavy rains or a mild snowfall.

At this point, I decided that even though the material of the course was absolutely novel and unfamiliar to me, I could either let the stress of a new challenge drown out my confidence or I could instead storm my way through a new digital realm of unfamiliar syntax, HTMLs, JavaScript and codes, and have even have some fun with it along the way.

So that’s how I landed up with this idea to create a stormy scene on the screen, for the most part to reflect my own mood and state of mind. I wanted my project to have a compelling effect, I wanted the sky to flicker automatically, much like how the night sky flickers when the clouds roar thunder and pelt wild rains through a storm.

It was relatively simple and straightforward to create the three clouds on the screen. I started by creating one by simply using three ellipses, aligned parallel to each other and interconnected, such that the middle circle was larger than the two circles on its sides. I added the lines to give the effect of rain.  I chose a black sky as the background.  Here’s what the first cloud looked like on a stormy night.

I incorporated the steps for creating the cloud into a function that I called “drawCloud(x, y)” with x and y being the coordinates where the center of the left-hand side circle of the cloud would get drawn.

The next step was the simply insert the “drawCloud(x, y)” function within the draw function of the code and repeat it by changing the x and y- coordinates in order to get two more clouds at different locations.  Here is how the final scene ;looked like, with three clouds in the stormy night sky.

Finally, in order to get a cool flickering sky, which would really give the feel of a roaring storm, I had to modify the background using the random(0, 255) function that would project different shades of grey, black and white onto the screen by picking up random values from the greyscale that ranges from 0 (black) to 255 (white). Of course, I inserted the background function within the “draw” function of my code and placed it before the “drawCloud” function so that the background did not draw over my clouds.

And the final result was exactly what I wanted: a roaring stormy sky flashing differing shades of black and grey on the screen with the white clouds pelting rain.

With that stormy night sky and the successful completion of my second homework, I felt more confident about diving right into this fascinating world of creating visual effects and interactive models using code.

For my third assignment, I decided to use the code a Constructor Function within p5.js to create a visual simulation of Red Blood Cells (RBCs) floating around in plasma (fluid present in the blood).

My inspiration for the project was watching similar animations and videos for my biology class, which I always found useful tools of study.

As a science student in high school, I always found it helpful to look at visual simulations of biological phenomena such as cell replication or composition of the human blood in order to better understand the dynamics of what was going on.  While I often resorted to animations and YouTube videos on the human cell, nerve impulses, expansion and contraction of the lungs etc..,  I have always been fascinated by and curious about how tech-savvy programmers and biologists create such incredible, visibly simulating and moving animations of complicated biological phenomena.

One of the most fundamental material covered in any high school biology course is the composition of the human body, which includes the study of the circulatory system, the skeletal and muscular systems, the nervous system, the respiratory system , the excretory system etc.. Therefore, as a starting point, I decided to depict the presence of RBCs in plasma (blood fluid).

I turned to Google images as well as my own memory of how RBCs appeared.

Red blood cells have a disc-like biconcave shape, which gives them additional surface area to absorb and exchange oxygen. They are enucleated (without a nucleus) and flow through the blood via the circulatory system to deliver oxygen from the lungs to the body tissues.

My project shows the the disc-like, enucleated RBCs flowing through the blood stream (depicted by the red background).

In terms of the movement, I chose a uniform lateral movement; using the

“this.x = this.x + 2”

code within the “move” function of the “Cell” Constructor Function.

In addition to the horizontal movement across the screen, I chose a slight up-and-down movement to make the animation seem more intuitive. For that, I implemented the code

“this.y = this.y + random(-1, 1)”

again within the “move” function in the “Cell” function.

I designated the constructor function as the “Cell” function and included the “display” and “move” functions within it.

Professor Shiffman’s YouTube tutorial, 6.4 ‘The Constructor Function in JavaScript’ helped me implement the Constructor Function using the code

“cells[i]= new Cell();”

within the “Setup” function and by creating the variable “cells”.

The actual video at first appears like this:

The main challenge that I faced while working on putting together my code for this project was making the cells flow undisrupted.  Unfortunately, the cells start “flowing” into the screen (plasma) from the left hand side of the screen and exit smoothly through the right side of the screen but after a bit, they stop coming in from the left hand side.

I was not entirely successful in making the red blood cells appear continuously from the left hand side and this literally “breaks the flow” of the cell movement.

I realized that I cannot apply the “Bouncing ball” operation to solve the problem of my moving and abruptly stopping red blood cells as it is neither intuitive nor realistic for red blood cells to bounce back (unless of course, there is some sort of blockage that leads to hemorrhage, which is not my intention to show in this animation of RBCs in a healthy body).

After many attempts to come up with a solution to this problem, I still have to take my professor’s advise in order to figure out how to make the cells keep appearing continuously on the screen.

Apart from that problem, I realized the power of the constructor function in JavaScript as a sort of “container” (to use Professor Shiffman’s word from the video) of various other functions to avoid repetition of the entire coding syntax and to lend reusability to the function.

Finally, with some help from Professor Shiffman, I figured that the answer to getting the cells to continuously stream into the screen was simply using the “if” command within the move” function as follows:

“if (this.x > width + 10) {
this.x = 0;
}
The above allows the cells to reset themselves once the this.x value exceeds (screen width + 10) so that the this.x coordinate of the cells takes the value 0 once they cross the value (screen width + 10), giving the user the impression that the cells are flowing into the “plasma” (computer screen) continuously.

So, the final animation looks like the following:

 

As I started dabbling with P5.js, I reflected upon what Dan said about applying skills from programing and processing across a wide array of disciplines and using these for tasks as diverse as data visualization and analysis, web design etc.

As an Economics student who wishes to specialize in Finance and minor in Business Studies, I wan to learn how to analyze Big Data from a macroeconomics perspective in the world of international stock markets and foreign exchange. Primarily for this need for data analysis and subsequent data simulation, I decided to take a course to acquaint myself with the basics of coding.  I do not have prior programming experience; however, I have worked extensively with statistical analysis softwares like Stata and R.  I was forced to resort to using solely the graphical interface while working with such programs since I was not familiar with the technicalities of writing and running the code.

To this end, I am excited to begin my journey into the fascinating world of programming.  Moreover, I look forward to exploring my own creative and quirky side and applying programming knowledge towards creating fun projects and interactive visual simulations.

For my static drawing, I chose to create an image of one of New York City’s quintessential, most famous and iconic dishes- the pizza! The city boasts some of the world’s best pizzerias and two days in the city are enough to convince a newcomer that pizzas are just the typical New Yorker’s go-to snack, whether they enjoy a sit-down lunch with friends in one of those cozy, little pizza joints one sees at every nook and corner of the city or whether they get a super-slice to go.

My version of a pizza slice looks like the following: a creamy, inviting, fresh from the oven pizza slice with a crust thick and golden-brown and cheese yellow and melting, topped up with tomatoes, capsicum and onions!!

“New York City presents”…

For my animation, I chose to create a provocative, brought-to-life on your computer screen rendition of a twisting and slithering, formidable-looking snake.  The locomotion of one of the deadliest and most feared creatures of the natural world has fascinated scientists for a long time and there are many different theories on what exactly empowers the reptiles’ undulatory lateral movement.  I thought it might be interesting to create and observe such motion on-screen as an interactive visual simulation will bring the magic of the serpent’s slithering crawl to life (“Beware, my friends!”).

Here is a screenshot of the final tracing of our snake’s path:

“The Mouse brings the Snake to Life”:

Creeped out or struck with awe!  I’ll let you be the judge of that as you try to sketch out the motion of this wondrous reptile and bring out it’s crawl to life on the screen in literally four seconds by pressing and moving your mouse.

The above projects do well to demonstrate the power of programming, novel processing softwares and interactive Javascript libraries such as P5.js.  As Apple’s co-founding CEO, Steve Jobs rightfully said, learning how to program a computer teaches you how to think.  In our world today, coding and programing education are paving way for a new age of digital literacy.  With our world today embracing the information age, our daily lives are filled with a plethora of diverse computer programs automating all sorts of routine jobs.  Even if one doesn’t plan on becoming a software engineer, learning how to write a few lines of code is an essential skill certain to help one solve problems and troubleshoot.

If I can apply fundamental programing knowledge gained from only a couple hours of a coding course to create something so interactive and much fun, I honestly cannot wait to learn more and more and apply that knowledge further in different fields of study and even daily life, from Capstone experiments involving macro data analysis to creating fun painting softwares for my little cousins back home!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!