Creative Coding Lab

Recitation 7: Particles

I used this recitation as a practice for my Project A, so I tried to use practices to make the effects that mimic the city at night. the problem is that sometimes it maybe too bright

The way of Interaction is like this: users can draw lines freely on the canvas, after that press any key to close the light(make the canvas black) then, they can press on the key “l” to gradually light up the lines they drew.

the code is here:https://editor.p5js.org/zzrrqqq/sketches/4z8sTaEMz

I didn’t record a video because I think it’s more fun to interact.

The difficulty I encountered is basically how to light up the road gradually according to what the user had drawn. With the instruction from Professor Moon, I used “class” to achieve this. Store the spots as classes with four variables on the line into an array, and display elements in the array one by one will help, finally I succeeded, I also apply other changes and particles to it.

Reflection:

1. OOP is programming the movement and display separately, one can do any one of them at anytime without processing other codes. A Class is an object that can be shown and moved on the canvas, it can be freely displayed any number anywhere and user can decide whether to let it move. An example is a ball on the canvas that can either choose to move or not to move.

2. OOP is effective because the movement and display are coded separately, one can easily make changes without influencing other codes and freely decide whether to move. When we need to display same things at different status on the canvas, OOP is extremely useful as people can display them and decide whether to let them move or how to move.

3. I created an object that can be shown only as a line according to mouse and “pmouse” at first but can change color and show other particles when certain key is pressed. I used mouseX, mouseY, pmouseX, pmouseY together with other local values to make that.

4. How to reverse the class, for example, if the “move” asks the ball to go left for 100, how to let it go back to the initial point without creating new periods.

Recitation 5: Imaginary Creature

Optimus Prime

Optimus Prime is definitely the most welcomed character of the ip “Transformers”. He can transform into a big truck. My project aim to look at how he transforms straightly from the front. The following are the original pictures. I abstracted them.

I referred to the classic toy Transformers masterpiece 10 to design the transform process of my Optimus, it’s quite simple but effective.

Since there are other character that has the same figure as Optimus with  different color, so I made use of “Array” so that every time we process the code, it will show a different character, I also used another array to provide their name.

I used the rotate code and for loop during the coding, and they went quite well. I also split every part or limb of the body in different functions, which make adjusting the positions and changing some details more easy.

Here’s the link to my code https://editor.p5js.org/zzrrqqq/sketches/xVfzGGlzX

Reflection:

1.I stored colors and texts in arrays, I used them to randomize the body color and the name of my character, they were really convenient to use. I can simply store information(not only numbers, but also colors,  words etc.) in arrays and use them anyway I want. Arrays can also refer to each other. The codes can be much more simple and easy to modify.

2.When I want to start drawing a new pattern individually I will use the codes, using these codes are like creating a new canvas  on the original canvas, with the push translate and pop, I can create a pattern while not affecting others, I can also modify it individually without changing other codes to adapt to this change.

3.they are like small canvases on the original canvas, they can split drawing a complicated picture into several modules, one can create and modify each module without affecting others and put them together at will

4.I added  parameters to store the picked elements of an array. I also use parameters that contribute to the transforming process.

5.When I apply arrays there’s a radical change, the pattern’s color is fixed before that, but can be changed randomly when I apply the code, making the pattern much more diverse. Also, applying a parameter that keeps changing and use it in my shapes to make them move change my work from a picture into an interactive animation, that’s also a radical change.

Recitation3

This time I used the sine and cosine to create a motion, and I added random variables to colors so that the color of every circle drawn is uncertain

Here’s the URL to the project https://editor.p5js.org/zzrrqqq/sketches/blqAg8mOK

The problem is I tried to record a gif, but it never downloaded even though I closed all of the filters of Safari, so I finally record the screen and uploaded it as my work. It’s here https://youtube.com/shorts/kFnBnY1joYo?feature=share

This time the code went quite well, the only problem is to calculate the trigonometric function to create an axial symmetry shape, and it went quite well.

Reflection

1. Basically I used the linear functions and the trigonometric functions, linear functions are direct and easy to use. However if we really want to create some beautiful curly motions, we need to use sine and cosine to accomplish that. With trigonometric functions, there can be much more changes and beautiful figures.

2.I experienced the motion of combining the graph of the trigonometric functions together. If the drawing was completed the picture was an axial symmetry shape and it’s quite beautiful. The process of combining them is more about calculating the write number to use in the function.

