Re-made In China Final Project | Emma


A use of home produced plastic


plastic bottles & plastic rubbish bags & rubber moulds


For the final project, I focused on the most two plastic waste I created in daily life: plastic bottles and plastic rubbish bags. I made them into earrings and cup coasters.

Earrings Inspiration: 

For the plastic bottles thing, I got inspired by the precious plastic project we encountered in class. Since we can melt plastic bags, we certainly can melt plastic bottles. And I wonder what happens to plastic bottles in a state between “being melt” and “not being melt”. I checked online and found a material called heat-shrink sheets. Basically people draw patterns on it and use heat guns to shape it.

The difference between heat-shrink sheets and plastic bottles is very subtle. I did some research and found heat-shrink sheet is a more stable material compared to PE plastic. PE doesn’t shrink evenly and is hard to dye on color. So I wanted to try using PE and PET plastic bottles.


Earring Process: 

I cut plastic bottles into round pieces of different sizes. Then I used a candle to heat beneath. It’s a very tricky work, I have to control the distance between plastic pieces and flame very carefully, otherwise the plastic pieces melt and turn black immediately.

A interesting thing about plastic bottles getting heated is that they curve into different directions, but not randomly. So I can decide the direction I want and the pattern that looks nice.

Coaster inspiration: 

I got inspired by the typical repeating pattern on Chinese tea coasters. Thus I think of how can I do the repeating pattern of plastics. Like, how can I connect individual plastic parts together.

So first I created  four same heart shaped plastic cchunks using waste plastic bag. Then I started working on the connection technique. I tried three ways, using toothpastes, using glues, and using another piece of melt plastic.



Re-made In China | Online Journal (Emma)

Hi, I’m Emma, and I will keep my online journal for class remade in China here. For this journal, I want to record my daily life about wastes as well as acquiring materials necessary to complete my final proposal, project and report / presentation.


We start class today. The first thing Marcele showed us is the news that “Chian no longer accepts garbages from foreign countries”. I checked this news online, if you are interested, here’s some articles I like:

BBC news:Why China does not want your waste anymore

CBC news:Pollution recycle in China

Here are some of the things I learned:

  1. China has huge potentials of recycling and reusing, the thing is about the culture that people are not familiar with recycling.
  2. Short of garbage (original source for production) and too much garbage are both happening in China.


During this week collecting garbages, I found out that I’ve used so many plastic bottles, packages throughout daily life. To my surprise, almost all of them are food packages, and I consume basicallhy the same amount every day:two bottles of drink, one takeout. Some chewing gums, some chips, that’s all.

If I’m consuming same kinds of plastic things every day, then it would be easy to think about how to control and find alternatives. I’m thinking of getting myself a reusable bottle. However it’s not a easy thing, I

11/1: Learn everything about plastic pollution

I found this video introducing plastic pollution problem on youtube:



We went to interview the gargabe collectors in JinQiao area this Sunday. At first we were thinking of the plaza near JinQiao, however we met many difficulties about interview regulations, people are not willing being interviewed. Then we decided to head back to dorms, the place we are most familiar with.

To our surprise, the dorm cleaning is divided into three parts. First is the inner cleaning company, they are responsible for keeping the dorm inner buildings clean. They don’t do recycles and classification. The second is the outer cleaning company, and they are responsible for keeping the whole outer environment (the neighbourhood) clean. They do recyles and classifications. Also, they drive garbages outside every day to garbage station in Pudong. The third one, is the estate property, which takes hold of the upper two. They form the employerment relationship together.

Here’s the link to our interview:



In last class, one of the fellows from IMA talked about a coming workshop. In this workshop she wants to take use all the cardboards waste collected in dorm from Double 11, and build them in the shape of mascot of Taobao. I found this workshop really interesting, however, we did not figure out how to create the 3D shape using wastes in class. Today I checked out some awesome artworks made of waste. I want to share them here:


