Problem: More than a Sun Sign

This past year I have been taking a new interest in astrology and learning deeper into the astrological birth chart. Not until utilizing CoStar, a phone app that sends daily readings based off your zodiac signs and alignments, I started looking more than just my sun sign. Reading the birth chart, especially if someone is new to the trend, can be difficult to understand and absorb.

• 

• 

Since astrology is a fun conversation starter and part of popular culture, I thought it would be fun to create an accessible interactive/educational tool to those new to astrology.

Research: Moodboard

To appeal to a new, but still scoped audience, I want to make the interface stylized with fun simple collages, similar to Tyler Spangler, and edgy, displaced color gradients.

• 

Ideation: Sketching potential interfaces

Based on the survey, the feature of customization and personalization is an important part of the experience. With that, I included a webcam input.

Other answers uncluded how birth charts are too much information to digest when new to it, and its hard to understand what each mean. So I simplified the chart by adding a potential hover over effect, revealing a summary to lessen click-throughs and give the user a good start in understanding.

Ideation: Utilizing API data

The first step was to integrate open data/API into my code. Here are some of the resources I utilized:

astrologyAPI

Coding Train's "Working with data"

***link to p5 sketch v1

Next Steps

• User testing
• Finalize p5 sketch
• Finalize stylizing

Research: Friendlier interactions

Based on my past experiences with several tools, I created a survey to understand others' experiences with horoscopes. My survey reached XX people and here are my results:

https://admin.typeform.com/form/cL44QLjN/create

*** pic of results/summary

***Competitive analysis chart of costar, websites, ig accounts etc.

Summary of results***

https://editor.p5js.org/natayie/sketches/QPn_kaqFy

Full scale manipulating the ASDR to make the frequency sound like different instruments and then changing the oscillator after each set of instrument.

Partner: Wyatt Zhu

https://editor.p5js.org/natayie/present/J2ppYrs97

Partner: Jahvnavi Shah

https://editor.p5js.org/natayie/present/cSgIyrPvX

We wanted to represent the many lives of an image as it goes through a series of visual changes. We experimented with different permutations of creating an image and the variations one can get from improvising on the same base code. The idea of characterising a visual so as to track its journey was interesting because our understanding of an image was immediately expended on as we viewed it as a compilation of individual pixels and not as a singular entity. With a wall of images that go through a gradual transgraression from one grid to another, we wanted to depict the many identities of an image extracted from the same core visual and communicate multiple identities. Like there are multiple ways to communicate an idea within the structure of one language with a series of sentences, the technological counterpart of the same level of communication allow for multiple emotions to be expressed within a line of code. Every variation in the string communicate a different aspect of the visual like every permutation in a sentence in a language communicates a specific emotion. Within the paradigm of p5.js, we hope to understand the technological ramifications of time in which most visual communication is digital and most human interactions are embedded in lines of code and pixel.

An interesting understanding of the same concept is elaborated on in Jean Buadrillard's module of Simulcra & Simulation. Baudrillard talks about a postmodern simulation or method of communication that is artificial or in this case, digital. By the means of simulcra, he talks about an image that is almost like a placeholder for the original. With a technological revolution, the inidividual components of the image were segregated almost like the pixels of the same, and expended into an array of copies that communicated multiple ideas. We have embodied this complex understanding of the trajectory of a core image and translated it into our variation of a simplistic journey of a visual. Baudrillard addresses how in some ways language keeps us from accessing reality. His deep rooted understadning of language and its connection with an image or reality is acutely depicted in his photography. From the perspective of p5.js and pixels, we view syntax and the assemblage of its individual components as a communication tool.

“It is no longer a question of imitation, nor duplication, nor even parody. It is a question of substituting the signs of the real for the real” - Jean Baudrillard

The following are few permutations of filters that we experimented with before we elaborated on one:

https://editor.p5js.org/jks507/present/jvPoafbpJ

https://editor.p5js.org/jks507/present/cMiyQozm9

https://editor.p5js.org/jks507/present/UmxNQN4pe

https://editor.p5js.org/jks507/present/cXX_PW93P

https://editor.p5js.org/jks507/present/cXX_PW93P

https://editor.p5js.org/jks507/present/ytquThfnA

https://editor.p5js.org/jks507/present/cXX_PW93P

https://editor.p5js.org/natayie/present/Q3xvU9eEA

https://editor.p5js.org/icm4.0/present/rYmGGORct

Goal: Create and/or manipulate an image or video at the pixel level.

