recitation7: functions and arrays

code:

float[] posX = new float[100];
float[] posY= new float[100];
color[] col= new color[100];
//type[] name = new type[length];
//declare array; build array

void setup(){
  size (700,700);
}

void draw() {
  for (int i=0; i<100; i++){
     if (mousePressed == true) {   
       posX[i]=i*i*i;
    posY[i]=i*i*i+random(700);
    col [i]= color( random(255), random (255), random (255));
    display (posX[i],  posY[i], col[i]);
   }
  } 
}

void display(float x, float y, color c) {
  strokeWeight(2);
  fill(c);  
  ellipse(x, y, 230, 230);
  fill(c-100);
  rectMode (CENTER);
  rect (x,y,150,150);
  fill (c-50);
  ellipse (x, y, 80,80);
}

Question 1:

In your own words, please explain the difference between having your for loop from Step 2 in setup() as opposed to in draw().

When I haven’t added the interactions or animations, the results are the same when I put loop in the  setup and the draw. Both of them are a still picture of the thing I drew. When I added a mouse-interaction in the loop, the two are different. When putting the loop in the the setup function, the canvas is always empty without any drawings whenever I press the mouse. When I put the loop in the draw function, it works the way I want.

Question 2:

What is the benefit of using arrays?  How might you use arrays in a potential project?

I have the information on the website:https://www.educba.com/advantages-of-array/

Saves memory

Memory can be allocated dynamically in an array. This advantage of array helps to save the memory of the system. It also helps when the pre-defined array has insufficient memory. At runtime memory can be allocated manually during run time. Also when memory allocation is not dynamic it stored the data in contiguous memory locations. The amount of storage required depends on the data type or size.

Easier debugging

When taken into consideration a linked list, it is usually time-consuming to check if an index is valid or not. Similarly, it is difficult to check it in a hash table as well. But when it comes to an array it has its specified indexes and hence optimal to use. It can be directly traversed with the index position.

Helps in reusability of code

One of the major advantages of an array is that they can be declared once and reused multiple times. It represents multiple values by making use of a single variable. This helps in improvement of reusability of code and also improves the readability of the code. If in this situation no array is used then we will need to store multiple values in multiple variables.

Multi-dimensional arrays

These can be defined as an array of arrays. Data which is present in tabular format like 1D, 2D, etc. can be defined. The total number of elements can be stored in the multi-dimensional array and can be calculated by multiplying the size of all dimensions.

To draw a conclusion, array is a more efficient way to store values. It costs less time and easier to debug.

How I’ll use array in a potential project?

I want to have different people moving different objects on the screen, I may assign these objects to an array and use it to store value.

Raps project 2 documentation Katie

Title

myth

Project Abstract

our project myth is a technology-based shadow puppet live performance which tells a story of a King overcomes the devil in his heart. Accompanied by the app called max, we explore different possibility with colors, lights and effects in addition to the traditional shadow puppet performance.

Project Description

This project is a narrative about a king who was stuck by different rumors and he decided to went on a journey to kill the devil. At the end we left an open ending for not knowing whether the king killed the devil or not. The concept behind the project is: we want to convey the message that try to look straightly at difficulties and try to coexist with them. Because there’s always hard times in life that you cannot kill them all at once. Learn to not avoid them and not to be controlled by others words. So the king represent any one of us and the devil represents the difficulties we encountered. Our inspiration come from the dementors, a devil character from Harry Potter series. 

Perspective and Context

we experimented our performance with different possibilities of colors and lighting, which I think is the core of the Lumia performance.  But most of Thomas Wilfred’s work is abstract, we are creating a concrete narrative and explore how the light show performance could enhance the experience of shadow puppet.

Development & Technical Implementation

At first we want to create the scene like this:

(screenshots from Harry Potter movie)

But it turns out very hard to achieve the first effect because we do not have real actors for this performance. The delay and slide effect is not so ideal when applying to the human shaped paper. For the second effect, it’s also hard to achieve because first we do not have enough people for performance, second, of we use a the light source come from back by the torch, the performer’s arms and hands can be easily seen.

