YoungLee- Wallpaper

Code

Process:
I separated the project into 4 parts: creating the nested for loop, setting up the randomized fonts, setting up the randomized colors, and randomizing its properties. My final product wasn’t what I first had in mind. I actually wanted to create a random gradient regarding the size of each letter. I tried to replicate the random gradient in the example but just couldn’t seem to get it right. Although I didn’t succeed in creating the product that I wanted, I learned how to randomize things, such as fonts, color, etc., in a nest for Loop. In the future, I want to completely understand how to do a random gradient for the rotation of my text and the size of my text.

Inspiration/Color palette:

I also found this video helpful:
https://youtu.be/7GwhYcUqypk

bookooBread – Wallpaper

Final version (high res didn’t upload for first one):

I like this darker color palette better, for some reason when it exported the colors changed and I love it

Version 2: Experimenting with color variation and circle packing (left has ellipse grid, right does not)

Version 1: Primary colors and size gradient

This design actually was inspired by what I made for the repeated motif exercise. I coded these radial lines on the circles and thought it looked super cool. I took that basic premise and turned it into something completely different. After all of the circles were created, I wanted another layer to add depth to the pattern. With another double for-loop, I created randomly sized ellipses to cover the entire image… I really liked how it looked together.

I did not actually start from a sketch with this wallpaper, though I did plan a bit after I had my idea. After that, there was a lot of experimenting and pleasant surprises. Originally I like the idea of the size gradient in the first version, but I personally didn’t love how crowded it felt. So I wanted to try out a circle packing design. With Connie’s help, we wrote the circle packing algorithm and then I merged my code with the new code. I shifted the color randomness around until it became what it is in the last version, and fixed a bug with the radial lines on the circles. I really like how it came out! It kind of reminds me of a Persian rug in my living room at home. If I had more time I would’ve loved to take up Golan’s challenge to make all of the circles irregular. Sadly, I could not do this by today but I will try it in the future!

anna-wallpaper

I wanted to make a wallpaper that utilized strings of mood-relevant text and the blaring colors of RBG defaults to exemplify three extremes of emotional thinking and the chaos they create. I wanted it to be something that looks unmanageable on the surface, but whose essence is really laid out bare in the code re: text sizing and the text itself.

Red: anger

Green: (fleeting, but distinct) happiness

Blue: sadness

You might want to look at the sketch here, as the image isn’t the best.

Here’s a version of my piece as it appeared in a myScaledCanvas version of the file, with a few tweaks to make it suitable for larger sizes–I couldn’t quite get the export function to work, but wanted to provide an image nonetheless.

Find the code here.

Monday – Wallpaper

Wallpaper sketch

I based the palette of this wallpaper off of an image I took of some leaves at a park and wanted to create random blossoming shapes to form a more organic look. I ultimately used 1D perlin noise to create variation in the lengths of the “petals” of the shapes and layered them in multiple colors to create more contrast. Lastly, I arranged them in staggered paths and left room for negative space to balance everything out.

Original image:

Process Photos:

rathesungod – Wallpaper

This is my first landscape or (cityscape) wallpaper. So after my generative wallpaper wasn’t exactly hitting the spot, I went back to my original plan before the assignment was altered. I wanted to create a warm toned cityscape that specifically reminds me of summer 2019 of different time stamps.

Here’s a quick sketch that I did before I started:

Generative Wallpaper (kinda fail)

This was my first generative wallpaper that I had made. My goals were to achieve lots of color with different elements and shapes that connected with each other. I created four versions with the following colors:

After finishing this wallpaper, I found myself stuck with the design and didn’t really like the final product. I also made a lot of altering versions of this wallpaper but none of them stuck out to me. But I was satisfied with the colors and how I learned new techniques with making pattern.

minniebzrg-03-Wallpaper

Minnie’s Wallpaper

Code

highRes code

This is a geometric wallpaper. To be honest, I was getting quite frustrated and confused when making a different wallpaper before. After starting over 5 times, I decided to do something simple that would help me understand how coding works. This wallpaper is not the greatest. It’s not the most exciting or rememberable. However, I had to look at the assignment from a simpler perspective.

Process:

First I created two simple shapes, rect() and circle(). I wrote down exactly what functions would be needed so I could work with written code instead of imagination. Then I created a for()loop. I used variables i and j for the x and y coordinates. I added a wider additive (i+60) than the width of the original square (width was 50) so that there would be limited overlapping. From here I could make any necessary changes with the random function for the width and height of the rect and circle. The next step was color. This took the longest time because I had different values for each group of shapes. I used a color picker to choose specifically which range of colors I wanted. Then when I wanted a more random placement of the second set of circles, I tinkered with the code and used random() again.

From the suggestions, I was able to implement a few.

Rhythm
Scale: I used variable and the random tool to produce shapes at different sizes.
Background, middleground, foreground: I would say the three shapes play around with this concept of layering.
Infrequent features: toward the end of the code, I decided I wanted to move some shapes around to a random location. Now that I had a better understanding of how variables work, I tweaked the x coordinate of the second set of circles so that it was still in relation to the variable I. I was surprisingly glad to see that it worked.
Color: I played around with variables to define a color range. It hurt my brain a little to try to understand it, but I think the commenting in the code helped me. I was going for a muted color palette and it seems to have worked somewhat well.
Randomness: the randomness is specifically in the sizing, color, and placement.

