Author: Varya Snitko

For my final project idea i was unsure for a quite long time. Initially, it was an “art therapy app” as you can read in the previous post, but implementing some approaches in this app, i realised that in this particular program you are not creating new art pieces, but interact with existing ones. So I switched to this name.

Description

• Welcome screen

App has first welcome screen with the button to start. Circle design is based on functions with some random statements, that is why each time program executes user gets different, a little bit unexpected design

• Modes screen

In this part user gets a question “What do you feel?” and 3 options of the answer. There are different …. Inside each mode. Design is kind of similar to the previous tab to support the app style, but not copy the first idea. Based on the user’s choice screen moves to the next slide

• Anxiety mode

For this mode I picked up the sea as an image after tones of research of methods of art therapy/ help with mental problems and ….. . A lot of peoplefeel much better after some time spending near the churning sea, because sea is infinitely big and strong. Image of the sea gives people feeling of the happiness, satisfaction and peaceful state  of mind. That it why I implemented some kind of meditation process here. You can imagine that you are the sea. And all your emotions proportional to the speed of the waves. You can use your hand to change the intensity of the power of the sea.

In terms of code i used rectangles and noise function (inspired by Ham

 

• Anger mode

I was thinking about the visuals of this mode for a while. Expression of state of anger is different for each person, thus the image of the anger is different. I asked several people about this and got bunch of answers:

a) kettle emits a lot of steam

b)hammer breaks glass

c)active volcano

I stopped on the last idea of the volcano. 

 

•  Happiness mode

I used similar example as we did in class with camera recognition and self-text representation with the text

Arduino part:

I used distance sensor and motors to make communication between processing and arduino. For distance i mapped the value and sent it to processing (to manage the sea). For motors i have a specific variable in processing, which depends on pressing the space(anger mode).  This variable increases each time user presses space and go to arduino to make motor work

You can find code here

 

 

 

So, i decided to choose one idea  for my final and started a big research. As I a little bit tired of the games and musical instruments, i want to work on generative art.  I’m gonna create an art application with different modes for different users. This topic also coincides with mental health and social studies.

I  found some readings about effectiveness of art therapy and results after it

• How Art Therapy Is Used to Help People
• Effectiveness of Art Therapy With Adult

Artistic resources:

• Therapy art video
•  Art projects

In a process of creating a main screen (not final version)

 

 

 

For my midterm project i have several ideas, which i can implement using atduino and processing .

The first idea is a “therapy app” . It will include  different options and modes for different aims. Like relax or otherwise focusing.

The second idea is some sort  of the game travelling story, where you can make some exercises( small interactive games) to continue and reach the end of the story.  The theme i’m gonna choose is ecology to pay audience attention to a problems are happening now.

Objective:

Arduino and Processing have numerous capabilities allowing them to connect to one another. Thus, this assignment presents these factors with three tasks my partner, Hamad, and I were instructed to follow.

Plan:

Go over what we touched upon in class and reference from numerous videos around the internet to explore the multiple ways possible to get to the goal desired.

Code:

Task 1:

ARDUINO & PROCESSING:

Task 2:

ARDUINO:

//INITIALIZE VARIABLE
float var;

//ARDUINO AND PROCESSING COMMUNICATION SETUP
void setup()
{
  Serial.begin(9600);
  //GET ONLY 1 INPUT - BRIGHTNESS
  Serial.println("0");
  pinMode(2, OUTPUT);
}

//MAIN FUNCTION
void loop()
{
  while (Serial.available())
  {
    //GET PROCESSING VARIABLE
    var = Serial.parseInt();
    if (Serial.read() == '\n') 
    {
      //GIVE LED BRIGHTNESS
      analogWrite(2, var); 
      Serial.println(var);
    }
  }
}

PROCESSING:

//LINK TO ARDUINO
import processing.serial.*;
Serial myPort;

//INITIALIZE VARIABLES
int xPos = 0;
float var;