This is a project I particularly like. Makaon is a Japanese artist and he uses the traditional skills of origami when creating works. However, there is no paper involved. He uses recycled drink cans instead to create sculptures of popular characters. I think we may take use of it.

Kinetic Interface Midterm (Emma)

Project Name: An Interacitve Shawdow Play Experience

Project Overview:

This is a video showing how the project works:

Concept & Inspiration:

Even before I start this concept, I got super interested in leap motion and decided to take use of it in my project. However, I hope leap motion in my project is not just a replacement for the mouse, instead, it should work as an extension of hands, our ten fingers. Also, I feel it would be great if I can combine this modern technique with traditional Chinese culture where I have lived in.

Based on these two concepts, the traditional Chinese shadow play is what comes to my mind first. I chose the character Monkey King cause it’s very familiar to audience all around the world, and stands it a symbol of Chinese culture.

Visual Assets:



   monkey king body parts                                              shadow body parts



Basically I divided my whole codings into four assets and five mechanism. Here is a picture introducing their relations:

I’ll give a brief introduction here one by one.

The first mechanism I use is the map function. Following the codes in picture, I could get an angle, angle a (red in picture). This angle is very important cause it allows me to express all the following points, positions, and lines.

By using angle a (same as angle1 in the picture), I could locate the moving points, and thus create the moving lines. Thanks to professor Moon!He taught me about trigonometric functions which plays a really important role here.

After creating lines, images, and shadows, I want to make use of the object function taught in class. So I created this particle system with flower in it. I referred to some codes online so I can create the effect like snow flackers fallilng down gently.


During the whole process, I came across following problems:

  1. Sound Library – sound library in processing goes in a mess. I tried to play background music in my project but that didn’t work. However after presentation, Candy told me that I could use a library could mineo, in which sound works quiet well.
  2. Text font – I have no idea, but, acutally transparent backgrounds of png. pictures shows up as black when font files (.vlw) gets imported in data file. So I gave up doing texts by coding, instead I created them in Illustrator.
  3. Projection – I really hope to present my work on projected platform. However, it took me some hours to find out that absolute coordinate doesn’t work in projection mode, thus I have to convert points like “(360,100)” into “(offscreen.width – 440, offscreen.height – 700) “ … That’s just too much work and I did not have enough time, so I gave up.

Possible Improvements:

For future work, I kind of want to improve this project into my final project. Now I’m thinking of:

  1. Add to the movements of leap motion. Audience can not only control images on up down direction, but also on left right direction.
  2. I hope to add another character that follows the other hand of the audience, with two characters, it would be possible to make my interaction into a story-based one.
  3. Thanks to fellow on critic session, he mentioned that there’s way to make different parts of images work as a whole and rotate in some linear ways. If it works, the whole process would get closer to the true fact of shawdow playing in real life. I’ll ask Professor for help in following days!

Digital Fabrication – Final Project | Emma

Project Name:

Map~From ECNU to NYUSH~

Overview, Concept & Purpose:

My project is basically a 3D map, showing a part of Shanghai metro lines. The skeleton is made by laser cutted acryl. Different colors of lines come from vinyl cutting, and the character figures for stations are achieved by MDF laser cutting.

The concept it’s conveying is of several layers. First, it’s a footprint of my everyday life, getting on metro and travelling in Shanghai this modern city, my hometown. Second, for NYUSH community, my map intentionally set the old NYUSH (ECNU) and NYUSH on Century Avenue as starting and ending point. It thus represents a collective memory of our community. Last but not least, the map is a combination of “modern” and “tradition”. Colorful lines of metro stand for high technology and modern city life, however, the wooden patterns of stations, with traditional Chinese fonts rastered, are symbolizing the hidden “old” Shanghai in every roaring busy street.

This project is aesthetic and educational oriented. As an aesthetic piece of work, it’s delivering beauty, and the concept I metioned above. Also, it’s interesting if you learn the Chinese characters, and  refer them one by one to the 2D metro map.



