Pointillism is a way of painting where every dot that is painted is calculated through scientific rules that Seurat had created. It uses pure colour and is carefully placed. Since I wanted to go against this scientific method I created a machine where people can play with the pointillism. Not 100 percent can be controlled by the interacting person but some parts can be.

In my project, the person first uses the button to capture the screen. Then the screen is turned into a canvas where it starts placing dots according to the original photo colours. However, when the person pushes the button down, randomness is added to the dots. The colours and sizes and density is changed to random scale which was my way of interacting with the painting that processing was making.

Code for the Arduino

int buttonState = 0;         // variable for reading the pushbutton status

void setup() {       
 Serial.begin(9600); 
}

void loop(){
  // read the state of the pushbutton value:
  buttonState = digitalRead(13);
  // check if the pushbutton is pressed.
  // if it is, the buttonState is HIGH:
  Serial.println(buttonState);
  delay(100);
}

Code for the Processing

import processing.video.*; 
import processing.serial.*;

Serial myPort;
char val;
float sizeR;
float randomC; 
float lightness;

PImage img;

Capture myCapture; 

String filename = "portrait.jpg"; 

void setup () { 
  size (640, 480); 
  myCapture = new Capture(this, width, height, 30); 
  myCapture.start();
  
  String portName = Serial.list()[2]; 
  myPort = new Serial(this, portName, 9600);
  
  background(255);
  smooth();
} 

void captureEvent (Capture myCapture) { 
  myCapture.read (); 
} 

void draw() { 
  File f = new File(dataPath(filename));
  println(dataPath(filename), f.exists());
  if(f.exists()){
  img = loadImage("portrait.jpg");
  
  if (myPort.available() > 0){
    val = (char) myPort.read();
  }
  
  if (val == 48){
    sizeR = random(10,40);
    randomC = 100;
    lightness = random(50,150);
  }else{
    sizeR = 15;
    randomC = 0;
    lightness = 100;
  }
  
  pointilism();
  }else{
    image (myCapture, 0, 0); 
    
    if (myPort.available() > 0){
      val = (char) myPort.read();
    }
  
    if (val == 48){
      myCapture.stop();    
      save("data/portrait.jpg");
      background(255);
    }
  }
} 

void pointilism(){
  
  int x = int(random(img.width));
  int y = int(random(img.height));
  int loc = x + y*img.width;

  loadPixels();
  float r = red(img.pixels[loc]);
  float g = green(img.pixels[loc]);
  float b = blue(img.pixels[loc]);
  
  noStroke();
  fill(random(r-randomC,r+randomC),random(g-randomC,g+randomC),
  random(b-randomC,b+randomC),lightness);
  ellipse(x,y,sizeR,sizeR); 
}

For my project I did a classic dodging game, modeled after retro games, with the resolution of the frame matching that of a Gameboy Advance. Controls are done through a slider (up/down movement).

ARTWORK by Adam Knuckey (my friend)

To Do for future: variable levels (after 30 or 60 seconds) with increase in speed, number of clouds, and perhaps size of clouds.

Video:

Arduino code:

int sensorPin = 0; // select the input pin for the potentiometer
int ledPin = 13; // select the pin for the LED
int sensorValue = 0; // variable to store the value coming from the sensor

void setup() 
{
//initialize serial communications at a 9600 baud rate
Serial.begin(9600);
}

void loop()
{
sensorValue = analogRead(sensorPin);// read the value from the sensor:
Serial.println(sensorValue);
delay(25);
}

Processing code:

import processing.serial.*;
import gifAnimation.*;

int[][] clouds = new int[10][4];
Animation man;

Serial myPort;  // Create object from Serial class
String val;     // Data received from the serial port
float pos = 0;
int size;
int speed;
boolean gameOver;
int level;
int millis;
int score;
PImage cld1;
PImage cld2;
int manX;



void setup() {
  size(240, 160);
  String portName = Serial.list()[9]; //change the 0 to a 1 or 2 etc. to match your port
  myPort = new Serial(this, portName, 9600);
  myPort.bufferUntil('\n');
  initialize();
  man = new Animation("man", 23);
}

