Month: February 2023

Assignment 3 – Empty Connections

The Concept

This artwork is meant to symbolize the empty connections in our lives. The colors all represent the uniqueness of these connections, but the nodes of the connection itself are empty.  If you keep clicking, the connections become more and more erratic, as they collide with each other and  increase in speed. Eventually, they all disappear. But, if you keep clicking long enough, the screen refreshes and shows a new array of particles

The Sketch

Link to the sketch: https://editor.p5js.org/mhh410/full/wTNviGHab

The nodes in the network are objects of the Particle class, with the following attributes. The connection between them is formed when the distance between the X and Y coordinates is less than 100. After that, the color of the line is determined through the Lerpcolor function, which gets the color associated with each particle, and draws the line that is a combination of the two colors.

The particles can also collide with each other, and this changes the direction they move in. If the initial randomized speed assigned to a particle is too low, and it is too far from other particles, then it may be stationary. The collide function will essentially switch the velocity of the two particles colliding.

There is a mousePressed function, that is responsible for doubling the speed for each particle whenever the mouse is pressed. There is also a mousePressCount variable. As the particles eventually escape the canvas, there needs to be a reset. The reset occurs after 20 presses, which I estimate that is sufficient for all the particles to disappear.


After 20 mouse presses, the canvas resets : all the particles from the particle array are popped, 40 new particles are formed, and the background is reset.

 

Improvements

I would like to use this as a template to be able to create images of some form, but currently I have no idea how to do that. Perhaps some way to transpose the outline of an image and represent the image as nodes from this piece to form complex artistic designs.

Assignment 2: WEBGL 3D Art

Concept:

Initially, my concept for the assignment was fairly simple, I wanted to create a mandala by drawing ellipses and lines using the sin and cos function. However, when I got into the process of learning how to use the sin and cos function, I found number of tutorials where these functions were being used to draw 3d shapes. I started with the basic drawings in the webGL renderer and then moved on to making 3d spheres using sin and cos function combined with the beginShape and endShape functions. Once I was able to make a sphere, I tried rotating the accidentally discovered that by keeping the rotation at a certain degree I was able to draw a mandala on the canvas. Hence, I kept the code and added some interactivity to my sketch.

Code and Interactivity:

The code draws two spheres in 3D  using WebGL. In the setup() function , iI changed the canvas with a WEBGL renderer and sets the frame rate to 10.

User can control the camera angle of viewing this shape by simultaneously pressing mouse and moving around in the canvas which is controlled using the orbitControl function. Then I run a loop that generates a random stroke color for each iteration. I rotated the canvas along the X, Y, and Z axes by 90 degrees to achieve the mandala.

Furthermore, I run nested for loops that generates the spheres using the sphere_draw function. This function calculates the position of a vertex on the sphere using spherical coordinates, and adds the vertex to the shape. The spheres are drawn by connecting these vertices. The radius of the second sphere depends on the mouse X position, to create an interactive effect.

This code creates an interactive 3D visualization of two spheres, with the user able to control the camera and view the spheres from different angles and of different radius. Here’s the final sketch:

Future Improvements:

For the sake of more visualisation and Interactivity, I hope to add user controls on the side for adding more spheres, changing color of each sphere and resizing. Moreover, I discovered that I could create mandala using two spheres accidentally which is why I want to work with other 3d shapes to end up in similar accidents.

 

HW2 – Yerkebulan Imanbayev

Concept:

With this art piece, I tried to explore the idea of excitement. The color palette chosen for the piece was meant to represent a “dormant” state. The excitement is then catalyzed by the clicking of a mouse, which makes the colors brighter and makes the square turn in a different direction.

Coding process:

While thinking of the idea of excitement and how I could visually represent that, I know I wanted to use the concept of rotation and the change of direction to represent some sort of change. The colored lines, which were coded using the “for()” loop were meant to remain static. However, due to a “happy accident”, I put the “strokeWeight” in my “if” loop that was supposed to change the direction of rotation of the square when the mouse was clicked. When I did that, the strokes for the lines became thicker too, creating the visual sensation of lighting up. Accidentally, the result of my mistake perfectly tied back to the idea that I wanted to convey.

