Posts

Showing posts from April, 2021

Final Project: Art of the Moment

Image
  My final project is called  Art of the Moment.  It was made using microBit and p5.js. The reason why I gave it this name is because that every moment incorporates the elements of movements, sound, light, and other elements, making it special and unique. Therefore, I thought about documenting the moment as a graphic pattern using microBit and p5.js. Last week, I documented how I made the prototype of the final project. I explained the concept of generative art, which gave everyone chances to be a part of the artwork through interactions with the project.  This week I worked on realizing more complicated patterns. To realize it, I used the sound sensor, the light sensor, and the rotating sensor to input the value of the light, sound, and movement in a specific context. In this way, the pattern will be changed in different ways.  Made an intro page  Before starting play around, the audiences will see the name of this project and a brief introduction about it. In this part, I used HTML a

Final Project Prototype: Generative Art

Image
  For my final project, what I think about is to make a piece of interactive artwork. Users can create unique patterns through interacting with the artwork. When I googled "interactive art p5.js" for inspirations, I saw a concept that is mentioned many times -- generative art. The pictures above are examples of generative art by Katharina Brunner. According to Wikipedia, Generative art  refers to  art   that in whole or in part has been created with the use of an autonomous system. An autonomous system in this context is generally one that is non-human and can independently determine features of an artwork that would otherwise require decisions made directly by the artist.  Therefore, I would like to say what I want to explore in my final project is generative art. STEP 1 Connect microBit to p5.js In the beginning, I revisited last week's resources to connect microBit to p5.js. At the trial stage, I used three input values from the sensors and button: roll, pitch, and but

Create Button Press and Key Press Events in p5.js

Image
Creating button-press and key-press events can add more interactive fun to the program. The picture above shows the "Hello" text I wrote using my program. In this program, users can change colors, clear canvas, change stroke weights, and change background colors by pressing buttons and keys.  https://editor.p5js.org/hh2871/sketches/-sXGieDYf In the setup function, I set up the background color, the size of the canvas, stroke weight, and filling color first. Besides, I also preset the positions, texts, and event triggers of the four buttons. After this, I defined the functions of each button and the functions of keypress events. The function of fill() is to change colors. The function of strokeWeight() is to change the stroke weight. The function of background() is to change the background color.