Category: Assignment-04-Wallpaper

Computational Color Palettes (Wallpaper)

After experimenting with making patterns using Penrose L-Systems and not being pleased with the results, I used this assignment to explore computational color palettes in depth. My wallpaper sketch generates a grid of colored dots based on one seed color. The pattern and type of palette was inspired by a unique design that I found online.

Wallpaper Inspiration

Initially I just tried to replicate that design, using it as a starting point to define rules about color relationships.

julia-dots-wallpaper-green

After getting my color generators to work as well as possible with the green seed color, I tried with others. Here are the results:


julia-dots-wallpaper-orange


julia-dots-wallpaper-purple


julia-dots-wallpaper-yellow

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
import processing.pdf.*;
 
int numCircles;
int radius;
int outerPadding;
int diameter;
int internalPadding;
color seedColor;
color backgroundColor;
int numPages;
 
void setup() {
  size(700, 700, PDF, "julia-dots-wallpaper-purple.pdf");
  colorMode(HSB, 360, 100, 100);
  numCircles = 6;
  numPages = 4;
  outerPadding = width/10;
  int internalWidth = width - (2*outerPadding);
  diameter = internalWidth/numCircles;
  internalPadding = width/60;
 
  color green = color(140, 65, 75);
  color orange = color(8, 80, 92);
  color purple = color(268, 52, 79);
  color yellow = color(34, 98, 28);
  seedColor =  purple;
 
  backgroundColor = color(30, 3, 100);
  // noLoop(); // turn off to record to pdf
}
 
void mousePressed() {
  loop();  // Holding down the mouse activates looping
}
 
void mouseReleased() {
  noLoop();  // Releasing the mouse stops looping draw()
}
 
void draw() {
  background(backgroundColor);
  noStroke();
  int rows = numCircles;
  int cols = numCircles;
 
  for (int row = 0; row < = rows; row++) {
    for (int col = 0; col <= cols; col++) {
      drawCircle(row, col);
    }
  }
 
  PGraphicsPDF pdf = (PGraphicsPDF) g;  // Get the renderer
  pdf.nextPage();  // Tell it to go to the next page
  // When finished drawing, quit and save the file
  if (frameCount == numPages) {
    exit();
  }
}
 
void drawCircle(int row, int col) {
  color circleColor = seedColor;
  float randomNum = random(0, 100);
  if (randomNum >= 0 && randomNum < = 80) {
     circleColor = similarColor(seedColor);
  } else if (randomNum > 80 && randomNum < = 95) {
     circleColor = counterClockwiseAdjacentColor(seedColor);
  } else if (randomNum > 95 && randomNum < 100) { 
     circleColor = clockwiseAdjacentColor(seedColor);
  }
 
  fill(circleColor);
  int x = outerPadding + (diameter * col);
  int y = outerPadding + (diameter * row);
  ellipse(x, y, diameter-internalPadding, diameter-internalPadding);
}
 
color similarColor(color seedColor) {
   // SIMILAR COLORS, SLIGHT VARIATIONS ON SEED
   // circle color is seed color, but should vary a little in brightness
   float brightDelta = ((int)random(-4, 4))*10.0;
   float hueDelta = random(-25,10);
   float satDelta = -15;
   if (hueDelta > 0) {
     satDelta = 10;
   } else {
     brightDelta += 20;
   }
   return modifyColor(seedColor, hueDelta, satDelta, brightDelta);
}
 
color counterClockwiseAdjacentColor(color seedColor) {
   // counterclockwise next door color and variations
   float hueDelta = ((int)random(3, 7)) * 10;
   float satDelta = -5;
   float brightDelta = 10;
   if (hueDelta > 65) {
     satDelta -= 30;
     // brightDelta += 35;
   }
   else if (hueDelta > 50) {
     satDelta +=10;
   }
   return modifyColor(seedColor, hueDelta, satDelta, brightDelta);
}
 
color clockwiseAdjacentColor(color seedColor) {
   // clockwise next to seed color
    float hueDelta = random(8, 11) * -10;
    float satDelta = -15;
    float brightDelta = 23;
    if (hueDelta < -90) {
      satDelta = 25;
    }
    return modifyColor(seedColor, hueDelta, satDelta, brightDelta); 
}
 
color modifyColor(color startColor, float hueDelta, float saturationDelta, float brightnessDelta) {
  float hue = hue(startColor);
  float newHue = hue + hueDelta;
 
  float sat = saturation(startColor);
  float newSat = sat + saturationDelta;
 
  float brightness = brightness(startColor);
  float newBrightness = brightness + brightnessDelta;
 
  return color(newHue, newSat, newBrightness);
}

Adam-Assignment-04-Wallpaper

The text in this was meant to be generated from a list of adjective, nouns, prepositions and verbs to create poetry. Unfortunately I had trouble working with strings and was unable to get the poems to wrap in the circles. I settled instead for the interesting looking artefacts that were created when text started overlapping itself.

Jun – Wallpaper

I wanted to make something inspired by snowflakes, but it just turned out looking like bathroom tiles instead… I originally wanted to somehow incorporate recursion into it, but didn’t figure out where/how it would fit in. Maybe I’ll try to incorporate recursion later.

Maryyann-Snake

I made my wallpaper based on the game Snake. The ellipses start from the left top corner and spirals to the middle and increase in size to imitate a snake chasing its food.

 

Wallpaper

I’m still not one hundred percent comfortable with processing yet, particularly with the randomly generative processes. For this reason, I’ve created a very simple wallpaper which uses ridiculously simple functions such as mod to achieve what is (hopefully) a design-y effect. I’m hoping to create another one of these very soon, as I am not satisfied with this result: