Tag Archives: scrolling wallpaper

Perfect Weather

beggining scrollpaper

Final Realized Collage

Like many of my classmates I thrust myself into the great unknown when creating my wallpaper. My process didn’t begin with any fancy sketches or a long overdrawn brainstorm, instead I went straight to the internet and began perusing wallpapers and patterns created by other digital artists. Some of the patterns and wallpapers that really spoke to me include:


After collecting a sizable folder on my desktop of patterns and wallpapers, my own wallpaper began to coalesce. I was intrigued by the intersection of natural and obtuse shapes in a repeating sequence to create a wallpaper, and when creating my own wallpaper I wanted to incorporate the idea of nature vs. a pristine, human-generated pattern. Thinking about these things, I moved to create my own wallpaper.

Beginning with a repeating pattern: zig-zag lines

Beginning with a repeating pattern: zig-zag lines

Perhaps the most challenging part of my code (save animation) was creating the pattern that would serve as my background: a horizontally repeating zig-zag line. Even using a loop to repeatedly generate the lines, I found I was having trouble with the positioning of the vertex-drawn shape I created. While I considered scrapping the lines altogether at one point because of time, I was possessed with having the zig-zag lines as my background and finding a solution to my coding problems. When I finally got the code to work and properly run along the length of my canvas, I felt incredible satisfaction and triumph. One thing this coding assignment has taught me is that every individual coder has his or her own “mountain” to overcome. For some people, loops and animations are incredibly tricky, or for someone well versed in loops, composition and design pose a challenge. Each assignment has given me a new set of tools to put to use, and another challenge which to overcome. After triumphing over the creation of my background pattern, I moved on to creating and flushing out other graphic elements.

Adding clouds and a sun

Adding clouds and a sun

When creating my wallpaper I thought a great deal about nature and perfection, and the ugliness of nature colliding with the structure and perfection of repeating patterns on a wallpaper. While most of the shapes on my wallpaper ended up being geometric, I tried to create some more organic and custom shapes with the coding tools at my hands (vertex drawing and arc to be specific). With arc, I was able to create clouds, and soon I was well on my way to creating a weather pattern. As I was coding, I reflected on how the proximity of shapes with one another created a new shape, or familiar objects we all know. Using arc, ellipse, and rectangle I was able to create a cloud and generate symbolic weather underneath using rectangles. However, if I were just to put all of my shapes in a horizontal line, they would have no meaning to one another. As I’ve spent over half my the first semester coding art, I’m surprised at how art and coding are both about relationships.

beggining scrollpaper

One hang-up with my project is that I was unable to achieve animation. I wanted my rectangular raindrops to oscillate up and down, and the background pattern to loop and move upward, creating tension between the piece. I wasn’t able to achieve animation primarily because of the way I coded my objects’ x and y positions. When trying to return and introduce animation, I found it difficult to do so when I was already using the x and y in my for loops. I would really love to return to this piece and add animation!

On the subject of composition, while I generally like the colors I was able to achieve and the overall aesthetic, there is something very bland and head-on about my wallpaper which I don’t especially like. After looking at my finished wallpaper, I shook my head a bit because the pattern I created reminded me of a blanket. I’ve noticed in much of my artwork a level of “coherence” or comprehension that turns my art “flat”. As I’m just beginning to dive into art, especially art created from code, I would love to develop my sense of composition and creating more organic artwork not so rigid and heavy-handed. Overall I am pleased that I was able to solve some personal problems with my code, but I still think there is much to learn and improve upon!  

Happy Accidents

  This project has been one of my favorites thus far.This project came entirely from experimenting with code I was familiar with. I originally only had one pattern that would infinitely expand. My original intention was to create a perimeter for the pattern, however, after my conference, the project became a pattern that evolved into an infinitely changing pattern.

new wall paper is created and expands

  I really enjoy the almost 3D effect that the some of the patterns have. If you look at the screen for long enough you can start seeing new and more elaborate combinations. I would have liked to be able to include changing colors in each pattern. Each pattern ends after reaching a distance of 400 and a new pattern is generated by the object-angle and continues to expand until eventually being replaced.
      wallpaper 2
wallpaper 3      


For this assignment, I spent most of my time just experimenting. I went in with no real idea of what I was going to do, but I just wanted to explore. I really didn’t sketch much because I jumped right into the code. One of the most intriguing things we’ve worked on in the last few weeks was the pattern of small lines. I was fascinated by them and knew that I wanted to use them as the background for my wallpaper. They create visual interest without distracting from the other elements. Later in the design, I realized that the colors of the lines were being lost on an entirely black background, so I coded a loop that creates a gradient through the multiplication of the coordinates. This change came late in the design, but it let me entirely redesign my color palette into something more interesting.

The next part that I experimented with was the Riley Circles we did in class. The ability to create overlapping patterns made them ideal for the aesthetic I was going for in this piece. I decided to use different colors on the top/bottom and the sides because the shape of the canvas is already irregular. With a canvas shaped this way, I thought it would be advantageous to draw attention to the oddity instead of trying to hide it. I liked the color results of the green/blue generator more than the red/blue generator so I put that one on the area with the larger area. I eventually decided to make them slightly translucent in order to create an effect like a mosaic or a stained glass window.


