Duban Morales
Week 
Date 04/28/2025

Duban Morales
Week 06
Date 03/03/2025

Duban Morales
Week 05
Date 02/24/2025

Duban Morales
Week 04
Date 02/18/2025

Decode 4 - Given code

Image created

Decode 3 - GIVEN code 

Image created

https://github.com/ellennickles/code-your-way-s25/blob/main/week4/decode3.js

The illusion of spacing and the size of the circles initially suggested that they were being drawn in WEBGL as a sort of point cloud. Upon reviewing the code, it became clear that the variables altered by the noise function was creating this illusion. 

Decode 2 - GIVEN Code 

Image created

Encode 1 - GIVEN image 

Attempt to recreate image

https://editor.p5js.org/Duban_Morales/sketches/2rI3EXaGm

A grid was created using x, y coordinates with for loops, and filled with squares. The minSize dimension was adjusted through iteration with different numbers until it appeared accurate. Rotation parameters were then set based on the Y value, increasing slightly as they moved further from the origin. However, a critical step was missed. The design did not appear correct because the x, y origin for each individual square was not translated properly.

Duban Morales
Week 03
Date 02/10/2025

Inspiration was drawn from the practice problem in part 1, with random variables incorporated into the step of the for loop for the x value, by dividing the cellSize by a number randomly chosen between 10 and 20. Following the for loop, a random function was implemented to shift the y values by numbers ranging from -20 to 20. The colors generated are also randomized, including the alpha value to introduce some transparency. Additionally, the parameter in the square that determines the roundness or sharpness of each edge is randomly generated, with values varying from 0 to 50.

https://editor.p5js.org/Duban_Morales/sketches/cFMtMQnnQ

The enhancement of the script by AI led to unexpected changes in part 2, where numerous shapes were drawn off the screen due to the incorporation of random variables. Initially, it was hoped that the shapes would not compute off the canvas. Instead, the AI limited the color palette to only four and reduced the size of the shapes, resulting in a denser pattern. Moreover, it introduced a boundary which was not part of the original design intention. Despite these changes not aligning with the original prompt, the new pattern was appealing enough to continue development on this path rather than revisiting the initial request. Although the pattern is entirely flat, it still manages to convey a sense of vertical movement, masking the randomness of the overlapping shapes.

https://editor.p5js.org/Duban_Morales/sketches/T-WS-lEQJ  

Part 1: Practice

Decode 2 - Given Code

Image generated by code

Decode 1 - Given Code 

Image generated by code 

Encode 2 - GIVEN - Image 
https://editor.p5js.org/enickles/full/sTAx_W5n_

Actual code used 

Understanding the code -  I did not attempt to redraw this image I went straight to the code to have a better understanding of what was going on

Encode 1 - GIVEN - Image
https://editor.p5js.org/enickles/full/iu3hqCt1e

Initial thoughts: A for loop is used to create the grid, with a random fill color option choosing between white and black. I did not expect the "cellSize" variable to control both the step in the for loop and the size of each square. I also did not anticipate a random chance variable generating a number between 0 and 1 to determine whether the square would be filled white or black, based on the random number. Nor did I expect the square shape to handle all the drawing. I used a rectangle to draw the grid and employed two different variables for the row and column sizes. Additionally, I opted for a fill option directly from a random generator rather than processing it through two cycles of randomness.

Attempt to recreate the image
https://editor.p5js.org/Duban_Morales/sketches/OYfdDMikY

Actual code used for the image

Reviewing Loops - Image generated after completing steps 1 and 2 . 

Duban Morales
Week 02
Date 02/03/2025

https://editor.p5js.org/Duban_Morales/sketches/Fmyv5LFCV  Inspired from https://github.com/ellennickles/code-your-way-s25/blob/main/week2/decode5.js

Duban Morales
Week 01
Date 01/27/2025

Creating a loading icon
I thought it would be interesting to continue a theme from my visual language class last semester, where we were assigned to design a logo to brand ourselves. It is in the shape of a heart and an abstract 'D,' representing the first letter of my name. Inside the heart, on the left side, I have three words that describe my passion for what I am working on, assuming the logo is attached.