3.With map, it’s more easy to convert numbers, meaning no need to use PI and type in complicated functions to convert the numbers to what is appropriate to present on the canvas.

4.By converting the function of a circle: sin^2+cos^2 =a 

Recitation 2 Interactive Drawing

I followed each instruction and did my project, the following are my code and work, please check each link to experience the interaction with the code as I think it’s hard to demonstrate through a video

1.Draw a line when mouse pressed

https://editor.p5js.org/zzrrqqq/sketches/aRloHZB3g

2.Add interaction to color and stroke weight

https://editor.p5js.org/zzrrqqq/sketches/JBEV_8X5j

3.One can use keys to adjust the color and stroke weight(“r”,”g”,”b” to adjust the color, “w”to make the stroke wider and “s” to make it thinner)

https://editor.p5js.org/zzrrqqq/sketches/aqOzKVN2f

4.Change stroke Weight according to the speed

https://editor.p5js.org/zzrrqqq/sketches/EJV63NT_5

5. An interesting interactive drawing connecting color, length of stroke and speed of moving the mouse

https://editor.p5js.org/zzrrqqq/sketches/3pogl6hJV

I do encounter some difficulties during the coding, one of them is that when I first completed the code by simply saying: when “r” is pressed, r=r+10, the actual number of the variable “r” is out of control as every time I pressed the key, it is not actually seen as pressed once. With the experience of last semester, I added another boolean called “prevkey” to save the key status and solved the problem. The following is a period of my revised code.

let r, g, b;
let s;
let prevkey=false;

function setup() {
  createCanvas(400, 400);
  background(220);

  r = 0;
  g = 0;
  b = 0;
  s = 1;
}

function draw() {
  if (keyIsPressed && prevkey==false) {
    if (key == "r") {
      if(r<255){
        r = r+10
      }else{
        r=0
      }
    } else if (key == "g") {
      if(g<255){
        g = g+10
      }else{
        g=0
      }
    } else if (key == "b") {
      if(b<255){
        b = b+10
      }else{
        b=0
      }
    } else if (key == "w"){
      s=s+1;
    } else if (key == "s"){
      s=s-1;
    }
    
    prevkey=true;
    }
  if(keyIsPressed==false){
    prevkey=false;
  }
 

Reflection:

1.In my project, I basically used variables to add interaction to it, by only using the simple functions in the program, a lot of effects I wanted were unachievable, for example, getting a number through a certain way, saving it, and using it when I need it. So I would say the main usage of a variable is saving, it is used to save a number or a status one got and can be acquired anytime when needed, also it can be changed by will, then, a lot of effects are achievable through computer drawing. In my project, variables are used to save the changing numbers determining the color and the weight of the stroke, they can be changed and used anytime.

2.In my third  code, I used several conditions, they are used to change the value of the variables. For example, for the variable “r” indicating the amount of red in the stroke color, I used the condition “if the key ‘red’ is pressed once”, which is “if keyIsPressed && prevkey==False” together with, if “key==”r”” the first one to test whether there is a key being hit and be sure it’s hit once, the second one to ensure whether it is the key “r”, under that circumstance, the program can be pretty sure when to and how to change the value of the variable.

3.keyCodes are special keys or non-ASCII keys including arrows, enter, shift, etc. while keys are for ASCII keys

The photo I’ve chosen is one of my favorite transformers models: Defensor from Generation Toys. I abstracted it to a pile of shapes and drew it with p5. the following are the photos and the screenshot of the work. 

and here‘s the URL of my p5 work. 

Additional Works

I added a variable to change the color of different parts of the robot. Here’s the screenshot.

https://youtube.com/shorts/KYUzaiVlSa8?feature=share

Reflection:

1.I prefer exploratory coding than using the reference although I also use reference from time from time to time. After we have learnt the basic of the language, we can try to create something on our own. I believe this process is the best way to form one’s own understanding of the language or the software, and when he or she encounters a certain problem, they will try to use the functions they already knew to solve it, and this is when one can manage the language and the functions.

2.When someone wants to draw something that is kind of vague, then drawing on the paper is better. For example, the traditional Chinese ink painting, this focus more on the feeling and atmosphere instead if what its exactly painted, under that circumstance, computer can’t exceed human.

3.When trying to draw something that requires being precise or requires the subtle changing of colors, then using computer is much better. Because using numbers to indicate the length or the color can save a lot of time of measuring or getting the exact color.