after considering this, we decided to change or style:

(screenshot from Harry Potter movie)

This is quite doable for us: we need different layers of shadows. For some of the characters, we need to include the real thing in the performance, but for the others, it’s only shadows appear on the screen. However, the question with this kind of style is that it does not make the best use of Max. 

Our group started as creating different scenes.  We first decided there would be three main scenes: the first one: the king is bothered by rumors around him. The second: he decided to go on a journey to find the devil. The third scene: the king fighting with the devil. We made the assets together: we use black paper cards to cut the tree shapes and the human shape. We uses a different kind of paper, similar to the texture of tissue to make the shape of devil. And we used little pieces of papers with shapes of bats to indicate rumors around the king.

Then we divided up our work and I took the responsibility of making video effects. I add rotate, delay and slide effect to the first scene which the king was bothered by the rumors and cannot be himself. In scene two, I add color changes  to indicates the long hard adventure to of finding the devil. For the last scene, I set the tone darker and when the conflict happens, the screen starts blinking.

The code: :https://gist.github.com/JiayanLiu27/e911824cb8eca4074b1b18075bdf2461

https://gist.github.com/TheaSang/85b97f92a144c0b42f15dd8ecacd2541

Performance

I don’t no whether the performance went well or not because the image on the small television screen we looked at when performing seems to be very different than the one on big screen that our audience looked at.  Because I was the one to control video effects, so when I looked at both screens when performing, I sometimes confused about  how the effect would be. Was it too dark? or was the contrast not enough? I also took the responsibility to move the torch light, so it was hard for me to concentrate on both. another problem is that Max has a lot of uncertainties. I reopened it, and it became a totally new world. The video effects is not the one we did in rehearsal.

Conclusion

I think we didn’t do enough research on Lumia performance to figure out what’s the best material and the best way to perform. After seeing  performances from our classmates, I think liquid is really a good material for Lumia performance and the shadow puppet is not so ideal. Also, it’s kind of difficult when you tried to tell a story compared to just focus on the transformations of  abstract shapes. The first challenge is the audio: when we want to add an extra dialog, we need to make sure that it is able to be heard.  The challenge is the video: if we go too crazy about the effects, the figures might be hard to  recognize. So my biggest take away from this is it’s better to create an abstract film with Lumia.

PREPARATORY RESEARCH AND ANALYSIS (Katie)

 

A: the Chronus exhibition:

 I used to think that all technology-based art pieces contains interactions and allows people to participate in it. But after seeing this exhibition, it changes my perception about technology-based art. Those arts could be executed by itself, not involving any interactions with the audience. And I realized that the concept and meanings behind a work is far more important than the interaction itself.  The piece I enjoy the best is Beholding The Big Bang by Arthur Ganson. The device has a 1.32 hundred million spinning cycle which let the audience to think about the question of deep time, the past and the future.

Beholding The Big Bang image from http://www.chronusartcenter.org/cac-jwistmtcsisu/)

I think there are both differences and similarities between the technology-based art pieces and the non-technology based ones. The differences are some of the technology-based art works’  appearance  are not as impressive as some of the non-technology based ones like paintings or sculptures or installation arts and the technology-based art works are often motional while the non-technology based ones are often static. So the difference in experience is I always want to know how it works when seeing a technology-based art piece but do not have the curiosity of knowing how the painting is painted or how the  installation is installed. The similarities are they all convey meanings behind the work and allows free interpretations.

B: research two other projects:

The first one interactive clouds: https://www.likecool.com/An_Interactive_Cloud_Made_of_6_000_Light_Bulbs–Projects–Gear.html

According to a blog post from likecool.com: “The cloud is made from 1,000 working lightbulbs on pull-chains and an additional 5,000 made from donated burnt out lights donated by the public. It was appeared on September 15th as part of Nuit Blanche Calgary in Alberta, Canada. Visitors to the installation could pull the chains on and off creating the flickering aesthetic of an electrical cloud.”