The piece of code I’m particularly proud of is
if (mouseX < 235 && mouseX > 165 && mouseY < 235 && mouseY > 165 && mouseIsPressed) {
stroke(166, 245, 237);
strokeWeight(4); //increasing the thickness of the borders of the square and the lights when the mouse is clicked
angle = angle – 1;
rotate(angle);
rect(0,0,70,70);
}
//rotating the square in the anti-clockwise direction when the mouse is clicked

Not only was I able to solve the issue I was facing with my previous assignments where I make the mouse click within certain bounds trigger something, but I was also able to code it in a way that allowed me to change the direction of rotation of the square. On top of that, this was the piece of code that let me somewhat visually represent the concept of excitement.

The code:

 

Week2: The alternating Wave

    Creating this art piece was a very fun and instructive process. I intended to create a simple and aesthetic piece that is also interactive and fun for the audience. I have used code that allowed me to create a sinus function in order to display an animated wave across the screen. The piece also displays two large circles with changing dimensions that move and morph depending on the coordinates of the mouse.

Both shapes; the circles and the sin wave, move accordingly as the frequency of the wave depends on the radius of the circles and change according to the y-coordinate of the mouse. I have used the code snippets below in order to create the morphing effects of the circles:

let x = mouseX;
let y = mouseY;
let ix = width – mouseX; // Inverse X
let iy = height – mouseY; // Inverse Y
fill(250, 150);
ellipse(x, height/2, y, y);
fill(0, 159);
ellipse(ix, height/2, iy, iy);

Using the variables ix and iy has been useful in creating the inverse and alternating visual effect in the piece, as many of the dimensions used depend on each other. This was a very helpful trick, since it allowed me to link the dimensions of different shapes and, thus making the piece more symmetric, cohesive and aesthetic.

One of the biggest challenges I faced while creating the piece was probably designing the sin wave as I was thinking of having multiple small ones on the screen. But the best decisions turned out to have only one big shifting wave as that takes the centre of the piece.

Assignment 2: Art

Inspiration:

I was inspired to create a collection of 3D cubes after scrolling through a computer art magazine provided to us for ideas. I was struck by the intricate 3D cubes in the magazine. Shown below:

I decided to take on the challenge of creating my own version of the cubes but in 2D form. Although my version is less complex than the original, I added more colors to make it unique. I had a lot of fun working on this project, and I even made it more interactive by allowing the cubes to move with the mouse. I know there is still room for improvement, such as making the cubes change colors when clicked with the mouse, which I look forward to exploring in the future.

Coding Process:

To start, I utilized nested for loops to produce ellipses on the canvas, resulting in a textured appearance. I continued to utilize nested for loops for the nest-like front of the cubes, but found it challenging to apply the technique for creating shapes other than squares and rectangles on the remaining sides of the cube. As a result, I switched to using the quad() function in p5.js to create straightforward, color-filled quadrilaterals for the sides and tops of the cubes. I also made sure that changing the width /height of the canvas does not impact the cubes and used separate variables to determine the cube length to adjust in case the canvas become too big or too large for the cube size. 

For interactivity, I wanted the cubes to move with the cursor and accomplished this by utilizing the mouseX and mouseY variables to determine their positions. Initially, I thought about writing code for each cube with separate positions using the mouseX and mouseY variables. However, after creating the first two cubes, I realized that I could use the translate() function to duplicate the cube in different positions, which was much more efficient than plotting all the coordinates repeatedly for each cube.

Final Output:

Closing remarks:

I had so much fun working on this project and I’m proud of the artistic piece I created. Not only did it sharpen my skills in p5.js, but it solidified my belief that coding can be fun and not just a snooze fest lol. Looking forward to future projects and learning more about Interactive Media!

Assignment 2 – Creative Piece

Concept

Initially, I thought of making something with lines and creating some sort of an illusion. Then I remembered something I saw in Brooklyn’s Botanic Garden during my study away. It was a series of lights in lines converging into one single point. It looked amazing in the dark and I was really inspired by its pattern, so I thought of recreating it.

