Collaborama Pt.1

So I’m currently in a collaboration project with my colleague and a new friend, Lilian, to work on a project together using our P5.js knowledge so far as our toolbox. The Challenge is to create a group activity that utilizes 21 screens together.

After brainstorming a couple of ideas and possibilities within our limitation, Lilian and I came up with an idea about ‘unplugging’ and having a full attention to the people around us without distraction of screens, except that it is facilitated by screens and our P5.js app. Our app creates a phone campfire.

From my research on campfires, it is a casual ritual performed today in campsites to prevent predators and pests, or simply to provide warmth and comfort. The idea of it came from bonfires, which is more ceremonial.

Google definition:

Bon·fire
/ˈbänˌfī(ə)r/

noun

noun: bonfire; plural noun: bonfires

  1. a large open-air fire used as part of a celebration, for burning trash, or as a signal.
    “the smell of burning leaves from a garden bonfire”

Origin

scrns9

late Middle English: from bone + fire. The term originally denoted a large open-air fire on which bones were burnt (sometimes as part of a celebration), also one for burning heretics or proscribed literature. Dr Johnson accepted the mistaken idea that the word came from French bon ‘good’.

The word was derived from bone and fire, the tradition began in Great Britain, because in 1605 AD, the conspiracy to blow the British parliament was foiled. Guy Fawkes, who is the suspect of the attempted blow, then was executed and burned to ashes. Since then people have been celebrating the bonfire.

There are many cultural traditions behind bonfire. In Czech Republic, people start bonfire in festival called “Burning The Witches”, it is very old but still observed folk custom and special holiday, to celebrate the coming of spring. In Nepal, bonfire is almost synonymous with camp-fire, people do it during winter months. In India, especially in Punjab, people eat peanut and sit around the bonfire to celebrate the festival of Lohri to celebrate the winter soltice. In Japan people start dancing around bonfire to mark the end of O-Bon season.

Today people would start campfire at campsite to provide heat for cooking or to prevent insects and predators to come around.

All of them have the same similarities, which is to bring people together around fire. What is it about fire? Fire has always been an important part of human lives. There is an interesting article about human relationship with fire in context of western civilization on this page: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4874404/

On Lilian’s side of research of ‘unplugging’:

Digital Detox / Unplugging

Both interested in the concept of bringing people together and away from technology. 

Initial introduction to audio and mic input from self-portrait exercise. 

The on-going trend to unplug or “digital detox” , people are interested in experience ‘real life” and minimalism – japanese minimalism or hygge

https://www.countryliving.com/life/a41187/what-is-hygge-things-to-know-about-the-danish-lifestyle-trend/

Books:

scrns10

Strains on relationships for people who are too plugged in
The concept and popularity about unplugging
The history of the bonfire and coming together to discuss
Deeper relationships: looking people in the eyes. Pushing your body forward and upright. 

Unplugging is a privilege in digitally divided and hyper-connected societies. The term “digital divide” implies that the worldwide, explosive growth of the Internet and data ( Kitchin, 2014) is an uneven, multidimensional phenomenon. 

Unplugging is a subtle notion that is emerging as a contestation to the dominant technocratic mode of urban governance (Kitchin, 2014)  that is, the so-called Smart City model that demands a transition to overcome the social tensions and misalignments caused by hyper-connected societies.

https://www.tandfonline.com/doi/full/10.1080/10630732.2014.971535

  • The time spend per week has doubled from 8 hours to 18.9 hours (Ofcom, 2015)
  • Goldilocks Hypothesis: the “just right” amount of moderation and screen use
  • Not to deprive people of important social information and peer pursuits
  • Not to displace meaningful analogue pursuits
    • Differences between sedentary and non sedentary activities (watching a movie, browsing social media vs. activitely engaging with people online)

A Large Scale Test of the Goldilocks Hypothesis: Quantifying the Relations Between Digital Screens and the Mental Well-Being of Adolescents

