Categories
creative coding lab recitations

sketch gallery page

Here is the GitHub-powered page: https://zhuanya28.github.io/creative-coding/11r-sketch-gallery-page/ 

  • How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?

Good naming really helps when developing a website because it really helps manage the styles as well as the relationship between pages and files.

  • When would you want to use classes, when IDs?

IDs are used for a more general cases as well as very unique ones. I usually use classes (especially multiple classes at the same time).

  • Which limitations did you run into in the styling of your page?

A bit too hard to create pretty transitions (animations).

  • How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?

One of the benefits would be is that it is happening on the Web with HTML. However, when editing in Microsoft Word we have no-code interactions 🙂 it also has mistakes highlighted there.

  • Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?

Again, I feel like p5.js has way less opportunities when it comes to working with text and vector-based objects & animation. But p5.js has cooler animations 🙂

Categories
creative coding lab recitations

particles

For this recitation, we were asked to create a particle pattern that would resemble something that we can see in the real world. We ere required to utilize a self-contained Class that would have different properties and multiple methods. Also, we were asked to deploy dynamic arrays.

So, I have created these bubbles that move depending on the Mouse position (and + they have their own speed as a default. They also slowly disappear and randomly appear on the screen, renewing themselves. Moreover, you can hover and pop them 🙂 

I really liked this shading component and thinking of deploying it in my project a! As well as some kind of bubbles like that. 

  • What is Object-Oriented Programming (OOP), a Class and an Instance of the Class?

OOP is a way of programming that revolves around reusability of the methods and data.

Class is a data structure that contains properties and methods that could be manipulated hence reused.

Instance of the class is the object that you can create an “object” that would have the properties and the methods of the class. 

  • Discuss the effectiveness of OOP. When is OOP useful? In what way can it be utilized?

It is very useful when you want to create the same types of objects that have the same properties and methods, meaning that they have the same patterns of behavior but behave differently. With the use of loops and dynamic arrays you can create highly responsive and interesting visuals and interactive experiences that would have been very slow and hurtful otherwise. 

  • Describe the objects you have created. What properties and methods were implemented? What kind of behaviors did you create by manipulating them?

I have created a Class Particle that has position, color, opacity as well as the speed in both directions and size.

The methods include the independent movement (move()), movement determined by mouse position (moveFrom()), color/opacity (changeColors()), popping hovered that return “pop” if the bubble of hovered on (popIfHovered()), as well as display(). 

  • Please share it if there is any challenging and confusing aspect(s) in the OOP concepts and techniques?

I got pretty familiar with all the features at this point (I think), so I don’t have anything about this data structure that confuses me.

The link to my p5.js sketch: https://editor.p5js.org/zhuanya28/sketches/7jdbC9iAG

Categories
creative coding lab recitations

object dancers

For this recitation I decided to create a randomly-colored bee! I believe bugs have a lot of small body parts that would be nice to experiment with from movement perspective! 

My bee has moving wings, upper body legs, eyes and antennas! The wings, legs and eyes have a harmonized movement, while the eyes have their own thing going on! 

The colors are complementary by contrast! 

  • What is the benefit of your class not relying on any code outside of its own definition?

It is the first time I have utilized only class when writing a program, so it was quite interesting. I believe it is very cool because later it would be possible to multiply these objects described in class very fast. Like this:

  • What make it challenging to write code that has to harmonize with the code other people have written?  

I think it wasn’t really challenging for me from that perspective as I believe any kind of dynamic object would to some extent harmonize with another kind of that object! I believe it is going to be very interesting to look at the final results! 

  • Describe the terms modularity and reusability using the example of your dancer class.

Well, here, as I said, the use of class makes it possible to generate multiple objects in different places quite easily, which adds up to the reusability. Plus, the methods here provide modularity as they allow to have different results when called/not called.

link to the p5: https://editor.p5js.org/zhuanya28/sketches/ABLWqfTOM

Categories
creative coding lab recitations

imaginary creature

  • Describe what values were stored in the array(s) and how you utilized them. Share your experience while using the array(s).

I used arrays to store colors, because it made it easier to then utilize loops to assign the colors to the shapes. I had a lot of colors (to create gradients) so it was the most optimal way to do that.

  • Explain when/why translate(), push() and pop().

I used these to center the composition. It made it much more easier to have the center of the canvas as a relative position.

  • What is the effectiveness of User-Defined Functions?
  1. they are reusable (if the function has parameters)
  2. they make the code look cleaner as it breaks down your process into smaller pieces of code
  3. you can easily experiment by choosing to call the function multiple times/not to call it
  • What parameters did you added to your functions? How were they manipulate the effects of the functions?

Mostly the parameters were the position variables. As I also used translate() it made it easier to calculate the position of the shapes.

  • Are you able to identify methods/processes in your programming that are radically changed because of the uses of the functions you defined?

I used the UDF before so I would not say much changed, however I did find translate() very useful when working with composition and passing the position variables into the functions. 

This is what i created: 

Here is the link: https://editor.p5js.org/zhuanya28/sketches/vIDc_V0OY 

There is the code:

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(255);

  drawCreature(width / 2, height / 2);
}

let tentacleSize = 80;
let yChange = 6;
let colors = [];
let colors2 = [];