void setup() 
{
  size(960, 720);
  printArray(Serial.list());
  String portname=Serial.list()[0];
  println(portname);
  myPort = new Serial(this, portname, 9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}

void draw() 
{
  background(255);
  ellipse(xPos, height/2, 30, 30);
  //GET X POSITION
  float var1 = mouseX; 
  //MAP WIDTH TO BRIGHTNESS
  var = map(var1, 0, width, 0, 255);
}

void serialEvent(Serial myPort) 
{ 
  String s=myPort.readStringUntil('\n');
  s = trim(s);
  if (s != null) 
  {
    println(s);
    int value = int(s);
    if (value >= 0) {
      xPos = (int)map(value, 0, 1023, 0, width);
    }
  }
  //SEND BACK MAPPED X VALUE TO ARDUINO
  myPort.write(var+ "\n");
}

 

Task 3:

ARDUINO:

//INITIALIZE VARIABLES
int left = 0;
int right = 0;
int var = 0;

//VARIBALES & LED SETUP
void setup()
{
  Serial.begin(9600);
  Serial.println("0,0");
  pinMode(2, OUTPUT);
}

void loop()
{
  while (Serial.available())
  {
    //STORES LED VALUE FROM PROCESSING
    var = Serial.parseInt();
    Serial.println(var);

    if (Serial.read() == '\n')
    {
      //TURN LED ON IF BALL TOUCHES GROUND
      if (var == 1)
      {
        digitalWrite(2, HIGH);
      }
    }

    //GET VALUES FROM POTENTIOMETER
    int sensor = analogRead(A0);
    delay(1);

    Serial.println(sensor);
  }
}

PROCESSING:

//LINK PROCESSING TO ARDUINO
import processing.serial.*;
Serial myPort;

//INITIALIZE VARIABLES
PVector velocity;
PVector gravity;
PVector position;
PVector acceleration;
PVector wind;
float drag = 0.99;
float mass = 50;
float hDampening;
int potValue; //variable from the potentiometer
int led = 0; //variable to change to switch the led off 

//REGULATIONS
void setup() 
{
  size(640, 360);
  noFill();
  position = new PVector(width/2, 0);
  velocity = new PVector(0, 0);
  acceleration = new PVector(0, 0);
  gravity = new PVector(0, 0.5*mass);
  wind = new PVector(0, 0);
  hDampening=map(mass, 15, 80, .98, .96);
}

//ARDUINO INTERACTION
void draw() 
{
  background(255);
  if (!keyPressed) 
  {
    //MOVE CIRCLE BASED ON POTENTIOMETER INPUT
    wind.x = potValue;
    velocity.x*=hDampening;
  }

  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  ellipse(position.x, position.y, mass, mass);
  if (position.y > height-mass/2) 
  {
    velocity.y *= -0.9;  
    position.y = height-mass/2;
  }
}

void applyForce(PVector force) 
{
  // Newton's 2nd law: F = M * A
  // or A = F / M
  PVector f = PVector.div(force, mass);
  acceleration.add(f);
}

void keyPressed() 
{
  if (keyCode==LEFT) 
  {
    wind.x=-1;
  }
  if (keyCode==RIGHT) 
  {
    wind.x=1;
  }
  if (key==' ') 
  {
    mass=random(15, 80);
    position.y=-mass;
    velocity.mult(0);
  }
}

void serialEvent(Serial myPort) 
{
  String s = myPort.readStringUntil('\n');
  s=trim(s);
  if (s != null) {
    int value = int(s);
    potValue = (int)map(value, 0, 1023, 0, width*.01);
  }

  //TURN LED ON IF BALL TOUCHES GROUND
  if (round(velocity.y) < 0) 
  {
    led = 1;
    myPort.write(int(led)+ "\n");
  }
}

 

VIDEO: (click)

This week i tried to recreate music mix pult with the help of arduino. In the circuit there are 3 buttons, each corresponds to a certain  sound, pressing them with different duration you can get different sounds. Also i included micro servo thing, which can be managed by photo resister.

To make micro servo “play” i combined it with the metal straw, at the same time i took a knife to hit them to get interesting and clear sound. As a stick is really heavy comparing to the servo i placed it the table side.

 

 

Code:

#include "pitches.h"
#include<Servo.h>
int but1 = 13;
int but2 = 12;
int but3 = 11;
int sound = 9;
Servo servo; 
int i =0;
void setup() {
  pinMode(but1, INPUT);
  pinMode(but2, INPUT);
  pinMode(but3, INPUT);
    pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  pinMode(sound, OUTPUT);

servo.attach(7);
   servo.write(180);
   Serial.begin(9600);
}

void loop() {
  int b1 = digitalRead(but1);
  int b2 = digitalRead(but2);
  int b3 = digitalRead(but3);
  int photoValue = analogRead(A1);
  int triggerInterval = map(photoValue, 0, 100, 0, 100);
 for ( i= 0; i<180; i++);{
   servo.write(i);
   delay(triggerInterval);
 }
  for ( i=180; i>=1; i--);{
   servo.write(i);
   delay(triggerInterval);
 }

  //Serial.println(triggerInterval);
if (b1 == 1){
tone (sound, NOTE_A3, 200);
    delay(100);
tone (sound, NOTE_A1, 100);
    delay(90);

tone (sound, NOTE_A3, 100);
    delay(80);

tone (sound, NOTE_A1, 100);
    delay(80);

}
if (b2 == 1){
   //digitalWrite(led2, HIGH);

tone (sound, NOTE_A3, 100);
    delay(100);
tone (sound, NOTE_A1, 100);
    delay(80);

tone (sound, NOTE_A3, 100);
    delay(100);

tone (sound, NOTE_A1, 500);
tone (sound, NOTE_A3, 500);
tone (sound, NOTE_A4, 500);
tone (sound, NOTE_A4, 500);

}

if (b3 == 1){
tone (sound, NOTE_A1, 500);
delay(80);
tone (sound, NOTE_A3, 500);
delay(80);
 
}
}

 

 

The aim of this week assignment  is to use one digital and one analog input. So, the whole story is about birthday cake. To switch on the leds you need to press the button(  digital input ),  after  you pressed the button they automatically start to turn on one after another. To “blow” on the candles i used photoresistor. You can use your finger or something else to close it and turn the leds off.

 

Scheme:

Picture:

Last version:

code:

int led1 = 2;
int led2 = 3;
int led3 = 4;
int led4 = 5;
int led5 = 6;
int led6 = 7;
int led7 = 8;
int led8 = 9;
int a;
int t1 = 600;
bool v;
int vpin = A0;
int buttonPin = 13;


void setup() {
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  pinMode(led3, OUTPUT);
  pinMode(led4, OUTPUT);
  pinMode(led5, OUTPUT);
  pinMode(led6, OUTPUT);
  pinMode(led7, OUTPUT);
  pinMode(buttonPin, INPUT);
  Serial.begin(9600);

}

void loop() {
  int currentButtonState = digitalRead(buttonPin);

  if (currentButtonState == HIGH){
    
    for(int i=2; i<9; i++){
      
        digitalWrite(i, HIGH);
        delay(t1);
        digitalWrite(i+1, HIGH);
        delay(t1);
        digitalWrite(i+2, HIGH);
        delay(t1);
        a = 2;
        }
  }

  if  (a == 2) {
  
      int Value = analogRead(vpin);
      int mappedValue = map(Value, 10, 100, 0, 255);
      
      for(int i=2; i<9; i++){
       analogWrite(i, mappedValue);
      }

 }
}

 

As semester goes to the middle, we have our last coding assignment before the spring break. Goal of the assignment  is to build a game in processing using all our previous knowledges (insert sound, images and so on)

We already created a game when learned class structure as a part of object oriented programming (third week assignment),  as i spend a lot of time on visual part, i decided to build my game based on the previous assignment. I add all the physics and the game works now as a true game

When you start the game the main screen with the rules appear

So, you have 3 levels of the game, each of them has different properties

• easy

As this mode is running the amount of the clouds is not high so you can easily manage the plane. To win you have to pick up only 2 coins

• medium

Medium mode is a bit harder to play because of the

• hard

To win in this mode you have to pick up the biggest amount of the coins and the amount of the clouds is the biggest, so this mode is really for professionals .

Win screen shows you beautiful fireworks

In case the plane touches the cloud you get this screen

After the game is finished you can restart the game pressing the space bar on the keyboard. By the way all the operations in the game managed by keyboard. For example, level choice and plane management using “wasd” letters).