I got my first inspiration from this photo that I took in IKEA months ago. It’s a world map decorating on the wall as part of the room, which gives residents an aesthetic enjoyment. The part that I like the most of this design, is the constrast between the texture. The blue wall paper and the light brown wood. This contrast gives a sense of consice but rich in meaning, since the earth we live in is covered by woods, plants and blue oceans. Then I went on to do online research about digital fabricated map, and found there are so many works made of various textures. 


river(laser cut)                 city map (paper cut)     city map(laser raster)    city map (laser cut+raster)

I got super interested in the city planning maps. I found one amazing piece of work about Berlin. As you can see from the picture below, the delicate and ingenious planning of the city gets fully showed from the cutting technique. This artwork really provides me with an aesthetic view towards cities. So, based on this inspiration, I decide to make a map of my city Shanghai. At first I wanted to the same as the Berlin one, however, I found that a metro line map may be more interesting for following reasons: I take metro every day, and it’s a footprint of my life; metro line is representating the high tech of Shanghai, while contrasting the “ancient” wood texture, gives audience of deep think of the city; Metro line map of center Shanghai is basically a perfect rectangle, which makes it easier to handle.


Process, Material & Method: (Explain the method you used to design, and the reasons you had to select your digital fabrication approach. Describe the materials you used and how they functioned in achieving your purpose).

Step 1:  Initial Prototype

Material: Illustrator (shape tool)

I got this picture of metro line in center Shanghai, as you can see, it’s nearly a perfect rectangle, and contains ECNU (old NYUSH) and NYUSH both!

Then, I basically drew the position of each stop, and designed different symbols. For stops with no transfer, they are round figure, for stops with one transfer line, they are rounded-rectangels, and for stops with more than one transfer lines, they are BIGGER rounded rectangles!

Step 2:  Preparing for laser cutting

Material:Illustrator (pen tool)

Next, I set the finished shapes in one layer, and make them transparent in 40 percent. Using pen tools, I created the irregular shape connecting stops and lines together. It took me some time to do it, cause I have to be very careful about anchor points, joints and curves. The borders are set to 0.1 weight, however to show it clearly on screen, I make it 2 pt here.

Trace the shapes on lower layers                               Ready for laser cutting!

Step 3: Laser cutting

Material: Acryl 3mm ; laser cutter

I sent the file to PC in lab, and did a test with cardboard. It’s quite successful so I went on doing cutting with acryl board.

The reason that I choose acryl rather than other materials, the most important one, it’s transparent, which offers a kind feeling of “modern”, contrasting to the “ancient” wood texture feeling that I use in other parts of the project. Also, I have never used acryl before, so just want to have a try.

With the help of Cindy, I tried the prototype on cardboard first, and it worked quiet well, so I printed the whole board on acryl successfully.

A video showing how it works:


First try                                  Materials left                       The  final product!


Step 4: Preparing for Vinyl Cutting

Material:Illustrator (Pen tool; Filling tool); CanvasWorkplace

Then I went back to illustrator to create colorful lines. Since I’ve got 13 different lines(plus HuangPu River!), initially, I created 13 different layers with different colors, and save them as different .svg files by unhidding layers one by one. However, after I did this and worked in Canvas workplace, it turned out that CanvasWorkplace will recognize the hidden layers. Thus, I have to copy paste 13 layers in 13 black illustrator files, and save them as .svg seperately. I took me some time to figure this out! I had to be very careful when naming them, or the following vinyl cutting work may go wrong.

After saving all the .svg files, I uploaded them to CanvasWorkspace one by one, and downloaded them as .fcm files. One thing to notice is that, since my whole piece of work is 40cm x 30 cm, bigger than the vinyl cutting platform paper, for some lines, I have to divide them into to parts and print seperately.


fill lines with colors                        13 layers               the 7th layer “blue” on Canvas Workspace


Step 5: Vinyl Cutting

Material:  Vinyl cutter; colorful adhesive paper; pen knife