(https://ora.ox.ac.uk/objects/uuid:672ebf78-4b9a-42d3-8e81-8bc2561dce11/download_file?safe_filename=Przbylski%2Band%2BWeinstein%252C%2BLarge%2Bscale%2Btest%2Bof%2Bthe%2BGoldilocks%2Bhypothesis%2B-%2BQuantifying%2Bthe%2Brelations%2Bbetween%2Bdigital%2Bscreens.pdf&file_format=application%2Fpdf&type_of_work=Journal+article)

Calming/Relating/Clearing your mind apps:

  1. AmbiPro
  2. Calm
  3. Headspace

And our combined journal of our progress so far:
(DISCLAIMER: we blended our journal together as a more collaborative approach, so some of these words are of Lilian Leung’s and some are mine)

Development

Inspiration
https://www.youtube.com/watch?v=D-CrRpQ80aw (Pause App – Inspiration)

Day XX – Sept XX

Originally we tried working with a gradient built on RGB, though while digging into control of the gradient and switching values, I [lilian] was quite comfortable yet with working with multiple values once we needed to go having them change based on input

scrns11

Instead we began developing a set of gradients we could use as transparent pngs, this allowed us more control over what they visually looked like and allowed the gradients to become more dynamic and also easier to manipulate.

Initial testing of the gradients and proof of concept of having the gradient grow based on micInput. 

While Lilian was working on the gradients of the fire, I [Nilam] was trying to figure out how to add on the microphone input and make the gradient correspond to the volume of the mic input. So I used mapping.

scrns1

The louder the input volume the higher the Red value gets and the redder the screen become. This way we can just change the background to raster image, and instead of lowering the RGB value to 0 to create black, it changes its opacity to 0 to show the darker gradient image on the back of it.

scrns7

scrns8

I [Nilam] made edit on Lilian’s version of experimentation and integrated my microphone input and mapping part into the interface she already developed.

Day XX – Friday, September 19, 2019

Our Challenges

We were still trying to figure out why mic and audio input and output was working on our laptops but not on our phones. The translation of mic input on to increase the size of the fire seemed laggy, though retried resizing our images. 

On our mobile devices, the deviceShake function seemed to be working, while laggy on firefox, playing the sketch on Chrome provided better, more responsive, results

Other issues were once we started changing the transition of the tint for our sketch that sometimes the deviceShake would stop working entirely.

We wanted a less abrupt and smoother transition from the microphone input. So we tried to figure out if there are functions like delay. We couldn’t find anything so we decided to try using if statement instead of mapping.

We found out from our google searches that there is a possibility of a bug that stopped p5.js certain functions like deviceShaken from working after the recent iOS update in this past summer. Because, while laggy, it still worked on Lilian’s android phone, while it just completely never worked My [Nilam] iphone.

Lilian – working on additional function like mobile rotation and acceleration to finess the functionality of the experiment.
Nilam – working on creating a smoother transition of the gradient fading by using if statement and acceleration instead of using mapping

The rest of the project are to be continued on part 2

what’s the tea

kermit1

another practice with p5.js featuring my favorite frog, Kermit.

I knew how to make a drawing sketches with p5.js but I never knew how to make it show both the shape of what the drawing is gonna be and the trails of drawing itself. So today I’m combining the knowledge of how to insert an image file and how to use createGraphics to create a kermit stamping machine. Maybe when I have time I will add a background too so you can stamp kermit in multiple different context. click the box to start stamping your kermit.

“But that’s not my problem”

So my journey to learn p5.js as a language keeps going on. I tried to make stuffs that are on the fun end so I don’t end up getting too bored doing it. I think Kermit helps a lot.

Anyways today I went to the canzine with my school friend, Lilian, and met Emmy, my twitter buddy, for the first time. I bought a couple of cute merchandises and a really beautiful and informative zine about Hong Kong protest. And when I got home I took a long ass nap and then my roommate cooked us dinner, it was delicious.

I think things are going great. I will learn more and live more everyday.

Ordinary Computation

Today we learned more about P5.js in class. It was a lot of information in one session and I couldn’t grasp all of the materials because I was trying to understand the parts that was explained at the beginning. I personally think Nick was going too fast, though I understand why he needed to. We’ve only got 2 years in grad school!

I’ve had this conversation with a friend, Allan Doyle, before, but I just remembered again that learning coding is just like learning a language. And we’re trying to understand it over such short amount of time. But I think the upper-hand of being in a learning space is that we can consistently dedicate a huge chunk of our time to learn it.

Learn it like a language. Learn it as if it’s ordinary. I read the intro part of Ordinary Affect by Kathleen Stewart today. What is Ordinary Affect? I tried to break it down by word definition as I usually do to understand a word or a phrase:

or·di·nar·y
/ˈôrdnˌerē/
Learn to pronounce
adjective
adjective: ordinary
  1. 1.
    with no special or distinctive features; normal.
    “he sets out to depict ordinary people”
    synonyms:

    usualnormalstandardtypicalstockcommoncustomaryhabitualaccustomed,
    expectedwontedeverydayregularroutineday-to-daydailyestablished, settled, setfixedtraditionalquotidianprevailing

    “the ordinary course of events”

    antonyms:

    abnormal

    • uninteresting; commonplace.
      “ordinary items of everyday wear”
      synonyms:

       averagenormalrun-of-the-millstandardtypicalmiddle-of-the-roadcommonconventionalmainstreamunremarkableunexceptional,
      unpretentiousmodestplainsimplehomelyhomespunworkaday,
      undistinguishednondescript, characterless, colorlesscommonplace,
      humdrummundaneunmemorablepedestrianprosaicquotidian,
      uninterestinguneventfuldullboringuninspiringblandsuburban,
      hackneyedstalemediocremiddlingindifferentMore

      antonyms:
  2. 2.
    (especially of a judge or bishop) exercising authority by virtue of office and not by delegation.
noun
noun: the ordinary; noun: ordinary; plural noun: ordinaries; noun: Ordinary; plural noun: Ordinaries
  1. 1.
    what is commonplace or standard.
    “their clichés were vested with enough emotion to elevate them above the ordinary”
  2. 2.
    BRITISHLAW
    a person, especially a judge, exercising authority by virtue of office and not by delegation.
    • US
      (in some US states) a judge of probate.
  3. 3.
    those parts of a Roman Catholic service, especially the Mass, which do not vary from day to day.
  4. 4.
    HERALDRY
    any of the simplest principal charges used in coats of arms (especially chief, pale, bend, fess, bar, chevron, and saltire).
  5. 5.
    ARCHAIC
    a meal provided at a fixed time and price at an inn.
  6. 6.
    HISTORICALNORTH AMERICAN
    another term for penny-farthing.

scrns3

and interestingly, the word Affect had 3 different meanings in 3 different context,

af·fect1
/əˈfekt/
verb
verb: affect; 3rd person present: affects; past tense: affected; past participle: affected; gerund or present participle: affecting
  1. have an effect on; make a difference to.
    “the dampness began to affect my health”
    synonyms:
     influence, exert influence on, have an effect on, act on, work on, conditiontouch, have an impact on, impact on, take hold of, attackinfectstrike, strike at, hitMore
    antonyms:
    be unaffected
    • touch the feelings of (someone); move emotionally.
      “the atrocities he witnessed have affected him most deeply”
      synonyms:
      upsettrouble, hit hard, overwhelmdevastatedamagehurtpaingrievesadden,
      distressdisturbperturbagitateshake, shake up, stirMore
      antonyms:
       be unaffected, be indifferent to, unaffecting, unmoving

scrns4

af·fect2
/əˈfekt/
verb
verb: affect; 3rd person present: affects; past tense: affected; past participle: affected; gerund or present participle: affecting
  1. pretend to have or feel (something).
    “as usual I affected a supreme unconcern”
    synonyms:
    pretendfeignfakecounterfeitshamsimulatefabricate, give the appearance of, make a show of, make a pretense of, play at, go through the motions of; More
    • use, wear, or assume (something) pretentiously or so as to make an impression on others.
      “an American who had affected a British accent”
      synonyms:

      assume, put on, take on, adoptlike, have a liking for, embraceespouse

      “he deliberately affected a republican stance”

scrns5

af·fect3
/ˈafekt,əˈfekt/

noun

PSYCHOLOGY
noun: affect
  1. emotion or desire, especially as influencing behavior or action.

 

scrns6

Being in a class called “Affect And Emotions In Practice” I went into the reading with presumption that within the context of the class the affect mentioned in “Ordinary Affect” primarily mean the 3rd description of the word. But I would miss the entire point of this reading if I take that as the only meaning of the word here.

Order, rules, fixed, not special, habitual, common and normal. It is what it is supposed to be and just is, ordinary. Nothing is out of place, it’s just there where it is supposed to be. What is it? Affect. But what is affect? “to make difference to”, “to move someone emotionally”, “pretend to feel”, “pretentiously”, or “desire or emotion”? perhaps it is all of them. They might seem to mean differently, but they make sense together in “Ordinary Affect”. as Steward wrote:

“Ordinary Affects is an experiment, not a judgement. Committed not to the demystification and uncovered truths that support a well-known picture of the world, but rather to speculation, curiosity, and the concrete, it tries to provoke attention to the forces that come into view as habit or shock, resonance or impact. Something throws itself together in a moment as an event and a sensation: a something both animated and inhabitable.”

But of what something? gestures, was it, that we talked about in class? Maybe it’s the poetry of everyday movements, the way someone touch their hair, when your parents lick their thumb to flick the page of newspaper, the way trees  grow in directions that are recorded in their grain pattern, the tic toc of a clock? characteristics of the universe that are always affected and affecting to one and another, going on continuous motion keeping the world rotating and revolving.

I don’t know. I would love to hear what other people have to say in class on Monday. I’m very excited for the discussions in this class. But ordinary, ordinary…. I also want to make coding something that is ordinary to me.

So I did a little more practice this afternoon, and probably gonna watch videos and do more tonight. (you know I prefer a night out dancing at some old men bar with friends but I haven’t made many friends just yet and this is okay too).

I tried to create a prototype of our group project that reacts to microphone input, but somehow it’s not working on mobile as we intended to for the context of the piece.

scrns1

https://editor.p5js.org/nilampwns/sketches/UGF7GFVCM

I tried to find solution to it but google wasn’t much of a help this time around.

But I also want to show this other thing I worked on for fun,

scrns2

https://editor.p5js.org/nilampwns/sketches/mvB3bq2BG

Which is also in my sketches that make sketches series. The dot goes up and down based on microphone input and the horizontal movement are moving steadily. It’s almost as if it’s making graph for voice input. It was very fun to make!

P.s. we learned how to use webcam on our p5 sketches as well. And we captured this in class.

liam

took us 4 collaborators to make this pic happen. Thanks Liam, Jessie, and Lilian.

In attempt to understand creative coding

So in my previous post I ranted about how I don’t feel connected to my new medium yet. So I’m finding simple way to connect with it better, start small. So I started with making what I already know how to make on top of my head: create a small drawing tool. So I did and messed around with it. It’s like I’m starting to make small sketches of codes. And here’s the sketch of the sketch’s result:

result

Untitled

Untitled3

untitled4

it’s just a bunch of shapes that create pattern.

here is the code on p5.js ; here is the second one ; the third one ; & the fourth one

> left click to clear
> the fourth one is voice activated!!