At the beginning i was thinking about the  process of the crashing the plane. Quite often circles are used to create a condition  to end the game, however in this particular situation the shape of the cloud is not really a circle, because it is based on rectangle. Solution of this problem is to use 2 circles for the cloud. To be honest i thought that this approach would not guarantee the , but when you play it gives really very sensitive clouds and plane so the game is not as simple as can seems to be. The same approach i used to pick up coins. After you catch the coin the score goes up and game finishes when the corresponding amount of coins is reached.

The final result you can see on this video demonstrating the game process

 

As for my personal experience, i am happy that i had an opportunity to finish the game and bring it to life.

Press the link to see the full code:

midtermVarya

 

Emotional Circle

This week from the perspective of the class was dedicated to text modification and data visualization, however from my  personal perspective it was about mental health. This week i’ve learned a bit about feelings, emotions and mental health. I bumped into different articles and interesting posts. My personal experience + new information gave birth to the visualization of Emotional Circle

First my code looked like this. The color and atmosphere are dark and gloomy, so I decided to be positive and added some motivation  to the code

Code:

To make the circle text move I used geomerative library and some piece of code which found in references.  To output all the text statements easier I put them in the array.

import geomerative.*;
PFont sourceLight;
RShape   grp;
RShape   circle;
String [] names = {"fear", "sadness", "anxiety", "confusion", "calmness", "exitment", "pain", "horror", "interest", "nostalgia", "disgust", "hatred", "acceptance"} ;
int i = 0;
boolean ignoringStyles = false;
PFont  HelveticaNeue;