After preparing all the files, I just plugged in the USB and printed out 13 lines one by one, and then stick them on the prepared acryl skeleton. The reason I chose vinyl cutting for this step, first, I don’t think laser cutting is appropriate for adhesive paper, also, I want to make use all kinds of tools to see how they work. It turned out quiet good.


Step 6:  Preparing laser cutting for stations

Material:Illustrator (pen tool, shape tool, text…)

Considering about the stations, I was very hesitated at first. I considered using vinyl cutting on fluorescence paper or adhesive paper at first. I deisgned identical patterns for each stop, like:

   with these pictures, I suppose the whole project can be more vivid.

I tried them for about two hours. However, the outcome was far from satisfactory.

  1. Shapes for stations are basically 2cm x 2cm or less, which is too small for vinyl cutting, also, the pictures are too complicated. I used both kinds of paper, they just slide when cutter finishes the outline at once.
  2. It’s too much work to stick the vinyl cutted patterns on acryl one by one.

So I decided to give up on vinyl cutting, Kristine suggested me that I could use laser cutting because it’s super accurate. I got her! Also, if I can do laser cutting with MDF, the wood like texture surly contrasts the “modern” colorful metro lines a lot. To make the design of stations more traditional and cultural representative, I took use of the first character of each stop, and used 3 types of traditional Chinese font. It looks like this now:

Step 7: Laser Cutting! Again!

Material: MDF 3mm; laser cutter; hot glue

Finally, I got here! I sent my file in laser cutter and it worked quiet well! I do the raster for one time and cutting for 2 times, the whole process took about 25 minutes. After that, I tried to glue all these patterns on acryl by liquid paste, however, they fell off very often. Kristine suggested me again that I could use hot glue gun. It took me about 20 min gluing all the patterns, it gets much better.


how it looks in laser cutter                  an example “曹”



Conclusion & Reflection: 

( Answering “Explain the reasons you have to create this physical object as your final project, and why it is interesting to use digital fabrication techniques to design and create it.”)

I learned a lot from this final project, to conclude, there are basically 2 aspects:

  1. Technical:

In this project, I played with laser cutter(acryl and MDF ), vinyl cutter(all kinds of paper!). I learned how to use hot glue gun, meanwhile, I worked a lot on illustrator with pen tool, which I was not super familiar with before. What’s more, I got familiar with CanvasWorkspace this platform for vinyl cutting. I got to know how to deal with patterns if they are larger than cutting platform. Nicolas taught me to save space when doing laser cutting, cause also, it’s saving time. I learned different attributes of various materials, and had a basic idea under what circumstances they would better fit particular project.

2. Concept of fabrication:

In this class, we are taught to design functional, aesthetic, amusing… things out of digital fabrication technique. In doing this project, I reflected on what the concept “digital fabrication” is conveying. It’s different from handmade fabrication, on a sense that it’s more accurate, and it makes it possible combining various textures together in one piece of work.

I create this physical object as my final project, to respond my reflection that “digital fabrication makes it possible combining various textures together in one piece of work”. Also, I think this project is delivering the accuracy, productiveness of digital fabrication that handmade fabrication can never achieve, for example, the cutting of acryl, and the tiny characters on MDF material. I believe digial fabrication brings artists more room for creation, and more ways to bring their imagination into reality. I feel enjoyable in this process, combining high-tech and tradition together in a nature way.


Kinetic Interfaces: Assignment Week4+5 (Emma)

Here is the link to my week4 assignment: Click Here

For the assignment this week, we are asked to program an interactive or alternated portraiture with Pixel Iteration or Manipulation. I think the process of calculating and expressing is very interesting. I created two experience for this assignment, one is very basic, and the second one is a little bit superior version compared to the first one.

These are two videos showing basically how they work:




These are the technique I used in the first work:

  1. Void mousePressed()

