Day 07

Introduction

The topic of the seventh day is “Split-scanning.” For the research part, I examined two sources: one is the list by Golan Levin, and I found myself greatly inspired by François Vogel. I knew this was probably too advanced for now.

Concept

Initially, my goal was to understand how it’s done and gather inspiration during my journey. Therefore, my first attempt was the most basic iteration of split scanning. As with many things in p5, there’s likely a video by Daniel Shiffman explaining it.

  video = createCapture(VIDEO)
  video.size(320,240)
  video.loadPixels()
  var w = video.width
  var h = video.height

  //copy (source, sx, sy , sw, sh, dx, dy, dw, dh)
  copy(video, w/2,0,1,h,x,0,1,h)
  
  x += 1
  
  if (x > width ){
    x = 0
  }

0 1 2

Mixing techniques

After the last iteration, I discovered that small distances could create an intriguing and somewhat chaotic pattern. I aimed to break away from the purely left-to-right movement and introduce a more overall sense of “movement.” I recalled a technique from day 6, demonstrated by Generative Gestaltung, which involves taking random parts of the image and offsetting them slightly. This is achieved through a combination of the set() and get() functions

// coordinates where its going to be placed
var x1 = floor(random(width));
var y1 = 0;

//  which pixels are going to be copied
var x2 = round(x1 + random(-7, 7));
var y2 = round(y1 + random(-5, 5));

//  which pixels are going to be copied
var w = floor(random(100, 400));
var h = height ;

set(x2, y2, get(x1, y1, w, h));

3

4

Continuous

I felt like that all iterations to this point were very linear. So I tried to create something radial.

5 6

Thoughts

I think, it would be a interesting idea for video editing, concert visuals or installation. Usually in my work the output needs to look the same all the time. But with the camera as input it makes it difficult to control.

Code

Here you can check out the code for all iterations.
Code 1
Code 2
Code 3
Code 4
Code 5
Code 6

Ressources

Image Processing
Generative Gestaltung \

https://p5js.org/reference/#/p5/get