void setup(){
   
  size(900, 700);
  smooth();
  textSize(30);
  HelveticaNeue = createFont("HelveticaNeue-Light",10);
  textAlign(CENTER);
  
  RG.init(this);
  
  grp = RG.getText("Choose not to blame yourself", "FreeSans.ttf", 72, RG.CENTER);

  RG.setPolygonizer(RG.ADAPTATIVE);
  RG.setPolygonizerAngle(0.065);
  grp = RG.polygonize(grp);
    
  circle = RG.getEllipse(0, 0, 20);
  circle = RG.centerIn(circle, g, 220);  
}

void draw(){
  translate(width/2, height/2);
  background (0);
  fill(0);
  stroke(254, 184, 198);
  float t = map(mouseX, 0, width, 0.01, 0.99);
  RShape circleSeg = RG.split(circle, t)[0];
  
  RG.setAdaptor(RG.BYELEMENTPOSITION);
  RShape adaptedGrp = RG.adapt(grp, circleSeg);
  
  RG.shape( adaptedGrp );
  
  noFill();
  stroke(255, 200);
    
  RG.shape( circleSeg );
  frameRate(2);
}

void keyPressed(){

 if (key == 's')
  fill(253);
  textFont(HelveticaNeue);
  textSize(random(30, 60));
  textAlign(CENTER);
  text(names[i], 0, 0);
  i++;
}

void mousePressed(){
  ignoringStyles = !ignoringStyles;
  RG.ignoreStyles(ignoringStyles);
}

 

This video shows the last result of my coding, but not the last way of thinking

 

The aim of the 3 week assignment is to understand reasons to use classes as a part of object-oriented programming.

Inspiration

During the pandemic we all have to stay at home, but fortunately  I travelled to campus and this inspired me to create a game, which is connected with sunsets, clouds and flights. Looking on the map we can really understand how  big this world is and especially planes can help us to skip hundreds of kilometers in a short amount of time to see people from all over the world.

 I have created a game, where you can manage plane trying  to avoid clouds and not crash plane, at the same time you can collect coins.  You can manage plane movement with 4 keys: “w” is to direct to the up, “a” to the left, “d” to right and “s” to the bottom. Keep in mind  that plane is a fast moving object, so you should always control its position.

The game is not ideal, because physic collision doesn’t really work.

 

Code

Plane, clouds, coins are separated classes

The main part

Coin coins;
Plane plane;
Cloud clouds [];
int Y_AXIS = 1;
int X_AXIS = 2;
color b1, b2, c1, c2;

void setup(){
  size(1280, 720);
   b1 = color(255);
   b2 = color(0);
   c1 = color(149, 187, 241);
   c2 = color(217, 136, 159);
   coins = new Coin();
   plane = new Plane();
   clouds = new Cloud[9];
   for (int i=0; i<clouds.length; i++){
    clouds[i] = new Cloud();
     }
    }

int posBallX=1150;
int posBallY=300;
void draw() {
  
  setGradient(0, 0, width, height, c1, c2, Y_AXIS);

 coins.runCoin();
 plane.runPlane();
 
for (int i = 0; i<clouds.length; i++){
    clouds[i].run(); 
}
}
 
 
void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ) {

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (int i = y; i <= y+h; i++) {
      float inter = map(i, y, y+h, 0, 1);
      color c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  } 
}

class Cloud {
  float posX, posY;
  color CColor;
  float acceleration;
  
  Cloud() {
    posX = random(width);
    posY = random(height);
    CColor = color (30, 35, 100) ;
    acceleration = random(2, 6);
    
  }

