— boreal-kiss.net

Archive
Tag "graphics"

I used a potentiometer as a joystick controlling the graphics on the computer. For demonstration purposes, I’ll show partial source code used in the above application (communication part only).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//Arduino
 
int _out = 0;
float _vMax = 5.0;
 
void setup(){
  Serial.begin(9600);
}
 
void loop(){
  float v = 5.0 * analogRead(_out) / 1023.0;
  sendMessage(v);
  delay(100);
}
 
void sendMessage(float input){
  float dv = _vMax / 5;
 
  if (input < 1 * dv){
    Serial.print("D");
  }
  else if (input < 2 * dv){
    Serial.print("R");
  }
  else if (input < 3 * dv){
    Serial.print("U");
  }
  else if (input < 4 * dv){
    Serial.print("L");
  }
  else{
    Serial.print("D");
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//Processing
 
import processing.serial.Serial;
 
Serial _port;
 
void setup(){
  //Setup drawing. 
}
 
void draw(){
  this.receiveMessage();
  //Update drawing.
}
 
void receiveMessage(){
  if (_port == null){
    _port = new Serial(this, Serial.list()[0], 9600);
  }
 
  if (_port.available() > 0){
    String message = _port.readString();
 
  if (message.equals("U")){
    //UP
  }
 
  if (message.equals("D")){
    //DOWN
  }
 
  if (message.equals("L")){  
    //LEFT
  }
 
  if (message.equals("R")){
    //RIGHT
  }
}
Read More

A company logo of Aperture Science drawn on Processing. Aperture Science is a virtual company appearing in a video game Portal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
void setup(){
  size(640, 640);
  background(255);
  fill(0);
  noStroke();
  smooth();
  noLoop();
}
 
void draw(){
  this.drawLogo();
}
 
void drawLogo(){
  final float RAD = 0.5 * width;
 
  //Inner radius.
  float r0 = 0.6 * RAD;
 
  //Outer radius.
  float r1 = 0.9 * RAD;
 
  //Octagon.
  final int NUM_VERTEX = 8;
 
  //Lateral angle for each shape.
  float dAngle = 2.0 * PI / (float)NUM_VERTEX;
 
  //Margin between shapes.
  float mAngle = 2.0 * PI / 180.0;
 
  final float CENTER_X = 0.5 * width;
  final float CENTER_Y = 0.5 * height;
 
  for (int i=0; i<NUM_VERTEX; i++){
    beginShape();
 
    //Add an inner vertex.
    float t0 = (i + 1) * dAngle;
    float x0 = CENTER_X + r0 * cos(t0);
    float y0 = CENTER_Y + r0 * sin(t0);
    vertex(x0, y0);
 
    //Add vertices for an arc.
    float t1 = (i - 0.5) * dAngle + mAngle;
    float t2 = (i + 0.5) * dAngle - mAngle;
    this.addVerticesForArc(CENTER_X, CENTER_Y, r1, t1, t2);
 
    endShape(CLOSE);
  }
}
 
//Add vertices for an arc. Must be used between beginShape() and endShape().
void addVerticesForArc(float centerX, float centerY, float rad, 
                                                     float startAngle, float endAngle){
  final int NUM_VERTEX = 100;
  float dt = (endAngle - startAngle) / (float)NUM_VERTEX;
 
  for (int i=0; i<NUM_VERTEX; i++){
    float x = centerX + rad * cos(startAngle + i * dt); 
    float y = centerY + rad * sin(startAngle + i * dt);
 
    //Add vertices.
    vertex(x, y);
  }
}
Read More

One of my drawings became the cover art of Simian Mobile Disco‘s new album, Unpatterns, with which you will experience impressive Moiré patterns both on CD and vinyl. The shape of the drawing is inspired by Bridget Riley‘s Riley Waves.

There is also an associated iPhone app, where you can listen to their full album with interactive contents same as my Moiré app plus exclusive shapes. This is also a part of the collaboration.

Available on the App Store

Read More

Imagine there is an image that contains dots randomly distributing. When the image rotates around a given point in the image by small angle and the rotated image is superimposed on the original one, this makes a Moiré pattern that is perceptible to human eyes.

In the video, random 1000 dots and their rotated ones (rotated around the center of the screen) are simultaneously drawn in each frame. You can see some circular and/or spiral patterns in the dots storm.

Read More

This is one of the reasons why mathematics is so beautiful. The equations from Butterfly curve (transcendental). The drawing was performed on the iPhone simulator because I am an iPhone app developer.

Read More