Week 4 — Kristina You

︎︎︎Introduction to Computational Media

Week 4 Exercise

PART 1

1. Code this design using a loop.

code
preview

2. Code this design using a loop.

code
preview

3. Create 20 columns that turn red when you hover over them.

code
preview

4. Modify question 3: make the first half of the columns turn blue and the right half turn red.

code
preview

5. Make every other column blue.

code
preview

6.Create a grid (any size) using your choice of 2D shape, curve, or a combination (with nested loops).

code
preview

7. Draw a shape to the screen every half a second. In between, just draw the background.

code
preview

PART 2

What repeats in your life or is cyclical? What patterns do you find in nature, architecture, textiles, conversations? Make a sketch with a lot of repetition, more than you want to hand-code.

code
preview

What did you do?

-I created a mini calendar using various functions such as the nested loops for the ellipses, and also created a title that displays the current day and floats back and forth along the x axis. For this, I used the day() function that is linked to the p5.js library that displays the current day that the user accesses the sketch. I also attempted to try to create a loop for the text of the actual days of the month using various methods such as nested loops, creating a list, but was having trouble with making the numbers appear in the actual positions that I needed them to be. ( I am still working on this part.) I reverted to the analog method of writing in the text for each day instead.

What worked?

-I think that the nested loop function that I used for the ellipses to create a pattern used for the calendar worked pretty well. I had to work on controlling where the pattern started and ended which took a bit of time to figure out. I also tried using the days function for the first time which was great because I wanted to create a floating neon sign look for the title of the calendar that would change for each day.

What didnt work, and what steps did you take to try to solve the issue?

-I definitely did struggle with this creative exercise because I wanted to implement a lot of the new material that we covered in class that requries more complex functions and equations. I did get frustrated along the process because I was trying out different methods of listing out the days on the calendar as it is supposed to be. Part of the problem was due to the fact that I was using a variable for these numbers and wanted to print out the value of the nested function in text, but was instead, getting the word ‘num’. I found out that this was because I was using quotation marks around the variable- I am still working on making the nested loop or index function work for this particular issue.

Did any code-related questions come up to you?

-Yes- Similar to the previous response, I did have trouble working with producing text/numbers in a consecutive list fashion positioned in particular places which led me to manually write out all of these numbers within the sketch. I think that there could possibly be several solutions that I can explore to resolve these issues, including some new materials that were covered in class after I completed this exercise. Also, ideally I would like the rest of the numbers on the calendar to disappear once the mouse is hovering over the current day which I will attempt to do with the mouseOver function.

︎︎︎ BACK TO ITP BLOG