12 hours later than expected the homework is done. Note to myself: I just can’t wait for the day to come when I will be able to say “I can do it in 2 hours”, and then… I can actually do it in 2 hours. At the moment the final work is usually 200% different from the initial idea, the fridge is empty (yes, I tend to visit the kitchen very often) and my brain is dead.

Initially, I started working on the snake game* idea, but after struggling with too many details, decided to play with something I’ve already got.

*(Will keep snake game as an exercise in between classes — but yes, I’ll finish it).

Last Saturday was the first time I attended Moon’s workshop: we played some more with for loops and repeating objects on the screen. The workshop was great and I took one of the ideas from there for my homework:

Screen Shot 2015-10-13 at 16.38.31

I didn’t want to work with ellipses, so rewrote code for rectangles, changed size and gap, and here’s what I’ve got:

Screen Shot 2015-10-13 at 16.43.16

I had a hard time finalizing the code to be able to work with button and sliders. Not sure why, but when I had the main code in the setup function, I could do everything I wanted, but the button and sliders didn’t work. Only when I moved it to the function draw and changed the order of few lines, it came out ok. The difference: I get water circles impression when the code is in “draw” — not sure why.

Screen Shot 2015-10-13 at 16.45.48

It seems like there are multiple rectangles towards the middle of the canvas (you can see it well because of the “strokeWeight”, but not sure why would it be so?

Update (10min later): I get it! I moved background to draw and now it looks the way it is supposed to — no water circles and sliders are working nicely.
Here’s the final look:Screen Shot 2015-10-13 at 16.38.57

The main idea was to play with different DOM elements as this is what we talked about last week. I’ve added one button to give the random rectangle color when pressed and two sliders to change the rectangle size and gap between them. The full list of DOM elements I used:

  • button
  • slider x2
  • h1: header
  • paragraph — here I wasn’t sure how to make an “enter” in the paragraph, so added two separate.

To summarize, I can say that I did so many changes in the process that I don’t really remember now what didn’t work at the beginning and how the initial code looked like. I wish I could first build the framework / structure of empty functions and then fill them in, but I’m not enough advanced yet, so it takes a lot of steps and unplanned changes before I get (if lucky) to the final work… and many extra hours.

But I’m enjoying it so much and my intention says that it could lead somewhere and that I should be persistent and dig deeper, so that’s exactly what I’ll do.

Here’s the final code.

One thought on “week7 homework: playing with DOM”

Leave a Reply

Your email address will not be published. Required fields are marked *