void draw()
{

  textAlign(CENTER);
  background(#4AE8E8);
  textSize(14);
  text("Level "+level, width/7, height/8);
  textSize(11);
  text("Score: "+score, width/6, height/8+14);
  if ( myPort.available() > 0) {  
    val = myPort.readStringUntil('\n');
  } 
  if (millis>30000) {
    level++; 
    // speed++; 
    // size++;
  }
  millis = millis()%30000;
  if (val != null && !gameOver) {
    val = trim(val);
    pos = map(int(val), 295, 768, 10, height-10); //768
    pos = constrain(pos, 20, height-10);
    pos = height-pos;
    println(val+" "+pos);
  }
  noStroke();
  fill(255, 0, 0);

  man.display(width/7, pos);
  // ellipse(width/6, pos, 15, 15);

  for (int i=0; i<10; i++) {
    fill(255);
    if (clouds[i][2]==10) {
      image(cld1, width-clouds[i][0], clouds[i][1]);
    } else {
      image(cld2, width-clouds[i][0], clouds[i][1]);
    }
    //ellipse(width-clouds[i][0], clouds[i][1], size, size);
    if (manX >= width-clouds[i][0] && 
      manX < = width-clouds[i][0]+clouds[i][3]) {
      if (!gameOver) {
        score++;
      }
      if (pos <= clouds[i][1]+clouds[i][2] &&          pos+size >=clouds[i][1]) {
        gameOver=true;
        if (!gameOver) {
          score--;
        }
      }
    }
    if (!gameOver) {
      clouds[i][0]+=speed;
      if (clouds[i][0]>(width+20)) {
        clouds[i][0] = clouds[i][0]%int(random(1, 30));
        clouds[i][1]= int(random(0, height));
      }
    }
    if (gameOver) {
      textSize(28);
      text("Game Over", width/2, height/2);
      textSize(14);
      text("Press 'R' to play again", width/2, height/2+28);
    }
  }
  if (keyPressed) {
    if (key == 'r') {
      initialize();
    }
  }
}

void initialize() {
  for (int i=0; i<10; i++) {
    clouds[i][0] = int(random(-width*1.5, -10));
    clouds[i][1] = int(random(0, height));
    if (i%2==0) {
      clouds[i][2] = 10;
      clouds[i][3] = 20;
    } else {
      clouds[i][2] = 15;
      clouds[i][3] = 30;
    }
  }
  size = 9;
  manX = width/7+16;
  speed = 3;
  gameOver = false;
  level = 1;
  score = 0;
  cld1 = loadImage("cloud_small.png");
  cld2 = loadImage("cloud_big.png");
}

// Class for animating a sequence of GIFs

class Animation {
  PImage[] images;
  int imageCount;
  int frame;

  Animation(String imagePrefix, int count) {
    imageCount = count;
    images = new PImage[imageCount];

    for (int i = 0; i < imageCount; i++) {
      // Use nf() to number format 'i' into four digits
      String filename = imagePrefix + nf(i, 4) + ".gif";
      images[i] = loadImage(filename);
    }
  }

  void display(float xpos, float ypos) {
    frame = (frame+1) % imageCount;
    image(images[frame], xpos, ypos);
  }

  int getWidth() {
    return images[0].width;
  }
}

So I sort of understand what’s wrong.
Basically, how it’s set up here is that I’m using the flex sensor to approximate a catapult; you bend the sensor and then release it, like a slingshot. In the code, it looks for that moment of release -when the values change drastically from much higher to much lower- and ideally that change in values would trigger the projectile to launch. I’ve gotten the catapult arm to move along with the flexing of the sensor, but for whatever reason the projectile fails to launch and I don’t quite understand why. I think it has something to do with the fact that it wants to launch the projectile when the value difference is >100, which if I’m right (which, as I’m a programming novice, I might not be) means that it will only launch the projectile if the difference is CONSTANTLY greater than 100. I think this is the reason mainly because the launch animation takes longer than a second, and a second is barely how long the difference in values remains greater than 100. So the period of time in which difference>100 isn’t sufficient for the entire projectile launch to occur, so therefore I’m witnessing nothing happening.
Or maybe I just frankensteined the codes together wrong.
(the code I’m using for the projectile is a modified version of the processing built-in example “Moving on Curves”)

Anyway, my concept was to use the flex sensor as what it pretty literally approximates, which is a catapult. It’s not a super sophisticated concept, but it seemed doable. As far as I’m concerned it still is, but it’ll require me to have a real knock-down drag-out battle with the code, which probably will result in me getting curbstomped by a computer. I’m happy I got the arm to move, at least.

// This Processing program reads serial data for two sensors,
// presumably digitized by and transmitted from an Arduino. 
// It displays two rectangles whose widths are proportional
// to the values 0-1023 received from the Arduino.
 
// Import the Serial library and create a Serial port handler
import processing.serial.*;
Serial myPort;   
 
// Hey you! Use these variables to do something interesting. 
// If you captured them with analog sensors on the arduino, 
// They're probably in the range from 0 ... 1023:
int valueA;  // Sensor Value A
int valueB;  // Sensor Value B

int valueBPrevious;


 
//------------------------------------
void setup() {
  size(700,500);
  // List my available serial ports
  int nPorts = Serial.list().length; 
  for (int i=0; i < nPorts; i++) {     println("Port " + i + ": " + Serial.list()[i]);   }      // Choose which serial port to fetch data from.    // IMPORTANT: This depends on your computer!!!   // Read the list of ports printed by the code above,   // and try choosing the one like /dev/cu.usbmodem1411   // On my laptop, I'm using port #4, but yours may differ.   String portName = Serial.list()[0];    myPort = new Serial(this, portName, 9600);   serialChars = new ArrayList(); }   //------------------------------------ void draw() {     // Process the serial data. This acquires freshest values.    processSerial();      background(205,235,255);   noStroke();   fill(100,210,170);   rect(0,430, 700,500);    float x = map(valueB, 700,900, 130,50);  float y = map(valueB, 700,900, 320,400); //projectile variables float xcoord = x;        // Current x-coordinate float ycoord = y;        // Current y-coordinate float beginX = xcoord;  // Initial x-coordinate float beginY = ycoord;  // Initial y-coordinate float endX = 600;   // Final x-coordinate float endY = 430;   // Final y-coordinate float distX =endX-beginX;          // X-axis distance to move float distY=endY-beginY;          // Y-axis distance to move float exponent = 4;   // Determines the curve float step = 0.01;    // Size of each step along the path float pct = 0.0;      // Percentage traveled (0.0 to 1.0) //catapult base   fill (255);   rect(80,400, 80,30);   rect(110,390, 45,10);   rect(110,350, 10,40);   beginShape();     vertex(120,350);     vertex(120,360);     vertex(145,390);     vertex(155,390);   endShape(); //catapult arm   strokeWeight(5);   stroke(255);   line(110,400, x,y);   //curve motion adopted and modified from processing's example "moving on curves" //projectile somehow isn't working still, either go to office hours or pester mark   int difference = valueBPrevious - valueB;   if (difference > 100){
    println ("Thing happened!");
        xcoord = beginX + (pct * distX);
        ycoord = beginY + (pow(pct, exponent) * distY);
      }
      fill(255);
      ellipse(x, y, 10, 10);  
      pct = 0.0;
  valueBPrevious = valueB; // last thing we do.
}
 
 
//---------------------------------------------------------------
// The processSerial() function acquires serial data byte-by-byte, 
// as it is received, and when it is properly captured, modifies
// the appropriate global variable. 
// You won't have to change anything unless you want to add additional sensors. 
 
