Computational Media

Week 6 - More Repetition: Objects and Arrays

WAIT, WHAT IS HAPPENING? HTML?? CSS??

I completely overjudged this weeks content when I saw the names of the videos: “creating HTML elements”, “the basics of CSS”. Actually, it was quite amusing. After learning some of the available funtions at p5 to add HTML elements, I mostly enjoyed the part where we integrated our mousePressed, mouseOver/Out to call-back a different function. At this point I’m not sure if we used this syntax before, but it narrows down different actions into a single-line of code:

button.mousePressed(changeColor);

Basically, this code it telling my button to call the function inside the paranthesis when my mouse is pressed. It makes it so easy to link up some actions together. The videos also show us how can color etc. change when I’m hovering over a paragraph. These interactions sounded so familiar since we’re experiencing them while looking through a website or filling up a form on our phones.

The value() function is also very useful that it helps you get the value from somewhere and place it into something else.

var slider;

function setup() {
slider = createSlider(10, 100, 20);
}

function draw() {
ellipse(100,100, slider.value(), slider.value());
}

I used both CSS and HTML elements in this code to create different actions. The slider value is being used for my ellipses width and height. Since CSS is about the style and the visual look and feel of a concent, I used CSS elements to create a hovering effect. When I’m hovering on the text, the background color of the paragraph changes into pink.

I know that we just started learning about these elements, but I’m wondering how can we create a simple website with headers and paragraphs with different text styles. We even saw how to do some simple interactions with buttons/sliders and mouse effects. I’m curious how can we turn this into something else, rather than writing it on a p5 web editor. It would be exciting to learn to build a website :))

For my exercise code, click here!

* Can we build the most simple website with our little knowledge? (just with some text and photos)
* What is the reason we would implement HTML and CSS elements to a p5.JS file? 
* createInput() and .input() part is confusing. Can we go over them?
* Does it mean that HTML and CSS go along side, since one is about the structure, initial content and the other is all about the style?

AM I CAPABLE OF PRESENTING?

For jiggle jiggle, click here!

I used to use gridX and gridY variables. I guess it was confusing to see both gridX,Y , posX,Y and shiftX,Y variables all together. After a while I felt that changing the name of the “grid” variable made more sense. Since I have a tileCount, I was actually refering to column and row numbers. So, I changed them into columnNumber and rowNumber. I feel like now it’s more comprehensible and less confusing.

I commented out some lines and somehow I ended up in a perfect diagonal. Mathematically, I couldn’t understand how it happened...(Images 3 and 4 below)

We talked about modularity of a function by turning on/off functions. So my one last question is:

* Does modularity happen when we comment out only one functions? Or does it count if we comment out more then one, since some functions will have some variables that are being used in other functions as  well?

Computational Media

PraeseSuspendía

Praese
Suspendía