Since it’s an experience based on mouse pressing, I set basically all my functions in the void mousePressed() function. However, I got into trouble when I found out at first that, when the mouse is pressed, the picture do reverse its color, however, only after half a second, it turns back to the original picture. I was very confused and asked Professor Moon for help. He kindly reminded me two things: First, it is because I do the “loadImage”and “image function”in void mousePressed, that I go back to the original picture after every click. Second, I should not put “loadImage”in void draw() because it obviously decreases frameRate.

  1. If function

I deal with the reverse process separately, since there are only two colors on the picture: white and purple. So, if the red(c) of the pixel is 255, then it’s the white pixel, if the red(c) is 87, then it’s the purple pixel. However, to increase error tolerant rate, I set the condition as >200 and <100.


These are the technique I used in the second work:

  1. Two variables to express a range of pixels; double for loop

I got stuck in the expressing of the square for a long time, it took me more than 20 minutes to realize that I have to introduce two variables, and a for loop inside the other for loop, to express the whole thing. The basic idea is that, when you click a pixel on screen, the void mousePressed() function enables the mouseX an mouseY to be recorded. And if that (mouseX, mouseY) is detected as purple, the 20×20(I set it, it can be any number) square in which it serves as the left top vertex will turn white, vice versa. It should be easy but I struggled a lot, however the good news is I know how to express a 20×20 square with variables next time!

  1. mouseClicked()

Basically the same as the first work/


PImage img;

