Computational Media

Week 7 - The DOM

@KEYFRAME???

I couldn’t figure out the animate() function and it drived me crazy. Below, you can find several websites that I used to figure this problem out (but failed):

I’m 100% sure that I’m missing out an incredibly small detail. If I understand it correctly, we are suppose to declare a @keyframe and define our animation inside this function/class. But, where do I write this?

Therefore, I could only make a static image rather than a dynamic one. Click here to see the results.

<style>
p {
padding: 25px;
border: solid 20px red;
background-color: green;
color:
}
</style>

There is a small area above the first image as if there is a white box. Before there was my grey canvas. To solve this, I deleted createCanvas(); and background(); in my p5.js sketch. Even though the canvas turned white, the first image stayed still. I wanted it to start at (0,0) but couldn’t manage to do that. How can I solve this?

WRITE YOUR ANSWER INTO THE INPUT FIELD

For the second question, I created an input field where the text the user types is displayed both into the canvas and the paragraph. When I enter my answer, everything disappears. I’m not sure how it’s possible.

To try writing and answer and submiting it, click here!

Also, how can I move my input field below my button?

Computational Media

PraeseSuspendía

Praese
Suspendía