  void drawClouds() {
    fill(CColor);
    noStroke();
    rectMode(CENTER);
    rect(posX+20, posY-1, 135, 70);
    fill(CColor);
    ellipse(posX-31, posY-10, 120, 90);
    ellipse(posX+90, posY-7, 90, 80);
    ellipse(posX+60, posY-17, 90, 100);
    ellipse(posX, posY-50, 80, 70); 
  }
  
  void moveClouds() {
    posX += acceleration;
  }

  void checkEdge() {
    if (posX > width) {
      posX = 0;
      posY = random(0, height); 
    }
  }

  void run() {
    moveClouds();
    drawClouds();
    checkEdge();
  }
}

Class for coin

class Coin {
  float sizeH;
  float posXC, posYC;
  float acceleration;

Coin(){
    posXC = 0;
    posYC = random(height);
    acceleration = 2;
}
void drawCoin(){
    fill(255, 229, 15);
    stroke(255, 190, 0);
    ellipse(posXC, posYC, 40, 40);
    fill(255, 190, 0);
    ellipse (posXC, posYC, 25, 25);
}
void moveCoin() {
   posXC += acceleration;
}
 void checkCoin() {
    if (posXC > width) {
      posXC = 0;
      posYC = random(0, height); 
    }
  }


void runCoin() {
    moveCoin();
    drawCoin();
    checkCoin();
    }
}

I also decided to put plane into separate class

class Plane {
  float posPlaneX;
  float posPlaneY;

  Plane() {
    posPlaneX = 1115;
    posPlaneY = 300;
  }

  void drawPlane() {
    fill(255);
    noStroke();
    triangle(posPlaneX-70, posPlaneY, posPlaneX+30, posPlaneY-70,posPlaneX-20,posPlaneY);
    triangle(posPlaneX-70, posPlaneY, posPlaneX+30, posPlaneY+70,posPlaneX-20,posPlaneY);
    triangle(posPlaneX-70, posPlaneY, posPlaneX+30, posPlaneY+70,posPlaneX-20,posPlaneY);
    triangle(posPlaneX+45, posPlaneY,posPlaneX+95,posPlaneY-50,  posPlaneX+75, posPlaneY);
    triangle(posPlaneX+45, posPlaneY,posPlaneX+95,posPlaneY+50,  posPlaneX+75, posPlaneY);
    ellipse (posPlaneX, posPlaneY, 200, 30);
    
 }
  void keyPressed(){
  if (key == 'w')
   posPlaneY-=10;
  if (key == 'a')
  posPlaneX-=10;
  if (key == 's')
  posPlaneY+=10;
  if (key == 'd')
  posPlaneX+=10;
}

 void runPlane(){
  keyPressed();
  drawPlane();
 }
}

New skills

This week I continue to experiment with colors, that is why I added gradient on the background to represent beautiful sunsets in Abu Dhabi

Beginning

The idea of navigation came to my mind after some attempts to create something. At the beginning I wanted to make airstrip to land the plane or something like this. By the way, ball here is a future plane.

 

Inspiration and process

The second week project is related to loops. I decided to work with rectangles, but at first tried to make the pattern strictly ordered. At this particular moment I got an idea about the color to make each rectangle different to each other. 

Then I changed my mind and decided to play with haotic order of the objects drawing on this template from Computer_Graphics_and_Art_May1976

The final result you can watch in this video, the speed of rectangles is not so fast, so we can follow display order of the objects.

The final result is the second one. It can looks like messy as the colors are randomly in background, stroke and rectangles. That is way at first try I commented some part of the code to follow the behavior of the objects.

Code

The code seems to be very short and easy, but I spent a lot of time trying to come to the result I wanted. The one problem I faced is color. First I declared 3 global variables each as a random number and then used them in the background() function, fill() and stroke() in different order to get different combinations of color. This caused the problem that each rectangle was the same color as previous. The solution is to repeat colors inside the loop.

float r=random(0,200);
float g=random(0,200);
float b=random(0,200);

  void setup() {
  size(640, 480);
  background(g,b,r);
  frameRate(1.6);
  
}
  void draw() {
  for (int x = 0; x < width; x += 10) {
    
      float y=random(height);
    //rw is rectangle weight
      float rw=random(80);
      float r=random(8,200);
      float g=random(7,200);
      float b=random(9,200);
      stroke(b, r, g);
      fill(r,g,b);
      rect(x, y, rw, rw, 10);
    //noLoop(); 

    }}

 

I feel like this project is not really interactive, but after the video “ Casey Reas’ Eyeo talk on chance operations” I was really fascinated with random function and played more with varieties of colors.