void setup() {
  size(800, 800);
 img = loadImage("NewYorkUniversity.jpg");

void draw() {
   int ct = 255;
   text("Press The Mouse!", 200,80);

void mousePressed() {
  int w = img.width;
  int h = img.height;

  for (int y =0; y<h; y++) {
    for (int x=0; x<w; x++) {
      int index = x+y*w;
      color c = img.pixels[index];
      float r = red(c);
      //float g = green(c);
      //float b = blue (c);

      if (r >200) {
        img.pixels[index]=color(87.0, 5.0, 139.0);
      else {
  image(img, 0, 0, 800, 800);

PImage img;

void setup() {
  size(800, 800);

  img = loadImage("NewYorkUniversity.jpg");

void draw() {
  image(img, 0, 0, 800, 800);

  //for (int x = 0; x<img.width; x+=40) {
  //  stroke(255);
  //  strokeWeight(1);
  //  line(x, 0, x, img.height);

  //for (int y=0; y<img.height; y+=40) {
  //  stroke(255);
  //  strokeWeight(1);
  //  line(0, y, img.width, y );

void mousePressed() {
  img = loadImage("NewYorkUniversity.jpg");

  int w = img.width;
  int h = img.height;


  int index = (mouseY-1)*w + mouseX;
  println(mouseX, mouseY);

  color c = img.get(mouseX, mouseY);

  for (int b=0; b<21; b++) {
    for (int a=0; a<21; a++) {
      if (red(c)<100) {
      } else if (red(c)>200) {
        img.pixels[index+w*b+a]=color(87, 5, 139);
  image(img, 0, 0, 800, 800);

Week3: Create a 3D print model | Emma


An  aerodynamic chair.

You can view the process of 3D modelling this chair in Rhino from my last post here. 

Overview & Concept: 

The object I choose is a chair I bought from IKEA, and the concept I try to communicate is “aerodynamic“.

Here’s the chair, it’s called MAMMUT, a plastic chair designed for children. I grabbed the pictures from IKEA China, you can visit them from here.

I really appreciate its aerodynamic design of legs, which not only adds to aesthetic beauty, but also help keep the chair much more stable. This chair has stayed at my homefor more than 10 years. In 2010 Shanghai Expo, I even took it for rest when lining up in front of Saudi Pavilion for 6 hours. It proves that the aerodymaic design of legs ensures more stable sitting experience, and makes it more safe for users compared to traditional staright legs. Meanwhile, the chair’s life span is much longer, since the legs divide pressure above in a more scienfic way.


Step1: Export the project in .stl format.

Step2: Import the file in Cura

I came across a problem here that no matter how many times I do the import, model just don’t show up in the case. Marcela helped me with it. She went back to my Rhino model→solid→union, and combined the three legs with the platform as a whole. Then I sent my project back to Cura, finished the setup, and started printing.




     THE BASE                                                        THE PLATFORM


STARTING THE LEGS                                    MOSTLY FINISHED




                                 GOOD TO STAND!


I really enjoyed the process of 3D printing, cause it’s super precise and delicate, based on the model. It’s a process of converting 2D to 3D, and the technique of printer going layer by layer, kinds of reminds me of the integral in maths concept.


Kinetic Interfaces:Assignment Week3 (Emma)

This is the link to my week3 assignment: Click Here

In this assignment, we are asked to create a simple game with interesting interaction utilizing Objects and “abstract” buttons & button states. Especially, we should use ArrayLists, adjust the number of particles depending on the varying states, such as lifespan and total number of particles, to avoid dropping of the frame rate.

This is a video showing how my assignment works:

In this assignment, I basically take use of three mechanism.

  1. ArrayList

ArrayLIst is what I’ve newly learned this week. By using arrayList, I can freely add or delete objects from the list (by using squares.get(i) function & squares.remove(i) function). Arraylist is very convenient compared to building sets of objects.  However, I think one thing to be aware of, is when doing for function, we should count from the end of the arraylist:  for (int i=squares.size()-1; i>=0; i–) , instead of from the beginning. Otherwise, we will lose many elements.

2. object

The squares I create are in object function. I kind of struggled in map and rotate functions. They are tricky from the beginning.

3. void mousePressed()

Instead of displaying automatically the figures, my project gets more interaction by mousePressing. I call the “add” funciton in void mousePressed.

ArrayList<Square> squares; 

void setup() {
  size(500, 600);

  squares = new ArrayList<Square>();
  squares. add(new Square(width/2, height/2, random(0.1, 1.5), random(40, 60), random(0, 255), random(0, 255), random(0, 255), random(-180, 180)));

void draw() {
  fill(0, 10);
  rect(0, 0, 500, 600);
  for (int i=squares.size()-1; i>=0; i--) {
    Square square = squares.get(i);
    square. display();
    if (square. finished()) {

  for (int n=0; n<height; n=n+20) {

void mousePressed() {
  squares. add(new Square(mouseX, mouseY, random(0.1, 1.5), random(40, 100), 255, random(0, 255), random(0, 255), random(-180, 180)));

void Line(float y) {
  translate(0, y);
  line(0, 0, width, 0);

class Square {
  float x;
  float y;
  float speed;
  float diameter;
  float r;
  float g;
  float b;
  float angle;
  float life = 255;

  Square(float tempx, float tempy, float tempspeed, float tempdiameter, float tempr, float tempg, float tempb, float tempangle) {
    speed = tempspeed;
    diameter = tempdiameter;

  void display()
    translate(x, y);
    fill(r, g, b, life);
    float a = sin(radians(frameCount+angle));
    scale(map(a, -1, 1, 0.2, 1));
    rect(0, 0, diameter, diameter, 25);

  boolean finished() {
    life= life-1;
    if (life <0) {
      return true;
    } else {
      return false;

Week2: 3D Modeling with Rhino | Emma

This week,  we are asked to create a 3D model with rihno. This model should an everyday object, also, it should reflect our interests and be able to represent a specific concept we attempt to communicate. The object I choose is a chair I bought from IKEA, and the concept I try to communicate is “aerodynamic“.

Here’s the chair, it’s called MAMMUT, a plastic chair designed for children. I grabbed the pictures from IKEA China, you can visit them from here.


I really appreciate its aerodynamic design of legs, which not only adds to aesthetic beauty, but also help keep the chair much more stable. This chair has stayed at my homefor more than 10 years. In 2010 Shanghai Expo, I even took it for rest when lining up in front of Saudi Pavilion for 6 hours. It proves that the aerodymaic design of legs ensures more stable sitting experience, and makes it more safe for users compared to traditional staright legs. Meanwhile, the chair’s life span is much longer, since the legs divide pressure above in a more scienfic way.



 RIGHT                                         TOP                                         FRONT


  1. First, I created a sphere in the middle of the platform, and used the cage edit to squeeze the sphere into a curve platform, which is the surface of the chair.


  SPHERE                           CAGE EDIT                  CURVE PLATFORM

2. Next, I started working on legs. At first I thought of creating the legs separate to the surface, and combine them together in the end. However, I found a much easier and clever way on rhino working community, The idea is not complicated itself though, I can create three symmetry lines as the legs, and create two faces vertical to each line, one on the bottom and one as the end. Thus, I followed the instruction and switched to the front view and created a line in the slope I like. The technique then I used is the polar array, so that I can duplicate this line for three times, and the (0,0) severed as the central point.


   LEG                          THREE LEGS                       THREE LEGS

3. The third step is to focus on one line, and create two circles vertical to it, one at the end of the line and one at the bottom of the chair surface. To do this, when creating the circles, choose the “vertical” tab on status tab, and select the line, then they will automatically snap. Or, I may also choose to create a column at the end, which kind of make it easier, I just need to delete it later anyway. Also, delete the circle on top for next step.





4. All preparations are done, the most important step is now. (I learned this technique from last semester 3D class). Use “blend surface” tool to blend the two round curves on the line. Rhino is very strong and can automatically create the aerodynamic feeling, all we need to do is to adjust some parameter to make it look nature. After one of the three lines is done, just use polar array again, and the chair will come out.

5. The final step is, reminded by the community, to flatten the chair legs so that it can stand on a flat ground. The technique is to create a line,  and use “trim” tool to achieve flat legs.

6. I deleted the extra  guidesbuline in the end, and used rander to add the color.





Kinetic Interfaces: Assignment Week2 (Emma)

This is the link to my week2 assignment: Click here

In this assignment, we are asked to create a simple sketch (a static image or animation) using at least 3 User-Defined Functions and Transformation functions. In my work, I explored the functions and created an interesting aesthetic experience.

This is the video showing how it looks:

The work is consisted of 3 user-defined functions:

  1. void MyOwnSquare: used to create the blue square arrays in the background

To create this blue square arrays, I use two nested for loops  so that the squares can be  arranged in an ordered way. Also, the blue squares themselves are rotating, which is easy to achieve in rotate(radians(frameCount)) function.

2. void MyOwnRect: used to create the rotating squares following the mouse

This part is a little bit tricky, at first I want to create the effect that, once the user mouseclick, then appears a rotating square at (mousex, mousey), and if the user click elsewhere, more and more rotating squares come up. However, I didn’t achieve it cause I have no idea how to combine void draw() and void mouseClick() together. So I changed my way and create a line of squares. Also, I added a semitransparant rectangle as the background, so there are shadows as I move the mouse.

3. void MyOwnLine: used to create the black lines in the background

I add the third function to create more effects. I also make use of for loops here, so that the line can duplicate in the gap distance I set.


boolean rotate;

void setup() {
  size(500, 500);

void draw() {
  fill(0, 0, 0, 30);
  rect(0, 0, width, height);

  for (int n=0; n<height; n=n+20) {

  color c = color(129, 216, 207); // blue
  float speed = 10;
  for (int x =0; x<width; x=x+50) {
    for (int y =0; y<height; y=y+50) {
      MyOwnSquare (x, y, 10, c, speed);

  if (rotate == true) {
    MyOwnRect(random(5, 50), 255, 255, random(255), 6);

void MyOwnRect(float w, float r, float g, float b, float n) {
  translate(mouseX, mouseY); 
  fill(r, g, b);
  rect(0, 0, w, w, 7); 

void MyOwnSquare(float x, float y, int w, color c, float speed) {
  translate(x, y);
  rotate( radians(frameCount) * speed );
  fill( c ); 
  rect(0, 0, w, w);

void MyOwnLine(float y) {
  translate(0, y);
  line(0, 0, width, 0);

void mouseClicked() {
  rotate = true;