I feel like the pattern came out exactly as I wanted it to be, maybe even better because it changes color based on the position of the mouse. Once I was done with the lines, I made triangles to give a 3D effect so it seems like the pattern is inside a cube.

Implementation

I had to think quite a lot about where to place the lines and where to converge them to give the illusion effect. Especially since we had to implement the pattern using for loops, I had to think about where I had to place the “i” to change the position of the lines in the way I wanted.

The two main sections of my code are where I implemented the for loops for the changing-color lines and for the top and bottom triangle patterns.

The first one for the changing-color lines is below:

// creating a for loop for the changing line patterns on the left and right
// loops till the width in steps of 5, the steps define the spacing between the lines
for (let i = 0; i < width; i = i + 5) {
  
  // changing color patterns, increase mouseX for more red and increase mouseY for more green
  stroke(mouseX - random(255), mouseY - random(255), random(255));
  
  // dividing pattern into two halves (left side and right side) and making separate lines for each
  
  // left half
  line(0, i, mouseX, mouseY);
  
  // right half
  line(width, height - i, mouseX, mouseY);
}

I played around with the color-changing part until I was satisfied with the color combinations I achieved. The lines were made in two parts, the left half and the right half. This gave a triangle effect (two triangles on the left and right changing colors) without actually creating triangles. The starting points for the lines were changed using the for loop and the ending points were always the mouse position.

The second one for the top and bottom triangle patterns was done using the following for loop:

// making a for loop for white triangle patterns on top and bottom
for (let i = 0; i < width / 2; i = i + 10) {
  noFill()
  stroke(100)
  
  // one point on the top left half of the canvas, one point on the mouse position, and another one
  // on the top right half of the canvas
  triangle(i, 0, mouseX, mouseY, width - i, 0)
  
  // repeating procedure for triangles on the bottom half
  triangle(i, height, mouseX, mouseY, width - i, height)
}

I achieved this pattern by dividing the width into two halves (left and right sections) and then looping to make triangles from left to right. The converse was done from the right-to-left half as well. This gave me the white triangles that move based on the mouse position.
 

Reflection

I feel like I achieved exactly what I was going for in this assignment and the pattern turned out to look quite visually pleasing. I had the chance of showing it to my friends as well and getting their feedback and I subsequently added the triangle patterns on the top and bottom right after. Next time, I would like to use the mouseClicked() and keyPressed() functions to add even more user interactions.

 

Creative Art

Concept:

For this assignment, I started by exploring different types of computer graphics art that are possible to create, and I was fascinated by how much we could create and design by coding. From the book “Computer Graphics and Art,” I found the following pieces interesting and went on exploring different methods along this line.

 

 

 

Code and thought process:

To recreate this, I explored many functions which include, the noice(), translation(), and rotate() functions. Well, it took me a time to understand how to use the noice function worked in 1d, 2d, and 3d, and how to add proper resolution scale to smoothen it, but I believe it is one of the best functions that could be used. Following are some of the arts that I created.

 

 

 

 

After exploring different methods I could use I wanted to create something interactive but at the same time aesthethic so finally I created the following. I am part of that code that allows the mouse interaction.

Reflection& Ideas for improvements :

I would exploring and learning so much in this assignment, although one of the main obstruction for me in completing the assignmnet was that I lost my code when I completed most of it and thus had to start over. But over all was an amazing process. I could definitely could improve this by adding 3D rendering or to give an aesthethic look, by adding more shapes and a gradient background.

Assignment 2

Concept

For this assignment I wanted to include a couple of new elements such as adding sound and user interactivity, all of which I could not incorporate into the previous assignment.

I was interested in the artwork of an anonymous artist called “Banksy” who was known for his street art. He shredded one of his own art pieces in front of an auction house full of people right after it was bought and I have based my artwork on this.  This is his artwork after he had shredded it:

I did not have any particular art concept in mind but I knew I wanted to experiment with iridescent colors and add some sort of shredding effect as he did with his work. So I started off by creating an abstract iridescent element by using moving and color changing shapes. While experimenting with different color effects for the shapes, I came across the blendMode() which alters the colors displayed on the screen by either making them darker or lighter. By passing the argument “BURN” through this function, I was able to achieve this effect of fading/burning of the different colors and shapes into all black as the function increases contrast and makes the darker colors more prominent. I also added the sound of a paper shredder to add that effect of burning/fading, similar to what Banksy did.

 

