Category: ICM

I was inspired by TextRain(1999) Danny showed us in Pcomp  class and I decided to try to interact with text.

I want to use images of people to interact with words that make them feel frustrated.

This time I focus on 20-30 year old Chinese female around me.And I collected the most frustrating sentence for them on social media.And what they mentioned most was “How old are you? Why are you not married?”Because in China, many elders think that young girls should get married as soon as possible, otherwise it will cause many problems.

So I want to use the text”你都多大了？怎么还没结婚？”，means “You need to get married soon”.

My initial idea was to let text interact with each other in the physical engine，but unfortunately I couldn’t import them into the physics engine.

So I can only complete two parts separately.

1st Dirty Words Mirror：inspired by text rain(1999)and Jason’s Chinese character mirror

This is my final version Dirty Words Mirror Final,I decided not to preset content and let the user input their own content.

What I want to express is that those words that made you depressed made you who you are today.But too much upset word will make you ugly.So don’t care too much.

 

2nd kaleidoscope-matter-js

I followed Shiffman’s tutorial to make a rectangle sketch in physical engine and I decided to develop  it to a kaleidoscope.I also add the orange circles in the sketch, because I think they look like Hula Hoop.

 

 

 

 

This is the preliminary version of my final project, I completed two steps this week.

1.

I inspired by text rain(1999) on Danny’s pcomp class and really want to make a Mulan poem text rain.

Mulan poem is so popular in China that everyone can recite it.

1st .I made this version by mistake and make every poem line as an individual part.

They look too dense and also kind of dull.Then I changed them into the format I originally wanted.

2nd.

This is the format I wanted at first.But I quickly realized that every single Chinese character doesn’t make sense. Mulan poem is so familiar to us that we should think of the whole sentence by mentioning any word in it.

3rd.So I manually separated some words and sentences with delimiters.I think now when people interact with it, it feels more make sense.People can choose what they want to interact with.

I wonder if this is the reason why computers cannot completely replace humans to deal with text.

 

2.I am very interested in physical engine.I followed the coding train and wrote a code for matter.js.

sketch here：https://editor.p5js.org/MagicMonkeyWow/sketches/KQ8unXswN 

I am thinking about whether text can be used in matter. js，because I hope my Mulan poem can be used in it.

It looks matter . js now can only work with shapes.But in my sketch in p5 this week,I made a file “box.js” and used it in sketch.js.I am thinking about is it possible for me to put my text in another “.js”file and use it in physical engine?

 

 

Allie and I wanted to try ml5 to control music and we decided to use handpose.

She made the input and I made the output.And we tested it together.

 

Our interactive part:

1.fist_size can control the music play/stop, and also can control the volume of music.(this works)

2.the x of index_finger can control the rate of music.(this works)

I tried two songs, the “rythm” one is more obvious on rate change.

3.the x of index_finger can also control the drum.(I’m not sure whether it works.I tried many times ,but I cannot hear it.)

Our question:

the song hears noisy in p5, is that because I changed the rate of it?

We are trying to pause the song and hope it can continue next time.But we only can stop it and play from the beginning next time.

I put a test video here, in case p5 runs too slow in class. 

Actually,inspired by Chrome sound lab,I want to make more complex

pattern with algorithm. But I fail to make them work.

So I decided to back the basic thing. I started from changing shape of the wave and tried to make them look fancy.

 

I am trying to make a flaming red lips talking to you。

https://editor.p5js.org/MagicMonkeyWow/sketches/8U-fIUCsd

I am exploring color interaction with my Arduino this week.

I tried several things,

1.Lisa’s Gradient clover with mousepressed.  And I can change the “mouseclick” function into a digital input from Arduino.

https://editor.p5js.org/MagicMonkeyWow/sketches/pWMnugcYM

 

2.Lisa’s Gradient clover with a analog input.

I use “mouseX” as a variable here and I can change “mouseX” into my accelerometer value(analog input).

https://editor.p5js.org/MagicMonkeyWow/sketches/y46OBjtop  

 

3.I want to try some painting splash effect and the splash-ink effect of Chinese painting.It seems difficult and I am still working on these refenrence.

blot-painting: https://mostlymaths.net/2020/05/blot-painting-p5js-sketch.html/ 

the splash-ink effect of Chinese painting(in Chinese):

https://zhuanlan.zhihu.com/p/53695818

 

This week, finally my project is a Halloween mirror.

It runs sooooo slow.And I don’t know why.

At first, what I want to create is a festival mirror.I can change it into Halloween mood(purple and orange)/Christmas mood(red and white) and NYU mood(purple and white).

I tried function RADIO and PUSH/POP.But it cannot load out.

This is the one I wanted first,but it didn’t work.

https://editor.p5js.org/MagicMonkeyWow/sketches/UHRUbquUk 

I only keep one Halloween mirror finally.

 

Share one interesting thing,

I also stupidly want to use my partner’s photo to fill the pixel.

After a few times try,I finally realized that all photos would become black points when they are filled into  pixels.

Thanks for the encouragement from Lisa’s email this week, it is very important to me.

Last weekend,I rewatched all the Code Train videos that we have watched before and followed to rewrite  the code.I felt better with code now.

This week,I wanted to make a “Gold Coin Rain” sketch，but I found it difficult to make gold coins look three-dimensional.Then I decided to use the image.

Till now,I didn’t know whether I can use images successfully.So I used random falling ellipse(as falling snow) to make my sketch first.

Then I changed the ellipses into images(my money bag).

Finally, it shows like this:

https://editor.p5js.org/MagicMonkeyWow/full/9kyj70Yj1

When you clicked one money bag, it would disappeared and your money shows on the screen increased.

I learned from Google how to increase the number of screen displays after each click.

 

There are some things I cannot solve:

1.How to have endless money bag falling down? Or how to have endless objects?

2.When I clicked one money bag, sometimes two disappeared.I learnt how to limit the mouseclick in a circle, but how to limit it in an image.

I reorganized my project W3.I think I understand more about function.

https://editor.p5js.org/MagicMonkeyWow/sketches/YYhqzbicU

 

And I want to explore more .

I tried to make the person’s eye follow my mouse and I want to use function to achieve that.But I failed to limit its range in the eye.

I tried to use object. And I tried to add this falling sakura as the background of my boy.

https://editor.p5js.org/MagicMonkeyWow/sketches/BF13bCaBO

Try to organize all the code, but it become a mess, like below.

https://editor.p5js.org/MagicMonkeyWow/sketches/Kvr8VWMTJ

My classmate Nancy came to help me debug, and finally I retained my homework.

I would like to try falling sakura next week.

 

 

 

I want to make a hat changing game this week, but I only achieve a very basic one.I’m still working on it.

my sketch:

I want to make a hat changing game like that – my little boy can change his hat.And I want to have a right button and a left button to choose different hat style.

Now my program is like this:

I ran into a problem when I wanted to use a triangle button.I don’t know how to limit the interactive range just in my triangle button .

And I am also trying to add more hat style I want and trying to make my hat can slide in and out.I also want that my hats can shake when mouse click the hat.

Trying to figure out how to limit the range when the button shape is more complex. 

This week,I add some variables on my 1st week little tiger.

Link

I realise that we need to choose a suitable variable when we want to meet some specific effect.

For example,

I use these code to move my tiger’s arm,

var handy=450

….

//arms left

  stroke(250,100,20)

  strokeWeight(10);

  line(160,handy,230,500);

  handy=handy+1;

But I found that I cannot limit the range of the movement of tiger’s arm.

My question is how can I limit the range of the movement?like I want the arm to go down and to back on the half way.

I knew I can use “random()” to achieve this easily, and that’s why I think it’s better to choose a suitable variable in the beginning.I think I need more time and exercise on familiarising with different variables.

I also have a problem in “1 element that is different every time you run the sketch.”

I do not remember we have learnt this and I also checked The Train Code videos.I asked my programmer friend,then he told me to use “if” and give me a link like that,https://codepen.io/leadream/pen/ZEWMreg .It’s too complex for me to understand.

Feelings this week：

DO NOT finish homework on the last day,then I can HAVE MORE TIME TO ASK FOR HELP.

2nd post this week:

I watched the videos for next class and I reedit my little tiger.I think I knew how to change one element everytime I run the sketch now.

AND ALSO,

I decide to adjust my way in finishing my homework.

Next week ,I will finish the assignment as soon as possible and then I watch other videos and material.

After that ,reedit my sketch and write a second post for that week.