https://editor.p5js.org/jks507/present/UmxNQN4pe

Our identities seem to be a ‘mirror’ but in reality it is just a pixelated version of yourself. Jahvnavi and I wanted to visualize the idea of our ‘second lives’ through an animation and also utilizing createCapture().

We want to show a transition from live video to a very pixelated version of ourselves which eventually pixelates to just 1 pixel. We initially focused on creative a pixelated image to start with, with color, offset overlays.

Next potential steps:

• Slider to transition from live video to just 1 pixel (# of pixels)
• More than one video (maybe different hues) - Andy Warhol inspired
• Animation of some sort to represent time

Link: https://editor.p5js.org/natayie/sketches/dNRmHaYSm 

Idea: Purikura Board

Cultivating everything I’ve learned the past month of ICM, I wanted to create an interactive drawing board inspired by Japanese purikuras. In Japan, purikura (プリクラ) refers to a photo sticker booth or the product of such a photo booth. The name is a shortened form of the registered trademark Purinto Kurab.

I initially sketched out a 400px by 700px canvas to place both a ‘board’ and the lower part for customized sliders and buttons. This idea uses several components we’ve learned in class so far:

• Variables (mouseX and mouseY)
• Conditionals (customizable buttons in certain areas)
• Arrays and Loops (changing fruit stickers)
• Classes/OOP

Visually, my initial goals were to have:

• A rainbow brush that changed hue as the mouse was dragged
• Stickers that would appear as the mouse was clicked
• Size of brush and type of fruit as potential sliders
• ‘Clear’ button to start new drawing

Creating a clearable drawing board with a rainbow brush and ‘stickers’

Version 1: https://editor.p5js.org/natayie/sketches/1GiKq4NCk 

Reference Links:

• Rainbow Brush - frameCount and colorModes
  https://editor.p5js.org/aferriss/sketches/Bys1YDQx7
• My project with color changing brush (Week 2)
  https://nataliefajardo.com/icm-animation-and-variables-week-2 
• Image media upload
  https://www.youtube.com/watch?v=i2C1hrJMwz0&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&t=0s 

I first wanted to create the initial drawing rainbow brush and the first sticker, along with the clear page button, to start with the simplest tasks. My instinct went to using functions such as mousePressed(), mouseDragged(), and variables for the customizable button. Some problems I ran into were having mousePressed() and mouseDragged() not starting simultaneously.

I got help from Luisa to separate them by working retrospectively by checking if the mouse was being dragged right before the user released the mouse. “If it was being dragged, we are at the end of a drawing, and shouldn't draw a strawberry. If it wasn't being dragged, this is a standalone click and we should draw a strawberry.” https://editor.p5js.org/luisa/sketches/bH808IIhJ 

Changing fruit stickers with sliders

Version 2: https://editor.p5js.org/natayie/sketches/QfivnkNUU 

Reference Links:

• Arrays
  https://editor.p5js.org/natayie/sketches/ThQf4aif5 

The next step was to make it so I can change the type of fruit sticker with a slider. I have yet to code with sliders yet and I believe I would be using an array for the various types of elements in the slider. 

I first created an array called “fruits” with elements of loadImage() of each fruit. I tested this concept of changing fruit with mousePressed() and loops and arrays. With conditionals I created another button to change the fruit.

Customizable brush - sliders

Version 3: https://editor.p5js.org/natayie/sketches/-tzEb3PkE 

Reference Links:

• Customizable sliders
  https://www.openprocessing.org/sketch/409852/ 
• createSlider()
  https://p5js.org/reference/#/p5/createSlider

Creating classes

Version 4: https://editor.p5js.org/natayie/sketches/dNRmHaYSm 

I created a Brushes() class - I had a hard time understanding how to separate everything into classes and call them out separately when I already have an array every time there is a mouse action since the numbers are fixed within the class parameters?

Link: https://editor.p5js.org/natayie/sketches/gBVvyAlQE

I took my drawing from the first week to clean up, and gave a bit of a makeover. I added a function to create a subtle rotation from the center for the clouds.

Link: https://editor.p5js.org/natayie/sketches/eAsjkNOoP

Created an constantly color changing interactive circle grid.

Link: https://editor.p5js.org/natayie/sketches/mpPusq-Wf

Interactive sliding circles - click to randomize a background color.

• 1 element controllbed by the mouse: Paintbrush
• 1 element that changes over time: Seconds
• 1 element that is different every time you run the sketch: Color