ICM Final

For my final, I created a blog, here’s the link (https://www.beanfaceblog.wordpress.com), that uses interactive p5.js sketches to document a person’s daily struggle with glasses. I have been reusing the character that I created in p5 since first assignment so I thought it would be cool to turn that character into the main character of my blog. Here are some of the sketches I post on the blog:

I am hoping to continue with the blog in the future.

Camera and Sound

This week we learned to load video and sound into p5.js sketch. I created a sketch that includes both video and sound elements.

I first followed Dan Shiffman’s video on amplitude visualization and created this new sketch based off my first assignment sketch:

Then I added two video viewports and placed them over the glasses:

I was wondering if there’s a way to modify the shape of the camera viewports such as rounding the corners of the viewports…


Play with an Existing Website in p5.js

Ah-Ha! I just turned this lovely 1900s website:
into this: http://alpha.editor.p5js.org/full/BklW4A-TW
p5.js editor version: http://alpha.editor.p5js.org/haiyiii/sketches/rJXfD7X6Z

[More screen shots to come]

1. Why is the background missing when I open the full-screen link? I already I linked the background image to index.html, and it’s shown in the editor, but why is it missing when I tried to embed in the post or open it up in full screen?
2. How can I embed the audio file onto the icon/image?



Array and Object

For this week’s assignment, I tried to use object and array to make multiple things. I programmed a simple sketch of snow fall:

I started the sketch by making one snowball(ellipse) in the object Fall just to test all the properties within object Fall is working properly:

then I added array to object Fall to make multiple snowballs:


I wanted to have the snow accumulated at the bottom of the screen, so within the “if” in the drop() function, I changed this.y to height, this.yspeed to 0. So I did successfully have the snow accumulated at the bottom of the screen. However, that means once the snow reaches the max height of the screen they accumulate then no more snow is falling…

I wanted to have the snow to continue to fall even after the first round of snow accumulated at the bottom. I tried to use push() to add another round of snow but didn’t quite workout. I did manage to use push() within a mousePressed function to add snow by clicking the mouse. But I still want to figure out how to have the snow fall continuously by itself.

Organizing Functions in p5.js

For this week’s assignment, we are asked to reconstruct code and break them out of setup() and draw() into functions. here’s what I did:

here’s the original code before breaking up the functions:

here’s the code after reconstruction of functions:

and here’s my slight modification to the code to make it more interactive:


repetition and interaction

For this week’s assignment, we are trying to make simple rule-based interaction and algorithmic design with simple parameters. Here is what I came up with for this week’s assignment:

Also for this week’s assignment, I swapped sketch with my partner Kim and tried to alter her code to create something different from what she had created, here’s her original sketch:

and here’s what I created after played with her code by using the “for” to create a series of boxes lining up diagonally, and the color changes according to mouse position:



ICM_Week 2

Here is the task for the week: Create a sketch that includes (all of these):

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

So I broke it down into three steps:

1. Create elements controlled by the mouse by using (mouseX, mouseY) variable:

2. Create one element that changes over time, independently of the mouse by adding speed.

3. Create one element that is different every time you run the sketch by using random()variable.

What I was hoping to create is very different from what I ended up creating due to my limited ability. I was hoping to be able to set a range of x within which the pulse can travel…but it ends up following the mouse to the edge of the canvas.

Drawing in P5.js

In my previous post, I post a very simple, beginner-level drawing done in p5.js. Here’s a slightly sophisticated and interactive version using primitive 2D shapes with (mouseX, mouseY) tab:

and here’s the code:

For further improvement, I am hoping to be able to place the glasses on over the eyes when I click the mouse.

Computational Media (ICM): Week 1

Officially entering the world of coding! Feeling nervous yet excited. I’ll probably be talking in code in my sleep pretty soon after working intensively over the course of this semester.

Just kidding.

But I am feeling hopeful because I can finally start making things that I always wanted but didn’t have the means to. So for starter, also as part of the week 1 assignment, I created a simple self-portrait using code only in p5.js editor. So here’s my nerdy smiley face:

It was very hard to get the position of each element right the first time; I had to test different numbers before getting it right, but gradually I would realize the pattern. This trial-and-error process will be my constant companion in future projects.

So as a newbie to the computing/coding/computer programming world ( sorry to sidetrack here, but I always get confused about these terms: are they interchangeable? do they mean the same thing? ), I am still discovering and continuously being amazed at what computation can do—the possibility seems endless! But whatever the possibility would be, in my opinion,  it ultimately revolve around one core purpose—to interact. As a deviant from the fields of architecture and a designer, I want to design and create interactions between people and physical space that can positively influence experience, behavior and relationships.

Here’s an interactive project that I really like. It’s an interactive digital wall designed by Büro Achter April , a design studio based in Stuttgart, Germany:

It’s hard for me to imagine the nitty-gritty computing process behind this project; it still seems so far from reach to me. Maybe one day I’ll figure out…or perhaps just part of it. But looking at projects like this makes me see opportunity—opportunity to imagine, and to turn imagination into reality.

Lately I’ve been jotting down ideas that I have and things I wanted to create, but to prevent me from dragging on in this post, I’ll share them in other posts. Not sure if I’ll end up making any of those or if it’s possible to make any of those…but nothing is impossible, right?