I think this work is super interactive and beautiful. The most successful parts are: first it really trigger’s people motivation of interaction. I would want to change the appearance of the cloud when walking on the street.  Second, this is a cooperative artwork,  different people can involve and there are many many possibilities of the final outcome: the appearance of the cloud. Third, it reflects people’s mental state: if I am sad, I may turn off one of the light balls. So it’s a output of people’s inner thoughts. 

The second one is called DWI Modular:

https://www.creativeapplications.net/maxmsp/dwi-modular-by-felix-luque-tessellation-of-an-infinite-space/

According to “Created by Felix Luque, DWI Modular is a system comprised of 10 rhombic dodecahedrons, geometrical objects part of the family of  ‘Space- filling polyhedra‘: shapes that can be assembled to generate a tessellation of an infinite space. These forms act as the building blocks for a sculpture generator.”

I really like how it allows users to explore different possibilities of infinite space. I think it’s quite interactive but I am not sure whether technology achieve its best usage in this device.  Building blocks can probably achieve the same results.

C: come back to the definition of interaction

An definition of interaction given by Crawford “a cyclic process in which two actors alternately listen, think, and speak” (1) is very accurate and helpful. To achieve a successful interaction, I want to emphasize the words “cyclic” and “think” . “Cyclic” means that there are multiple rounds of actions and reactions. A one-round interactive movement is certainly not a good one. And the “thinking” process makes interactive distinguished from responsive. The users need to process the information given by the device in order to make the next movement. After researching the two projects I adds more to my definition of a successful interaction. First, I think it’s better to involve more body movement and more people to make this interaction more interesting. Second, the the output is better to be thought-provoking to make this interaction more meaningful.

Recitation 6: Processing animation (Katie)

add animation to the picture:

I add keyboard function and the draw function to the picture.

code: 

animation:

homework

scale:

I first writes: d++. In order for it to get smaller, I add a if statement: if d>=400,  d–, . but it turns out to be that the circle only scale once. When it reaches the largest (d=400), it stops there and doesn’t turns smaller.  Rody tells me the situation happens because that when d reaches 400, it tries to get smaller, but once it reaches 399, it will +1 and becomes 400 again. so d is jumping between 399 and 400.

The solution is to define a int variable: 

 

change color:

I first want to use the random function to change the color, but later I notice the colors are changing gradually, so random is not the right choice. As the hint suggest, I changed the color mode to HSB. HSB stands for: Hue, Saturation and Brightness. Knowing this, things become easier. we are not going to change the saturation and brightness, only the hue. So I set the rest of the two to maximum:100 and defined a variable: H, using the same method as the “d” to achieve the final outcome.

keyboard interaction (below), not reach the boarder (above)

the final animation:

list of interesting functions:

void keyPressed() { if (keyCode ==xxx) yyy; }

void draw () { rect (x , y, mousex, mousey);

recitation5: processing basics–Katie

The image I choose is the one from Mondrian:

this is a very famous abstract painting and I’m pretty impressed by how the three primary colors and the very simple rectangles can convey the power of shapes and color. Also, I found it pretty suitable to mimic by  processing: first, all the colors are plane, there’s no textures in those fills. Second, the shapes are really simple: rectangles. When we were asked to mimic a picture  by processing, this one immediately come to my mind.

step one: measure and choose 

I just eyeball it and set up the canvas as 800×800. At first I thought that no matter how big or small we set the canvas to be, we can always rescale it by our mouse. But as I started drawing, I found out that as long as you set a value to the canvas size, it is fixed and could not be changed. So then I adjust the canvas size to fit my screen: 650×650.

step two: colors

I use a online color picker https://imagecolorpicker.com/to grab the RGB values of the blue, red and yellow.

step three: functions

Then I use rectangle functions to draw is piece because compared to lines, it’s  easier to fill in with colors with rectangles. I also modify the stroke weight using strokeWeight function and fill the shapes with colors using fill. One thing to notice is that there’s no stroke on the border of the canvas, so for the (x,y) position, I set them into negative value.

this is my final work and the code: