# 8 | Untoolkit: Electronic Outputs

## Zine

![](/files/-M4BrirJ4q6K8EBZF5NC)

## Capacitive sensor + RGB LED

![](/files/-M3MRID2Y9kr_6NzwqnS)

```
//https://www.instructables.com/id/Capacitive-Sensing-for-Dummies/
//https://www.arduino.cc/en/Tutorial/Smoothing
//https://howtomechatronics.com/tutorials/arduino/how-to-use-a-rgb-led-with-arduino/

#include <CapacitiveSensor.h>
// how to install libraries https://learn.sparkfun.com/tutorials/installing-an-arduino-library 
// download capsense lib here https://playground.arduino.cc/Main/CapacitiveSensor/

//send at pin 3, receive at pin 4, 1-10M ohm resistor between
CapacitiveSensor cs_3_4 = CapacitiveSensor(3, 4); // 1-10 megohm resistor between pins 4 & 3, pin 3 is sensor pin, add wire, foil

const int numReadings = 10;     // size of array/number of readings to keep track of (higher = slower)
int readings[numReadings];      // the readings from the analog input
int readIndex = 0;              // the index of the current reading
int total = 0;                  // the running total
int average = 0;                // the average
int brightness = 0;             // initialize delay time at 0
//int ledPin = 11;
int newAverage = 0;             //store values after mapping

int redPin= 11;
int greenPin = 12;
int bluePin = 13;

void setup() {

  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);

  // initialize serial communication with computer:
  SerialUSB.begin(9600);           //start serial communication via USB cable
  
  cs_3_4.set_CS_AutocaL_Millis(0xFFFFFFFF); // turn off autocalibrate on channel 1 - just as an example Serial.begin(9600);

  //initatialize readings array setting all values to 0
  for (int thisReading = 0; thisReading < numReadings; thisReading++) {
    readings[thisReading] = 0;
  }  
}

void loop() {

  // subtract the last reading:
  total = total - readings[readIndex];

  // read from the sensor:
  readings[readIndex] = cs_3_4.capacitiveSensor(30);

  // add the reading to the total:
  total = total + readings[readIndex];

  // advance to the next position in the array:
  readIndex = readIndex + 1;

  // if we're at the end of the array...wrap around to the beginning
  if (readIndex >= numReadings) {
    readIndex = 0;
  }

  // calculate the average:
  average = total / numReadings;

  // map the average value to the min and max we recorded above
  newAverage = map(average, 0, 65, 0, 255);

  //set brightness of LED to sensorValue (between 0-255)
//  analogWrite(ledPin, newAverage);

  if (newAverage <= 85) {
    setColor(255, 0, 0); // Red Color
  }
  else if (newAverage > 85 && newAverage <= 170) {
    setColor(0, 255, 0); // Green Color
  }
  else if (newAverage > 170) {
    setColor(0, 0, 255); // Blue Color
  }
  
  SerialUSB.print("Old Value = ");
  SerialUSB.print(average);
  SerialUSB.print("\t");   // add a tab between the numbers
  SerialUSB.print("New Value = ");
  SerialUSB.println(newAverage);

  delay(10); // arbitrary delay to limit data to serial port
}

void setColor(int redValue, int greenValue, int blueValue) {
  analogWrite(redPin, redValue);
  analogWrite(greenPin, greenValue);
  analogWrite(bluePin, blueValue);
}
```

## Drawing with Capacitive Sensor in Processing

I wanted to start of easy since it is my first time writing code in Processing. First I started building a circuit using a LDR, that was what the example code provided by the minor uses.

### Inspiration

