Variables and movement

  • Create a sketch that includes (all of these):
    • One element controlled by the mouse.
    • One element that changes over time, independently of the mouse.
    • One element that is different every time you run the sketch.
    • e.g. Try refactoring your Week 1 HW by removing all the hard-coded numbers except for createCanvas(). Have some of the elements follow the mouse. Have some move independently. Have some move at random.
    • e.g. Do the above but change color, alpha, and/or strokeWeight instead of position.
    • Or do something completely different!

In class, I wrote a piece of code that randomly moves a circle around the screen, gradually changing its size and color over time.

Captura de Tela 2018-09-15 às 21.47.25

I really liked that the background and the circle were white, so the circle would slowly differentiate itself from the background, but I had to make something that would change every time the sketch was run, so I tried randomizing the starter color.

It was too subtle to make that much of a difference when it started to fill the canvas, and I missed the discovering of the circle when it started, so I decided to have the background matching the circle when the sketch is run.

For the element controlled by the mouse, first I added a line that would also variate in color, but it didn’t always add nicely to the composition.

To fix that, I added a mousePressed() function (top prints), to discover that it would only work when clicked, so the effect was very different from having a line follow the mouse. I look it up in the reference, and changed it into mouseDragged() to see how it would look like (bottom prints).

It didn’t change significantly from having the line following the mouse all the time, but I realized it didn’t draw anything if I just clicked, so I duplicated the functions to have both mouseDragged() and mousePressed(), changing the color so that dragging made it darker, and clicking made it brighter. That means that every time you start dragging, the first line has a very different color, but it was mostly not an issue.

It’s not perfect, but I got a few good images, and I certainly had a lot of fun playing with it. I am now working on having the circle always 100% on the screen, and organizing the code. Check out the latest version in full screen here, and the code here.

EDIT: I played around with the shapes a bit, and decided to stay with a square instead of the lines, so the code will show you something a bit different than where the last images came from.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do

Você está comentando utilizando sua conta Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s