Sketch:

This is a sketch based off an idea I had. I wanted the square and circle to have the same origin/center point so I drew what I knew had to occur first. This helped me understand what the code might produce. I knew that the distance between each center point had to be a fixed number. This would become a variable I use in the code. An important function I use is rectMode(CENTER), which we learned and it was very useful. I had to learn what noLoop() meant so that it wouldn’t keep looping each time I pressed start.

bumble_b – Wallpaper

Note: The high-res code seems to sort of glitch with my tape names because they won’t randomize if you just click on the image instead of pressing play again. So, I’ve now noticed that the tape names are exactly the same in these two images, but they DO randomize! 🙂

My final pattern:

Code

Initial Sketches:

My idea was to do cards and tapes (two of my favorite things in the world), with a randomly colored square background and some random chances of variations happening.

In the end, I wound up with the square background I planned, but I made one large square for dynamics and a top and bottom border of smaller squares (with the “no TV signal” color palette). The colors randomly generate from palettes and the large square has different potential positions.

My tapes also are all randomly named with random tape sizes/positions! This worked out really well and almost exactly how I visualized it except that I couldn’t find out how to do multiple lines of text (line breaks), so I ended up only getting to choose movies with short titles.

I also used an if/else statement for the small chance of an orange Rugrats tape showing up!

For my cards, I sort of ran into trouble because placing all the different small shapes to make different card numbers was getting really time consuming, so I had to change up my concept a lot. Instead of one deck of cards with random cards showing up, I ended up with 4 different sets of cards with all ace of heart cards. To make it look a little more intentional, I made the randomly chanced card backs 4 different colors, so it will always look like 4 different sets (making the 4 ace of heart cards make more sense)!

I really like my pattern and would LOVE this wallpaper with all my favorite movie titles in my future basement. I really love clutter and having a lot of things going on, so this really fits my style. I do think my design isn’t all that interesting in its variations, though. It’s all very predictable in the element positions, really only changing colors and text. I think if I were to start over, I would focus on a more abstract design with lots of wild variations, sort of like how my background on its own looked:

shrugbread-Wallpaper

My Code: https://editor.p5js.org/shrugbread/sketches/XnztQHwKK

The code that I used to make this wallpaper was modified from Okazz_ on OpenProcessing. Below is an image of the original work.

Okazz_ sketch: https://www.openprocessing.org/sketch/825210

The code that governs the lines and dots of the wallpaper is very simple but requires that the programmer know how noise functions work, as well as how to creatively apply what the noise function will give you.

Above is the code that controls my lines. By fiddling with the numbers I figured out that the parameters within noise() are dictating the intensity, shape, and detail and of the Perlin noise. Said noise function is then multiplied and blown up now that it has been properly defined and detailed for it to be visually variable. Noise () is then multiplied by the int() command forcing whatever value that the noise function produces to round to the nearest integer. The lines that start with x+= and y+= then use the result of the angle variable to determine the direction that the line will continue going. The specifics of the math still escape me after multiple explanations but after a few hours of playing with the numbers, I was able to get the lines to travel in parallel squares or bunch up at their original gridpoints, as well as many other fun tricks.
The noiseLine function was not the only change I made to the original Okazz_ sketch. Instead of multicolored squares as my gridpoints, I used arcs with randomized starting angles. I also edited the color range used, and have a commented-out grayscale array for the pallette. I spent very long trying to make this as interesting-looking as possible and ended up with some even crazier results, but I found this variation to be the most appealing.

peatmoss-Wallpaper

EDITED 2/22/2o (so close):

With Golan’s help I made a far prettier version utilizing a handful of for loops!

Code: https://editor.p5js.org/noonmarkart/sketches/VjdZmNBJq

Code: https://editor.p5js.org/noonmarkart/sketches/ITlYulo05

Landscape Wallpaper Exports:

My process was essentially hours full of low-grade panic, and hrm’ing about trying to make the for loop at the bottom look anything like trees. Once I got there to be SHAPES! (hallelujah), I worked on getting the HSB palette of the piece to be something pretty and pleasing, since I know the shapes are…odd. With the help of Connie I worked on randomizing the hue and brightness of the for loop trees at the bottom, and I set the ‘sun’, ‘moon’, or ever watching Sky Orb (its up to interpretation), to be a random position each time. In the future I’d like to figure out with more confidence how to do a function to make the trees so it can be more thoroughly randomized, and have more varying parts!

My initial thought for this project was to have there be an additive multiply blendMode on the piece, making it so that as the cloud1 and cloud2 variable circles blotted out over the background, they’d make things go darker like dusk was falling. This was not a good idea in the end, but I did record how it looked: First Attempt Landscape

(The download is nothing nefarious, just the video that I can’t seem to embed. Odd!)

Concept Sketch: