# Inverting graphics and code

**URL:** <https://discourse.processing.org/t/inverting-graphics-and-code/5116>\
**Category:** Coding Questions\
**Created:** [November 2, 2018, 12:26pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116 "2018-11-02T12:26:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![IdoPlumes](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@IdoPlumes](https://discourse.processing.org/u/IdoPlumes)\
**Post date:** [November 2, 2018, 12:26pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/1 "2018-11-02T12:26:37Z")

</div>

Hello,

I am new to processing, but not so much coding as i have done a 2 years of audio process design and implementation at my current university, using c and c++ languages.

However i am getting into the graphics world, i have created this code, which currently takes up half of the screen, the left hand side, with the the use of width/2 in the for loop.

How do i invert the graphic and procedure in the code so that the graphic does this on the other half of the screen?

Thanks, this is my first time posting so bare with me if i do not understand nor am able to impliment any of the suggestion you kindly offer!

Lewis

(wasnt sure how to put the code into this post so ill just copy and paste it in)  
:):):):):):):):):):):):):)))

float x = 0;  
float spacing = 25;  
float thickness = 25;

void setup(){  
size(400, 300);  
}

void draw(){  
background(0);

spacing = spacing + random(-3,3);  
thickness = thickness + random(-2,2);  
x = thickness;

stroke(255);  
strokeWeight(20);

for (float x = 0; x \< width/2; x++){  
line(x,0,x,height);  
x = x + spacing;  
}

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 2, 2018, 2:16pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/2 "2018-11-02T14:16:36Z")

</div>

try:

```auto
float spacing = 10;
float thickness = 1;

void setup() {
  size(400, 300);
  frameRate(0.3);
  stroke(255);
}

void draw() {
  background(0);

  spacing = random(10, 50);
  thickness = random(1, 11);
  println("spacing: "+nf(spacing,1,1)+" white: "+nf(thickness,1,1));
  
  strokeWeight(thickness);
  for (float x = 0; x < width; x=x+spacing) {
    line(x, 0, x, height);
  }
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [November 2, 2018, 3:11pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/3 "2018-11-02T15:11:37Z")

</div>

> [@IdoPlumes](#):
>
> wasnt sure how to put the code into this post so ill just copy and paste it in

Press `Ctrl+T` in the Processing IDE and use the `</>` button in the message editor.

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [November 2, 2018, 5:57pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/4 "2018-11-02T17:57:02Z")

</div>

@kll Can you please explain what your code does, or how it works?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 2, 2018, 7:13pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/5 "2018-11-02T19:13:18Z")

</div>

Like this?

```auto
float x = 0;
float spacing = 25;
float thickness = 25;

void setup() {
  size(400, 300);
}

void draw() {
  background(0);
  spacing = spacing + random(-3, 3);
  thickness = thickness + random(-2, 2);
  x = thickness;
  stroke(255);
  strokeWeight(20);
  for (float x = 0; x < width/2; x++) {
    line(x, 0, x, height);
    line(width-x, 0, width-x, height);
    x = x + spacing;
  }
}

```

It’s not clear what you want, exactly… Can you post a mock-up image?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 3, 2018, 12:23am UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/6 "2018-11-03T00:23:03Z")

</div>

that version uses the for loop with

> x = x + spacing  
> but not in the loop instead in the loopdefinition:

```auto
for (float x = 0; x < width; x=x+spacing)

```

so the spacing defines how many patterns are drawn

but the white lines are drawn at that spacing are made with the  
by the OP defined random

```auto
strokeWeight(thickness);

```

i just try to interprete the original code.

as i got headache from testing i reduced the framerate  
and so could also print some diagnostic to the console.

---

<div class="post-metadata">

**Author:** ![IdoPlumes](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@IdoPlumes](https://discourse.processing.org/u/IdoPlumes)\
**Post date:** [November 4, 2018, 6:08pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/7 "2018-11-04T18:08:22Z")

</div>

hello,  
thanks for replying!

This is exactly what i was looking for, im currently comparing my attempt and this to see where i went wrong.

Are you familiar with Ryoji Ikeda, his test pattern series, specifically No.2 is what i am aiming for aesthetically

---

<div class="post-metadata">

**Author:** ![IdoPlumes](https://avatars.discourse-cdn.com/v4/letter/i/d2c977/32.png) [@IdoPlumes](https://discourse.processing.org/u/IdoPlumes)\
**Post date:** [November 4, 2018, 9:12pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/8 "2018-11-04T21:12:04Z")

</div>

![26](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/33288cb9412339a136482331e1d69e4fc70069c2.png)

here is the referenced installation

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 12, 2018, 7:31pm UTC](https://discourse.processing.org/t/inverting-graphics-and-code/5116/9 "2018-11-12T19:31:47Z")

</div>

> [@IdoPlumes](#):
>
> How do i invert the graphic and procedure in the code so that the graphic does this on the other half of the screen?

Based on your image, it seems that you want horizontal lines and you want invert the color of each line grayscale on right side – so a white line becomes a black line; so brightness 255 becomes 255-255 (0), brightness 192 becomes 255-192 (63) etc. Is that right?

After watching it I’m still not sure how your example sketch or your photo relates to Ryoji Ikeda’s Test Pattern No.2.

[![](https://img.youtube.com/vi/c6i0hzE4YJw/maxresdefault.jpg "Ryoji Ikeda - Test Pattern 2 - Paris December 2010") ](https://www.youtube.com/watch?v=c6i0hzE4YJw)