/*
The (expected) received serial data should look something like this:
 
 A903
 B412
 A900
 B409
 A898
 B406
 A895
 B404
 A893
 B404
 ...etcetera.
 */
 
ArrayList serialChars;      // Temporary storage for received serial data
int whichValueToAccum = 0;  // Which piece of data am I currently collecting? 
boolean bJustBuilt = false; // Did I just finish collecting a datum?
 
void processSerial() {
 
  while (myPort.available () > 0) {
    char aChar = (char) myPort.read();
 
    // You'll need to add a block like one of these 
    // if you want to add a 3rd sensor:
    if (aChar == 'A') {
      bJustBuilt = false;
      whichValueToAccum = 0;
    } else if (aChar == 'B') {
      bJustBuilt = false;
      whichValueToAccum = 1;
    } else if (((aChar == 13) || (aChar == 10)) && (!bJustBuilt)) {
      // If we just received a return or newline character, build the number: 
      int accum = 0; 
      int nChars = serialChars.size(); 
      for (int i=0; i < nChars; i++) {          int n = (nChars - i) - 1;          int aDigit = ((Integer)(serialChars.get(i))).intValue();          accum += aDigit * (int)(pow(10, n));       }         // Set the global variable to the number we captured.       // You'll need to add another block like one of these        // if you want to add a 3rd sensor:       if (whichValueToAccum == 0) {         valueA = accum;         // println ("A = " + valueA);       } else if (whichValueToAccum == 1) {         valueB = accum;         // println ("B = " + valueB);       }         // Now clear the accumulator       serialChars.clear();       bJustBuilt = true;       } else if ((aChar >= 48) && (aChar <= 57)) {
      // If the char is between '0' and '9', save it.
      int aDigit = (int)(aChar - '0'); 
      serialChars.add(aDigit);
    }
  }
}