top of page
Completed Tasks are shown here

​

Embedding Iteration

​

/**

​ * Embedding Iteration.

 *

 * Embedding "for" structures allows repetition in two dimensions.

 *

 */

size(640, 360);

background(0);

 

int gridSize = 40;

 

for (int x = gridSize; x <= width - gridSize; x += gridSize) {

  for (int y = gridSize; y <= height - gridSize; y += gridSize) {

    noStroke();

    fill(255);

    rect(x-1, y-1, 3, 3);

    stroke(255, 100);

    line(x, y, width/2, height/2);

  }

}

​

Variables

/**

* Variables.

 *

 * Variables are used for storing values. In this example, change

 * the values of variables to affect the composition.

 */

 

size(640, 360);

background(0);

stroke(153);

strokeWeight(4);

strokeCap(SQUARE);

 

int a = 50;

int b = 120;

int c = 180;

 

line(a, b, a+c, b);

line(a, b+10, a+c, b+10);

line(a, b+20, a+c, b+20);

line(a, b+30, a+c, b+30);

 

a = a + c;

b = height-b;

 

line(a, b, a+c, b);

line(a, b+10, a+c, b+10);

line(a, b+20, a+c, b+20);

line(a, b+30, a+c, b+30);

 

a = a + c;

b = height-b;

 

line(a, b, a+c, b);

line(a, b+10, a+c, b+10);

line(a, b+20, a+c, b+20);

line(a, b+30, a+c, b+30);

​

Mixture Grid

/**

 * Embedding Iteration.

 *

 * Embedding "for" structures allows repetition in two dimensions.

 *

 */

size(640, 360);

background(0);

 

int gridSize = 40;

 

for (int x = gridSize; x <= width - gridSize; x += gridSize) {

  for (int y = gridSize; y <= height - gridSize; y += gridSize) {

    noStroke();

    fill(255);

    rect(x-1, y-1, 3, 3);

    stroke(255, 100);

    line(x, y, width/2, height/2);

  }

}

Mouse Interactive Process Object(Bezier) object moves while moving the mouse.

 *

 * The first two parameters for the bezier() function specify the

 * the first point in the curve and the last two parameters specify

 * the last point. The middle parameters set the control points

 * that defines the shape of the curve.

 */

 

void setup() {

  size(640, 360);

  stroke(255);

  noFill();

}

 

void draw() {

  background(0);

  for (int i = 0; i < 200; i += 20) {

    bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));

  }

}

Visualisation with Arduino and Processing.

​

​

In EDUvision Season 4 Episode 02 we demonstrated a project that utilizes an Arduino Uno Rev 3 and a phototransistor. The data from the phototransistor is parsed and sent to Processing. Processing is an open source integrated development environment (IDE) like the Arduino IDE and is used by designers and artists alike! With Processing, you can create stunning visual and interactive experiences.

​

   Output

​

​

​

​

​

​

​

​

​

​

​

​

Wiring/Circuit

​

Connect the GND pin from the Arduino to the resistor and then connect the resistor to the short leg of the phototransistor. Connect the A0 pin between the resistor and the phototransistor. Finally connect the 5V pin to the long leg of the phototransistor.

 *

 *

 

​

​

​

​

​

​

​

 Arduino Code

​

unsigned int ADCValue;

void setup(){

    Serial.begin(9600);

}

void loop(){

 

 int val = analogRead(0);

   val = map(val, 0, 300, 0, 255);

    Serial.println(val);

delay(50);

}

                                 Connect the Arduino to the computer using a USB cable and upload the code to your board.                                          Make sure that the serial monitor is printing the values from the phototransistor. When you                                        are done uploading, you can move on to Processing.

​

​

 Processing Code

int n = 1000; // number of dots

 

float[] m = new float[n]; // make a new list of floating points

float[] x = new float[n];

float[] y = new float[n];

float[] vx = new float[n];

float[] vy = new float[n];

float[] redchannel = new float[n];

float[] bluechannel = new float[n];

float[] greenchannel = new float[n];

float[] shape = new float[n];

 

import processing.serial.*;

 

Serial myPort;  // Create object from Serial class

static String val;    // Data received from the serial port

int sensorVal = 0;

 

//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

 

void setup() {

  fullScreen();

  fill(0,10);

  reset();// running the reset when you click. 10000 random values being plugged in

  String portName = "COM5";// Change the number (in this case ) to match the corresponding port number connected to your Arduino.

  myPort = new Serial(this, portName, 9600);

}

 

//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

 

void draw() {

   if ( myPort.available() > 0) {  // If data is available,

  val = myPort.readStringUntil('\n');

  try {

   sensorVal = Integer.valueOf(val.trim());

  }

  catch(Exception e) {

  ;

  }

  println(sensorVal); // read it and store it in vals!

  } 

  noStroke();

  fill(0,30);

  rect(0, 0, width, height); //  black background

 

  for (int i = 0; i < n; i++) { // runs the loop 10,000 times

    float dx = mouseX - x[i]; // distance from the mouse

    float dy = sensorVal - y[i];

 

    float d = sqrt(dx*dx + dy*dy); // calculating the distance between the points and the mouse

    if (d < 1) d = 1;

 

    float f = cos(d * 0.06) * m[i] / d*2; //decides if it gets closer or further from the mouse

 

    vx[i] = vx[i] * 0.4 - f * dx; //changing the velocity so it moves towards the ring

    vy[i] = vy[i] * 0.2 - f * dy;

  }

 

  for (int i = 0; i < n; i++) {

    x[i] += vx[i];

    y[i] += vy[i];

 

    if (x[i] < 0) x[i] = width;

    else if (x[i] > width) x[i] = 0;

 

    if (y[i] < 0) y[i] = height;

    else if (y[i] > height) y[i] = 0;

 

    if (m[i] < 0) fill(bluechannel[i], greenchannel[i] , 255);

    else fill(255, bluechannel[i],redchannel[i]);

 

      if (shape[i] > 2) fill(bluechannel[i], greenchannel[i] , 255);

    else fill(255, bluechannel[i],redchannel[i]);

 

 

 

    if (shape[i] > 2)  rect(x[i], y[i],10,10);

else if (shape[i] > 1 && shape[i] <=2) rect(x[i],y[i],2,2);

else ellipse(x[i], y[i],10,10);

 

 

 

  }

}

 

//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

 

void reset() { // counter that counts up to n

  for (int i = 0; i < n; i++) { // i = 0, i < 10,0000, i++ what to do after each loop.

    m[i] = randomGaussian() * 8; // gaussian distribution is a bell curve. Distribution of the mass

    x[i] = random(width);

    y[i] = random(height);

    bluechannel[i] = random(255);

    redchannel[i] = random(255);

    greenchannel[i] = random(255);

    shape [i] = random(0,3);

  }

}

 

//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

 

void mousePressed() {

  reset();

}

      

​

bottom of page