function drawTentacle2(x, y, angle) {
  rotate(angle);
  push();
  let currentColor = 0;

  for (let i = x; i < x + 200; i += 15) {
    colors[currentColor].setAlpha(100);
    fill(colors[currentColor]);
    if (currentColor < colors.length - 1) {
      currentColor++;
    } else {
      currentColor = 0;
    }
    noStroke();
    circle(i, y, tentacleSize);
    y += yChange;
    yChange += 4;
    tentacleSize -= 5;
  }
  yChange = 5;
  tentacleSize = 80;
  pop();
}

function drawTentacle(x, y, angle) {
  rotate(angle);
  push();
  let currentColor = 0;
  tentacleSize = 80;

  for (let i = x; i < x + 200; i += 15) {
    colors2[currentColor].setAlpha(100);
    fill(colors2[currentColor]);
    if (currentColor < colors2.length - 1) {
      currentColor++;
    } else {
      currentColor = 0;
    }
    noStroke();
    circle(i, y, tentacleSize);
    y -= yChange;
    yChange += 4;
    tentacleSize -= 5;
  }
  yChange = 5;
  tentacleSize = 80;
  pop();
}

function colorsDefine() {
  // colors[0] = color("#c9e4ca");
  // colors[1] = color("#87bba2");
  // colors[2] = color("#55828b");
  // colors[3] = color("#3b6064");
  // colors[4] = color("#364958");

  // colors[0] = color("#99e2b4");
  // colors[1] = color("#88d4ab");
  // colors[2] = color("#78c6a3");
  // colors[3] = color("#67b99a");
  // colors[4] = color("#56ab91");
  // colors[5] = color("#469d89");
  // colors[6] = color("#358f80");
  // colors[7] = color("#248277");
  // colors[8] = color("#14746f");
  // colors[9] = color("#036666");
  colors[11] = color("#EBF5CA");
  colors[10] = color("#DFF0A6");

  colors[9] = color("#d9ed92");
  colors[8] = color("#b5e48c");
  colors[7] = color("#99d98c");
  colors[6] = color("#76c893");
  colors[5] = color("#52b69a");
  colors[4] = color("#34a0a4");
  colors[3] = color("#168aad");
  colors[2] = color("#1a759f");
  colors[1] = color("#1e6091");
  colors[0] = color("#184e77");

  colors2[0] = color("#103755");
  colors2[1] = color("#0D3655");
  colors2[2] = color("#0E3757");
  colors2[3] = color("#194E77");
  colors2[4] = color("#22608F");

  // colors[5] = color("PaleVioletRed");
}

function drawHead(x, y) {
  colors2[0].setAlpha(255);
  fill(colors2[0]);
  circle(x, y, 150);
}

function drawFace(x, y) {
  noStroke();
  fill(255);

  rect(x - 60, y - 20, 40, 20);
  rect(x + 20, y - 20, 40, 20);
  arc(x + 40, y - 30, 20, 20, PI, 0);
  arc(x - 40, y - 30, 20, 20, PI, 0);
  arc(x, y + 20, 80, 80, 0, PI);
  fill(colors2[0]);
  arc(x - 40, y, 20, 20, PI, 0);
  arc(x + 40, y, 20, 20, PI, 0);

  arc(x + 10, y + 20, 20, 40, 0, PI);
  arc(x - 10, y + 20, 20, 40, 0, PI);
}

function drawCreature(x, y) {
  colorsDefine();
  translate(x, y);

  for (let i = 0; i < 2 * PI; i += PI / 6) {
    drawTentacle(0, 0, i);
  }

  for (let i = PI / 8; i < 2 * PI; i += PI / 8) {
    drawTentacle2(0, 0, i);
  }
  drawHead(0, 0);
  drawFace(0, 0);
}

Categories
creative coding lab recitations

patterns

  • How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?

I would say that having computer draw something for you might be a little bit less efficient as you have to come up with geometrical (mathematical) interpretation of a shape and its position, whilst in real-life you just draw whenever and whatever you can, you don’t have to have a function or even a name for it. This is a big advantage of in-person drawing:)

However, computers are very great at drawing a lot of elements pretty fast and also provide freedom to try a lot of iterations without having to draw something from scratch again. It is very had to change an oil painting’s background, however a couple of characters to change, press run, and boom! you’re done. also, again, can replace all the circles with triangles, change all the colors, make computer calculate some random distribution very quickly and, recalculate it, to create an iteration! this is very useful and cool, and something that you cannot do at such speed in real-life drawings.

  • What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.

Shapes mostly. I believe that allows me to place a lot of shapes in different positions easily.

  • What makes a good generative pattern?

I believe some interesting composition and pleasant interesting shapes and colors would do:) But I believe this is up to each person to identify!

discussion of my experiments:

starting with first 4: (1st row and 1st one on the second)

those are randomly generated in size shapes that also have their colors differ depending on their place on canvas. they looked quite interesting so i had a lot of fun with them.

next two are a bit more exploration of circles and their sizes. went a bit crazy with the 6th one but it was kind of worth it.

last three were created by outlining a lot of lines that would each have a pair and then, when the frequency of line appearance increased, it become one, very unexpected gradient. 

link: https://editor.p5js.org/zhuanya28/sketches/eDiYZJses