Reflection

I think I learnt a lot of new features of p5.js through this assignment as I experimented with loops and color features as well as sound. I am happy with the fact that I was able to make the sound and burning effect work. For future projects, I would like to make use of “rotate()” and “translate()” because I tried using them in this assignment but I was not able to make it work. 

 

Homework 2: Work of Art

For this assignment, our task was to create a simple artwork using for loops and our knowledge from previous classes.

Initially I filled the canvas with a grid of rectangles and circles in a static manner. To make this pattern, I used a double for loop to draw the shapes over the y-axis and then the x-axis.

Then to increase interactivity, I changed the width of the squares and the circles to change dynamically based on the position of my mouse. To do this. I used the dist function to compute the distance from the position of the mouse. I had to spend a lot of time on how should the function be linked to the shapes. I realized the solution was actually much simpler that what I was trying to do initially.

My solution in the start was only plain white shapes so the most challenging part of the pattern was adding color. I had to do a lot of research and trial and error to understand how could I change the color of where I am hovering on the canvas. For this purpose, I eventually reached at the solution of using a map function within the fill function to change the color of where I am hovering only.

I further wanted the canvas to change color continuously on its own as well alongside the hover, for which I added the hue variable after setting the colorMode from RGB to HSB. Integrating this feature, was a challenge to achieve because I was not working with the ‘mod %’ function in the start so kept running into errors.

Below is the canvas for my artwork:

Reflections:

The assignment was an exciting one to work with. I really wanted to work with interactivity and in particular the draw function after my assignment 1. I got to work very creatively to create this piece using different functions within the draw function which allowed me to add dynamically changing shapes and colors. As I had never before used some of these functions, most of my time was spent on understanding their use correctly and debugging them. In the future, I think it would be interesting to try changing the number of shapes on the screen dynamically as well.

Week-2_Aibar

 

In this assignment we had to use our previous knowledge gained in class along with for() and while() loops to create a simple work of art. I decided to go with the for() loop and create some type of symmetrical work of art with some additional features as ability to change the background color by clicking the mouse and moving animation. This artwork is composed of a grid of black dots connected by white lines, which move with an oscillating animation and are framed by a changing background color.

Concept

This artwork explores the concept of symmetry and movement. The grid of black dots represents order and stability, while the moving white lines create an element of motion and energy. The constantly changing background color further emphasizes the sense of dynamism and highlights the symmetry of the artwork.

My initial in-class work was static and did not contain any kind of additional features as background change and movement of lines.

Draft 1

Highlight of some code

To create the basis if the artwork I first used for loop to create some symmetrical grid using small rectangles. The below code depicts the code:

for (x = m; x <= width - m; x += m) {
    for (y = m; y <= height - m; y += m) {
      noStroke();
      rect(x - 1, y - 1, 3, 3);
      stroke(255, 100);

After creating the basis, I started to draw the lines connecting the rectangles from different coordinates. The lines move in a circular, oscillating pattern around the grid of black dots, creating an interesting visual effect. A highlight of some code that I am particularly proud of is this circular movement of lines in oscillating pattern utilizing  sin(frameCount / 20) * 20 and  cos(frameCount / 20) * 20.

// Symmetrical lines with animation
   line(x, y, width / 2 + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);
   line(x, y, width / 2 + sin(frameCount / 20) * 20, 0 + cos(frameCount / 20) * 20);
   line(x, y, 0 + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);
   line(x, y, width / 2 + sin(frameCount / 20) * 20, height + cos(frameCount / 20) * 20);
   line(x, y, width + sin(frameCount / 20) * 20, height / 2 + cos(frameCount / 20) * 20);

Reflection

After some reflection on my project I identified couple of ideas for future improvement. Future improvements to this artwork could involve adding more elements to the grid of black dots, such as circles and other shapes, as well as introducing more colors to the background and adjusting the speed and intensity of the lines‘ animation. Additionally, it could be interesting to experiment with different musical styles and incorporate sound into the artwork to further emphasize the sense of motion.