This border, while pretty, presented somewhat of a problem. In order for it to have clean edges, it would have either required me to let the corners overlap or to find a way to cover it up. This lead an idea about rotating squares. The problem with rotating squares is that the edges don’t travel consistently. So in order to have a consistent edge, I filled those corners with a stationary circle. It created movement of a different kind and, while I still think it looks strange, I enjoy it for that.

In my initial plans, I didn’t have the small lines in the draw section. They were part of the set up, which made it more difficult to put moving objects on top of them. This created the idea for what I have been calling the “runners” and the “track”: the yellow circles moving along the purple shape. Putting the runners on top of the track would have allowed me to have moving objects without leaving a trail behind. Eventually, I decided to just put the lines in the draw section, but I still liked the visual of the track.


The grid was all experimentation. I went in with no plan other than I wanted the center to be a grid. I probably spent more time on the color of the shapes than on coloring any other part of this. When I changed from a black background to a gradient, it allowed me to have more fun and to put a wider variety of color without being afraid that it would get entirely lost. Additionally, one of my favorite effects is a shape whose stroke randomly changes widths. I had originally included this effect on every part of the grid, but it got very busy so I restricted it to the orange circles.

By the end of this wild exploration, I was surprised to find a clearer image than I expected. While spending hours staring at wallpaper, I managed to make a door. I think it started, again, with the shape of the canvas. As soon as I drew a shape that mirrored the canvas, I started thinking about doors. And that influence made its way into the design: the heavy frame, the squares to mimic panelling. Even the circle-square decorations at the corners of the canvas are reminiscent of the metal plates put on the corners of doors. The door theme may have been an accident. But I still think it fits.


Modulated Synthesis

My attitude towards this assignment was radically different from my attitude towards the previous assignment. I was inspired by our classroom experiments in combining both for-loops and the mod function. I was also inspired by Josef Albers’ usage of colors and tiling to make a statement about both shape and color. The for-loop and mod functions lend themselves to accomplishing something similar to Albers’ goals. sample of Albers' work I spent several hours just experimenting with different shapes, colors, and insertions of randomness and determination in my code. At first I had a background with ellipses that moved within columns, remained similar colors, and seemed to shimmer (due to the addition of an overlay of darker ellipses floating through the screen.) This really reminded me of my childhood bedroom, which had a beaded curtain over the doorway and a shimmer curtain by the window. It seemed like I had created a synthesis of the two.
Screen Shot 2017-10-26 at 12.08.07 AM

first experiments

I decided to experiment with the circular motion assignments we were given in class, while still utilizing the color scheme and grid concepts I had established in my first sketch. This way, I was able to get a band of ellipses radiating in a circular way from a central foci. And I was even able to control the color of the ellipses, depending on where in the grid they were falling into.
Screen Shot 2017-10-29 at 6.56.56 PM

adding a JS object that utilizes circular motion

I realized that where the horizontal bands and vertical bands intersected, I got an unpredictably cool pattern, so I decided to have the bands overlap uniformly. While doing this, I realized I could modify the color (again, using mod, hence producing a gradient.) The circular_circles object remained in this iteration of the code, but I realized that it was aesthetically unpleasant to have 2 radically different shapes (ellipses and rects) overlap in an non-meaningful way.
Screen Shot 2017-10-29 at 7.06.40 PM

inserting a tiled background

So, for the moment, I forwent the inclusion of the circular-circles and instead played with the tiling background more. I added another function to my tile constructor, that allowed the gradient itself to change over time. And, through experimentation, I was able to have it so that the manner in which the gradient changed mimicked tiling itself. The picture below demonstrates multiple quadrants of graduated tiling. At this point in the process, I thought my work resembled a bit of Mondrian’s work, because of the juxtaposition of differently-colored ’tiles’. It especially resembled the work of other students’ in the class after they completed the animated Mondrian assignment. Screen Shot 2017-10-31 at 12.18.10 AMAt this point, the fact that the assignment encourages using a JS object that has a parameter passed through it, I decided to abstract even the size of the tiles. Below is an image showing the result of modifying the size of the tiles. At this point, the repetitive element determined by the dark-purple background is completely omitted, which has its own implications. I think this is beautiful and smooth in its own right; but I did appreciate the repetitive nature of the purple color, as it gives the entire wallpaper its own sense of continuity.
changing the size of the tiles

changing the size of the tiles after adding changing colors to the tiles

Since I was not so pleased with this outcome, I decided to re-introduce the circular motion aspect into the tiles I decided I had liked, except instead of using ellipses, I used rectangles (as this would better fit with the current scheme.) This is my final product for now, but I could definitely use revisions. And with better understanding of coding, I could do a lot more.
final product for now

current “final”

Circling Pink

Circling Pink

“Circling Pink”

