Category Archives: icm

html dom: personal site

I was a little short on time this week, so I wanted to do something nice and simple.
I created this personal splash site for myself:

Screen Shot 2017-10-15 at 10.11.40 PM.png

in motion:

kathy site.gif

It’s definitely still got a bit of tweaking to do. I’ve been meaning to re-do my personal website for a while. It’s been very vanilla and minimal as of now:

Screen Shot 2017-10-15 at 9.01.29 PM.png
I thought it would be fun to integrate a p5 background into a single-serve page.
I was inspired by Rafael Rozendaal’s slinky “slick quick” website:

http://www.slickquick.com/

Screen Shot 2017-10-15 at 9.46.21 PM.png

Okay, so I made something which is secretly a bouncing ball (although it does have a layer of bouncing colors too.)

Screen Shot 2017-10-12 at 7.26.58 PM.png

I added a button at the top of the page which would let people refresh the background of all its color nonsense.

A few of the challenges I ran into:

  • I wanted the “button” element to be responsive when I changed the window width. I know how this works with CSS on an existing HTML element.I wonder if there is a way to control a specific HTML element which I already created, without declaring it in p5?(Here, “clear bg” stays fixed when I resize the window:)
    Screen Shot 2017-10-15 at 9.06.33 PM.png
  • In the end, I put all my nested HTML elements into one js dom div. Because that one string got so long, it was difficult to change aaaaannny of the content in the Div element.
  • Object oriented: The color change was a bit more difficult than a normal 1d ball bounce; I wanted the individual red, green, blue values to “bounce” back when they hit max or min values (255, 0).I got it in the end; for a while, it looked like this:Screen Shot 2017-10-12 at 7.00.54 PM.png
  • Also, I worked on everything zoomed out. As a result, put in all the CSS values wrong… derp. Note-to-self, work at 100%!

Lingering questions:

  • I had multiple buttons at one point. I thought it would be nice to create a nav div to house the buttons in. Is it possible to nest DOM elements with sketch.js? 
  • The sheep image that appears on click disappears, unless I set up my own local server? How do I do that?
  • Can p5 be responsive without refreshing the page? I noticed that the sketch canvas bounds were fixed after loading… I assume no 😦

I will be troubleshooting sometime in the future. I transferred everything to github for now, so it is live.

You can see it hosted here:

http://kaaathy.com/  

See the original p5 sketch:
http://alpha.editor.p5js.org/kathymakes/sketches/rkfwhL63Z

Advertisements

leWitt maker (now with 900% more FUNCTION!)

Last week, I made this Sol LeWitt wall-drawing-builder.

Screen Shot 2017-10-02 at 2.14.44 AM.png

It totally does the job, but with very free-spirited, non-compartmentalized code. I have only one function, “randomLines(),” holding the whole thing together. (see above)

Looking at this, it’s not immediately clear what’s going on. Thank god for past Kathy’s comments! And yet still it would be such an undertaking if I wanted to change the way it behaves at all.

This week, we were tasked with rewriting our programs with functions. I’ve worked with functions before so I thought it would be a breeze to simplify my code this way. It wasn’t difficult per se, but definitely I hit a few crossroads in the process.

My objective:
I need something to randomly draw lines, and I need it to do that in a quadrant that I click.

Seems simple enough! But I realized that I had a number of options.

  • I can randomly draw lines, but what kind of lines?
  • Do I need to tell p5 how to make a horizontal line every time I draw?
  • Do I make the lines random when I draw, or make them random before I draw?
  • I can figure out what quadrant, but is it when I click? Or is it all the time?

I did some pseudocode to figure it all out…

functions_process.jpg

I made separate functions for “checking,” and “executing.” For example, checking what quadrant I was in was separate from drawing in that quadrant. This felt cleaner and less error-prone.

I organized the 4 types of lines in their own functions as well. With this flexibility, I can change things so that some lines are drawn randomly and some are not.

There are 9 new custom functions, where there used to be just one.

  • findMouse();
    • checks mouse position against quadrant bounds, returns quadrant #
  • drawLines(x,y);
    • draws a random line pattern using (x,y) to determine location
    • (x,y) are provided by input from “mousePressed()” and “findMouse()”
  • randomNumber();
    • generates a number between 1-5, assigns to global variable “r”
  • randomLines();
    • draws 1 of 4 line types based on variable “r,” determined by randomNumber();
  • horizontal();
    • draws horizontal lines
  • vertical();
    • draws vertical lines
  • diagonal1();
    • draws lines starting from top left
  • diagonal2();
    • draws lines starting from top right

You can check out the improved code here.

banana death

For homework this week, I created game about the urgency of uneaten fruit at home. Eat your bananas before they go bad!

(inspired by a true story)