Initially starting with p5.js, I quickly went onto YouTube and found a Coding Train video where they briefly go over how to draw a heart. I used this as a starting point. Daniel Shiffman also shares a webpage that provides the formula for different heart shapes (https://mathworld.wolfram.com/HeartCurve.html). The outline of the heart isn't exactly what I wanted, but it is close enough to the logo I designed for myself.

https://editor.p5js.org/Duban_Morales/sketches/dk0zcKSS8

p5js sketch- triangle square circle
Set the background to black on the canvas.
Place a circle on the canvas with its center at two-thirds of the canvas width (width * 2/3) and two-thirds of the canvas height (height * 2/3), and with a radius of R.
For the triangle, set the first point (x1, y1) at the center of the circle. The next point has the same y-value as y1, and x2 is calculated as 2 times the radius of the circle to the left of the circle, closer to zero on the x-axis.
To find the third point of the triangle, calculate the midpoint between x1 and x2 on the x-axis and use the total distance between x1 and x2 for the y-value.
Fill both the circle and the triangle with white.
Define an imaginary bounding box around the triangle and circle, and use the center of this bounding box to draw a rotating square. Each side of the square should equal the distance from x1 to x2 of the triangle.
Include 'push()' and 'pop()' commands to ensure that only the square rotates.
Use a blend mode for the rotating square. When it intersects with the circle and triangle, fill in black; leave it white where the three shapes intersect.

bouncing ball
Set the background to black.
Create a full-size canvas that covers the entire display.
Place a circle in the center of the canvas with a diameter equal to one-third of the canvas height.
Use a medium-sized stroke weight and no fill for the circle.
Make the circle move from the left to the right across the canvas, without ever touching the edges.
Ensure the circle only occupies three-quarters of the total canvas width, measured from the center.

breathing ball
Set the background to black.
Draw two circles without strokes: a larger circle (A) filled white and a smaller circle (B) placed on top, filled black.
Position both circles at the center of the canvas.
The circles exhibit a breathing-like rhythm: as the larger, white circle grows in size, the smaller, black circle shrinks, and vice versa.
The maximum size of the black circle never completely covers the white circle.
The maximum size of the white circle is three-quarters of the canvas height.
The smallest size of the black circle is midway between half and three-quarters of the canvas height.
When the circles are closest to each other—the black circle at its largest and the white circle at its smallest—they remain 5 pixels apart.

https://editor.p5js.org/Duban_Morales/sketches/CYmkIs4-r

looping circles
Set the background to black.
Draw a white-stroked circle with a diameter equal to one-fifth of the total height of the canvas.
Position this circle to revolve around a central point located in the middle of the canvas.
Surround this center with an "invisible" barrier shaped like a circle, whose diameter spans one-third of the canvas height.
As the white-stroked circle revolves, it leaves behind a subtle trail, creating the illusion of a pipe or tunnel. This trail is composed of approximately 50 circles.
Each circle in the trail has a stroke that is slightly darker than its neighbor, forming a gradient from white to black.
All circles in the trail are connected and move synchronously around the same center point.
The resulting visual effect is an "exterior" shell of the pipe/tunnel, with the structure appearing continuous and interconnected, yet never fully transparent.
The trail of circles remains confined between the interior of the invisible barrier and its outer edge, with all circles being the same size but offset slightly from one another to create the illusion of a continuous pipe.

loading
Set the canvas to black.
Draw a small circle that orbits around a center point, which is located in the middle of the canvas. The center point has a width and height of approximately 15 pixels.
The orbiting circle moves at a constant speed, completing a full orbit with 10 circles.
As it orbits, the small circle leaves behind a visible trail of 5 circles at any given time, creating a gradient effect from white to black.
Each successive circle in the trail is drawn over one-third of the previous circle, ensuring they overlap one another.

https://editor.p5js.org/Duban_Morales/sketches/aoO3XEHgj