I began the process of creating my scrolling wallpaper by setting up the initial elements I would utilize for the final product. I was inspired by a 70’s aesthetic of looping circles. As a fan of the French New Wave, I set out to create a wallpaper I might find in a Jean-Luc Godard film.

Initial sketch

Being that the interiors of his films typically include solid colored walls, I wanted to create what I imagined to be a wallpaper one might find in Ana Karina’s kitchen.
Initial Wallpaper

Initial wallpaper

I was drawn to the idea of circular repetition and created a moving wheel to compliment the flow of the existing circular pattern.
Wheel on wallpaper

Wheel on wallpaper

As I added the code of the wheel to my sketch containing the initial pattern, I had the idea to add motion to the background in order to create a more unified visual. I utilized the random tool, creating a tie-dye like pattern.
Randomized wallpaper

Randomized wallpaper

This inspired my later use of the random tool in my placement of shapes. As I felt drawn to the circular aesthetic, I wanted the rest of the shapes to blend into the background, initially appearing to be a part of the circular pattern and at further glance taking their true shape. I struggled with integrating the wrap and bounce function into the overall sketch.   At first I used a simple ellipse, then morphed it into a triangular shape composed of randomized lines. This shape, in addition to the wheel, suggested a ferris wheel visual, which I found distracting from the overall piece.  I then reverted back to the ellipse, utilizing the random tool to create a spherical motion.
Image 5

Ferris wheel

I had a very positive experience creating this wallpaper. Through the prompt, I was encouraged to put to use many different tools I’ve acquired throughout the course thus far. I feel I’ve gained a better understanding of how the various functions work in relation to one another, resulting in a stronger grasp on the basics of coding. I was also able to express my interest in the color pink, experimenting with different shades and combinations to produce my scrolling wallpaper “Circling Pink” .
Circling Pink

“Circling Pink”

Nice to Look At

Okay, so loops have kicked my ass. Well, coding is kicking my ass, but here I am, trying. And not trying hard enough, but trying nonetheless. This project seemed like a fun idea, but when introduced to all the new ways to code things, I was second-guessing.

In trying to understand concepts, I recalled struggling in math when I was in high school. I eventually came to a realization that I was trying to memorize formulas rather than understand why they work. I wish I could give a concrete example of this, but I have blocked all memories of math after my second year in geometry.

Anyway, with the prompt, I immediately thought about my summer job at the Hudson River Museum in Yonkers. Their summer show featured artist, Robert Zakanitch, and pulled from the museum’s archives to produce a collection of pieces with the theme of flowers. Zakanitch is a little obsessed with floral patterns, and more broadly the idea of patterns.

Zakanitch's Soaring Gardens Grow

Zakanitch’s Soaring Gardens Grow

He is a founder of the Pattern and Decoration movement, actually, and he talked about how he was inspired by things like the floral linoleum pattern of his kitchen floor. This has little to do with what I actually produced, but I had in my head that I wanted to do something floral-like. I never for a second thought I could code a flower, I have to be realistic with myself. What I did come up with draws inspiration more from Bridget Riley in that her designs like Natajara are simple shapes turned into a more complex pattern. So when I sat down to code this thing, I realized I don’t know what I’m doing. I have a starting idea, and maybe that’s all I really finished with, but I struggled, needless to say.

I couldn't communicate what I was trying to achieve to my friend, but here is a rough rough sketch

I couldn’t communicate what I was trying to achieve to my friend, but here is a rough rough sketch

I got my software engineer friend on FaceTime to try to help me, and he kind of helped. I don’t know what I’m missing, besides time and practice and patience. What I ended up producing is a cop out. I’m pretty sure there was a much easier way to code what I did, but I wanted to produce something that if nothing else is nice to look at, and I did that.

Something Nice to Look At

Something Nice to Look At

I haven’t given up exactly, but I have hit a wall, and I’m trying to motivate myself to push through it. What I like about this is its simplicity, and that’s not a cop-out. I like the vintage colors, that I can’t even take credit for. It reminds me of Thanksgiving and birds.  I can do better.

Rainbow Madness

download (2)

This one is all color, and a whole lot of experimentation.

While with my last prompt, I had an idea from the beginning, the only thing I knew about this one is that I’d like to have a lot of color in it.

My starting point was a small experiment I made earlier, a little grid where colors flow from one to another.

Color experiment

Color experiment

After some messing around, I decided to go with a scrolling motion (it is a scrolling wallpaper, after all). The colors were going from left to right, scrolling through all the hues. This eventually turned into a grid:

Continuing experiments  download (12)  download (13)

 I put another moving grid on top of that first one, creating an illusion of rotation, and I started adding more objects to emphasize this illusion.

download  download (1)

And then I accidentally removed the background, and what I was originally calling “Neon Madness” became “Color Madness”.

download (2)  download (4)  download (7)

I love how that turned out. Every part took an entirely different role. The grid is now an ever-changing colorful background, and the objects that originally would’ve been the focus were left to struggle for their survival – only barely clinging to their existence, always about to be erased by the strange rainbow that they live on. Each grid’s fading corners went from guiding the viewer towards the center, to specifically drawing attention to the other grid’s colors.