One Web Visual Direction - Pixel Sorting Art & Textures

[sabrinang]

Art Direction Planning Doc (for reference): https://docs.google.com/presentation/d/1Wr2XK-ogr-72XnMqdmLU2Rf64S-5ctC23OimMwnsquY/edit#slide=id.g16808a0425_0_50

For this years visual direction, I want to utilize pixel sorting (a type of glitch art) as a part of the digital neon visual system for One Web theme. The art will be inspired by the angles of from the grid system abstracted from the Mozfest cubes (mainly the 60 degree angle that the trapezoid shapes, patterns and localized text use too) and incorporating the neon palette.

The example applications in the mockups show white elements (One Web lockup) on top of this art. It should provide enough contrast to be legible. The art can also be masked on the lockup circle and be too busy that the text gets lost.

A vector texture will provide the flexibility to crop in for a macro texture (like the thicker bar style on the left example) and if micro texture if used in its entirety. If we have one scalable texture we can crop from different sections and apply them in different ways so we probably do not need more than 1.

Deliverables:

• 1 hi-res scalable texture that can be printed large scale (stage) and smaller printed assets (.svg).

As for timeline, the sooner we have it we can include it in more assets mockups since contractors will be onboarded next week but they can use placeholder textures til we have it. Ideally we will have the texture by end of next week for contractors to use (finalized texture by end of next heartbeat at the latest).

---

@gvn does awesome image processing art and we discussed about the above so he can help. I am excited to showcase some of his art!

[gvn]

So, a couple things!

1. Upscaling a pixel sort is achievable by doing a "nearest neighbor" resample in Photoshop (or other tools). I gave some thought to converting a pixel sorted bitmap to SVG, but I don't think the end result would rasterize any differently.
2. Here's an initial draft of a texture generated with one of my processes using the palette from the design doc. This is a different approach than pixel sorting, but feels like it fits the direction still. Curious to hear your thoughts!

The background is all SVG, so easily rasterized to whatever size and pixel density you need. 👍

[sabrinang]

Thanks for posting up a draft and exciting to see! My main thoughts and feedback would be around how visually busy the text area feels that could interfere/distract from the words so here is some ideas to try:

Can we also try making the bg brighter closer to the purple and blue in the palette?

[gvn]

Here's the AI file if you want to try tweaking some stuff directly! fox-diff.ai.zip

I can work on some variations and alternatives as well. Just wanted to get the ball rolling. :metal:

[SpikeUK]

May I just comment please that I am really loving the direction you all are going with this design work. And I NEED that purple for the volunteer's t-shirts :)

[Pomax]

A random little attempt using Processing, with glitch distortion turned off, and on respectively:

Code used:

class Drop {
  int age, x, y, MAX_AGE = 100, RAND_AGE = 100, death;
  Drop(float x, float y) {
    age = (int)random(0,MAX_AGE);
    death = MAX_AGE + (int)random(RAND_AGE/2,RAND_AGE);
    this.x = (int)x;
    this.y = (int)y;
  }
  void draw() {
    if (age > MAX_AGE) {
      drawDying();
    } else {
      drawAlive();
    }
    age++;
  }
  void drawAlive() {
    for (int i=age; i>=0; i--) {
      float f = 1 - (float)i/(float)death;
      color fc = color(f * 250, f*27 + (1-f) * 251, (1-f) * 171 + f * 221, (1-f) * 255);
      fill(fc);
      stroke(fc);
      rect(x - i*0.7, y+i, 2,2);
    }
  }
  void drawDying() {
    float a = map(age, MAX_AGE, death, 255, 0);
    for (int i=age; i>=0; i--) {
      float f = 1 - (float)i/(float)death;
      color fc = color(f * 250, f*27 + (1-f) * 251, (1-f) * 171 + f * 221, (1-f) * a);
      fill(fc);
      stroke(fc);
      rect(x - i*0.7, y+i, 2,2);
    }
  }
  boolean isDead() {
    return age >= death;
  }
}

ArrayList<Drop> drops = new ArrayList<Drop>();
int dropCount = 300;
int[] distortionMap;
boolean useDistortion = false;

void setup() {
  size(500,500);
  for(int i=0;i<dropCount; i++) {
    addRandomDrop();
  }
  if (useDistortion) {
    distortionMap = new int[height];
    int runner = 0;
    for(int i=0; i<height; i++) {
      if (random(1)>0.5) {
        runner += (int)random(1,10);
      } else {
        runner -= (int)random(1,10);
      }
      distortionMap[i] = runner;
    }
  }
}

void addRandomDrop() {
  int p = 100;
  drops.add(new Drop(random(-p,p+width), random(-p,p+height)));
}

void draw() {
  background(109,34,175);
  int removed = 0;
  for(int dd=drops.size()-1; dd>=0; dd--) {
    Drop d = drops.get(dd);
    d.draw();
    if (d.isDead()) {
      drops.remove(dd);
      removed++;
    }
  }
  while(removed-- > 0) {
    addRandomDrop();
  }

  if (useDistortion) {
    // distort the lines
    loadPixels();
    for (int i=0; i<height-1; i++) {
      int w = width-distortionMap[i];
      w = constrain(w,0,width);
      arrayCopy(pixels, i*width+distortionMap[i], pixels, i*width, w);
    }
    updatePixels();
  }

  textAlign(CENTER, CENTER);
  textSize(40);
  fill(255);
  text("WHOOOOA MOZFEST", width/2, height/2);
}

[gvn]

@sabrinang – Here are some more SVG fragment variations that you can feel free to organize & use however you like! 🎉

fragments.zip

burst-fragments.zip

[sabrinang]

fragments are lookin' fine :+1:

[xmatthewx]

This is all so so awesome.

@Pomax @gvn @sabrinang – it'd be amazing if you ran a workshop at Mozfest on generative art ... and created something we then used on the last day. cc @flukeout @simonwex

[gvn]

Here's an example of a composite "pixel sort" process and triangulation process.

For a little extra grit and texture:

composite-w-logo.ai.zip

[gvn]

@sabrinang – Here's some more pixel sorts based on the fireworks image:

pixel-sorts.zip

Let me know if you need any more!

[sabrinang]

@gvn these pixel sorts are great!

I just experimented with different crops and transparency/blending modes and we can achieve a lot of effects with them:

@ed-yau @Carrie-ann Please experiment with the .svgs in the .zip file provided above and incorporate them as you see fit for layering in your projects :+1:

[Pomax]

@sabrina @xmatthewx @gvn I'd be for a generative session, I wrote my Processing sketch in maybe 10 minutes, easy enough to explain a pixel grid to people and then go "and now you get to mess it up tremendously" =D

[edrushka]

Love where you're going with these, @gvn and @sabrinang. Would be so cool to incorporate in some of the generative ideas, like #143

[kristinashu]

These look great! I've added them to the style guide folder.