After looking at more and more tutorials I wanted to be able to create a painting or drawing with the sensor. Lots of Processing tutorials showed examples of being able to draw with your mouse, using the x- and y-axis of the mouse position. The YouTube channel [thedotisblack creative coding](https://www.youtube.com/channel/UCX4GSh1gpRuugPpjxu0gLmw) has some cool examples.

At first I chose to recreate [this video](https://youtu.be/HArd_-h-AK4) from thedotisblack creative coding. I'm not that advanced in coding so I searched for some tutorials. Bu while searching for tutorials I stumbled upon a nice example from Processing. When I saw this example I decided it was a better idea to use this and just change a few lines of code, to make it fit in with the swatches. The benefit from the example was that I didn't have to start from scratch. And another benefit was that the drawing is never finished, thats something the first idea didn't have. The idea that I wanted to try and recreate from the video had to be started over again if the canvas was filled.

#### Code from Processing example

Pointillism by Daniel Shiffman.

```
PImage img;
int smallPoint, largePoint;

void setup() {
  size(640, 360);
  img = loadImage("moonwalk.jpg");
  smallPoint = 4;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
}

void draw() { 
  float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  int x = int(random(img.width));
  int y = int(random(img.height));
  color pix = img.get(x, y);
  fill(pix, 128);
  ellipse(x, y, pointillize, pointillize);
}
```

### Setup

I used a Seeeduino Lotus Cortex M0+ instead of a Arduino Uno.

![LDR sensor circuit](/files/-M4EjEttyQfP3Cf-eEsc)

### Changing window size

The first thing I did was change the of the window. I wanted the window to be full screen. So I deleted the line `size(600, 600);` to `fullScreen();`.

As seen in the image above the dots were only appear in a box the exact same size as the original image used to pick the colors. So it treats the image as a canvas.

### Resizing image to window size

![](/files/-M3pRaAuNrQw3KHs-jhR)

Because the dots only appear in the image size I simply needed to resize the image to the whole window size. `img.resize(width,height);`

![](/files/-M3pQJ3ZRQidDOPvQaTr)

### Swapping mouse position with sensor values

```
float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
```

```
float pointillize = map(dataInput, 0, width, smallPoint, largePoint);
```

### Fitting in with the other outputs

To make the output fit in with the others. I had to make two changes, use another picture with copper colors and use rectangles instead of ellipses to make a drawing. Both simple changes, I only had to change this line of code `ellipse(x, y, pointillize, pointillize);` to `rect(x, y, pointillize, pointillize);` and search a picture with nice black and copper colors.

Before swapping the ellipses to squares I thought I wouldn't like the squares as much as the ellipses.

![](/files/-M3pRtKHOBRs-OYOAYfj)

![](/files/-M3pMwSeZ7sQhD6Gchqw)

## End result

When seeing one of my classmates, Andrei, designs in Process I realized that my full screen design wasn't making it fit in with the other outputs. Thats when I chose to resize it to a square just like Andrei did.

So I swapped `fullScreen();` back to `size(600, 600);` to make the window a square.

![](/files/-M4C2MG9KYwRGpoV_FaG)

![](/files/-M4C7KkcSiXjZ5e0iLlm)

In the beginning of the week I ordered some 1M ohm resistances at [tinytronics.nl](https://www.tinytronics.nl/shop/nl). Unfortunately they haven't arrived yet. That's why I couldn't use my own capacitive sensor from week 6, because I didn't have any 1M ohm resistance to get some nice values out of my sensor.

## Final code

### Arduino IDE

```
//ARDUINO CODE FOR ANALOG SENSOR
int sensorValue = 0;

void setup() {
SerialUSB.begin(9600); //needs to match processing baudrate
}

void loop() {
//SerialUSB.println(analogRead(A0)); // for debugging only
sensorValue = analogRead(A0); // store value in sensorValue
SerialUSB.write(map(sensorValue, 0,1023,255,0)); // map to processing range
delay(50);
}
```

### Processing

```
/*
  DRAWING WITH CAPACITIVE SENSOR by Kaz Bison
  
  Recources:
  https://hello.processing.org/editor/             <- Nice for understanding the basics of Processing
  https://processing.org/examples/pointillism.html <- Processing example I used
*/

import processing.serial.*;
Serial myPort;
int dataInput;
PImage img;
int smallPoint, largePoint;

void setup() {
  println(Serial.list()); //use to find list of your port addresses
  String portName = "/dev/cu.usbmodem141101";  //change to your own port address! (Arduino: Tools > Port)
  myPort = new Serial(this, portName, 9600); //needs to match arduino baudrate
  size(600, 600); // window size 600 x 600 px
  img = loadImage("copper-on-black-pattern.jpg"); //image source (I removed the bottom part): https://cdn2.vectorstock.com/i/1000x1000/09/01/copper-rose-gold-foil-florals-on-black-pattern-vector-22540901.jpg
  img.resize(width,height);
  smallPoint = 4;
  largePoint = 40;
  noStroke();
  background(255);
}

void draw() {
  float pointillize = map(dataInput*20+70, 0, width, smallPoint, largePoint);
  int x = int(random(width));
  int y = int(random(height));
  color pix = img.get(x, y);
  fill(pix, 128); //uses color for ellipse from picture
  rect(x, y, pointillize, pointillize);
  println(dataInput); // data sent from Arduino in console
}

void serialEvent(Serial myPort) {
  dataInput = myPort.read();
}
```

## Reflection

Looking at the work of the classmates, at the show and tell, I'm able to notice some of the flaws in my design I didn't think of before. It's nice to have some fresh eyes and feedback at the show and tell, to improve my work.

I also noticed that I enjoyed coding in Processing.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://minormakerslab.gitbook.io/students-1920/andrei/kaz/8-or-algorithmic-bias.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.