banana.gif

[play the game]
[open code in p5]

~~~~~~
process

I started off imagining a single banana that would change color over a constant time. After looking at classmate Chris Chao’s sketch, I was inspired to put some more interactivity into it. What could be more urgent than clicking on falling objects?

banana-sketch

Screen Shot 2017-09-19 at 12.13.18 AM

I was able to make one banana fall pretty easily, using a “y” variable and “y++”. I changed the colors using an “if” statement and color variables.

Screen Shot 2017-09-18 at 9.21.01 PM

A few things I tried, and couldn’t figure out:

  1. How can I make mousePressed() interact with multiple individual banana objects? So far, I can only have my mouseX and mouseY interact with a single “x,y,” which happens to be my central banana. What I did instead was make a big click radius so that clicking anywhere in the banana cluster would clear the screen.
  2. How can I make each banana fall at a random rate? Without objects, every new random() speed I created would affect every single banana.
  3. How do I get bananas that “remember” where they are? I would like bananas in random locations, that would still be bound to the screen AND follow the “if” statement color changes. They would not need to be positioned relative to each other.

The struggle was getting multiple bananas to behave in their own individual way. I’ve done a semester’s worth of object oriented programming before, a few years ago. I would have liked to practice making this an object-oriented game, if I had the time to relearn some OOP.

screen-shot-2017-09-18-at-9-45-36-pm.png

For a while, they were glued to the same y axis.

What I ended up doing was drawing a single central banana, which had other bananas offset around it, falling at a constant speed. I used arguments/parameters for this in a separate banana() function.

By the end I felt like my code was pretty messy. I had some logic written in draw(), and then other logic in “banana().” Some of this messiness was because of how variables changed over time, or function-specific arguments… or just encountering a bug when I put it in one versus another. I have looots of “if” statements that feel ripe for error.

Still, writing console.log() at every turned helped me figure out where things were broken, at every turn.

“stop eating lambs”

~~~~~~
one of my favorite computational art projects.

Otoro’s Chinese Characters uses neural nets to warp existing material (language) in ways human brains would never think to. I’m not one to mystify creativity as some sacred, uniquely human act! If all creativity is, is taking existing material, changing it through the filter of our unique experience, then the computer is doing exactly that.

It reminds me of artist Xu Bing, who is well-known for his Book from the Sky—an installation of thousands of fake Chinese characters that look visually Chinese, but have no real meaning.

Screen Shot 2017-09-11 at 12.50.38 AM.png

These new words, on the other hand, have… some kind of semantics? Dream on, computer! You are a poet actively contributing to our culture and lexicon.

on computation, nyan cat

Computers! Why should we all learn to talk to them?

Sure, it could get you a cushy job. But what more is there on a cultural level if we imagine every single person thinking computationally?

The most compelling argument I’ve encountered so far comes from Seymour Papert, the co-inventor of the LOGO programming language and Turtle. He wrote Mindstorms which is a powerful and short book about computational education.

Kids draw geometric shapes by telling an onscreen “turtle” what to do.

Programmatic thinking directly aligns with my excitement towards making education more creative and active. And by active, I mean that a young person has direct dialogue with a very powerful tool. She can access knowledge and create knowledge herself. She can fix problems herself. In very few other parts of life are we encouraged to debug failure.

Another very powerful example of computers as a creative haven is Minecraft. That, in fact, is its own universe unbound by conventional physics. What’s most impressive to me is how Minecraft is not only its own virtual world, but how incredibly generative it is as a group of people. Not only have young people built their own functioning computer, but they have also created communities that are hierarchically flat, and self-regulated. That is pretty amazing.

The TLDR? –> Computers can make some cool, unexpected stuff. It’s even more exciting when computers make entire communities more confident as creative people. 💖

Before I have the skills to push that vision along, let’s just appreciate this Nyan cat for now.

This was my 2nd drawing. My first drawing was this Mona Lisa, which initially created without variables. That slowed everything down, because I would reposition everything ad nauseum.

Variables helped so much with Nyan Cat because I could position parts relative to some base element (the poptart body) rather than (0,0).

The most difficult part of this was the rotation of the tail. It drove me up the wall because I could not intuitively “get” what axis it was turning around.

//tail
fill(160);
rotate(-0.3*PI);
rect(x-425,y+175,30,120,20);

I tried using the “translate();” function to control the rectangle’s x, y position while it was rotating. This worked, but then it subsequently translated every other part of the cat. (If anyone knows how to make multiple rotations without tearing hair out, pls help.)

In this term I hope to make something driven by fun and creativity; ideally, it would be a tool that people could use for drawing, or building something silly. Maybe it interacts with hardware, or becomes a game which relies on creativity. It would be the first step towards my Turtle dream, at least.