Skip to content

Instantly share code, notes, and snippets.

Created Sep 28, 2017
Embed
What would you like to do?
//Atlier 1 Digital Futures
// Processing visual code for Atlier 1 DRAW ME! Touch Interface Project
//URL for references are at the very bottom
import processing.sound.*;//import the liberary for the sound
SoundFile soundFile; // name for my sound file
int sceneCounter = 0; // setting a counter to switch the scenes
Timer t1; // declaring the class method "Timer" in the main sketch
Timer t2; // declating the class method for the orbs
Line lines; //declaring the class method "Lines" in the main sketch
Letter[] letters; //declating the class method "Letter" in the main sketch
Sein sein; // create Sein objects
Orb[] orbs = new Orb[500]; //create array with size of 500 orbs
int totalOrbs = 0; // set variable for number of total orbs
float speed2 = 1.0; //speed for animation two
int numberX; // the number of characters in x axis direction for animation one
int numberY; // the number of characters in y axis direction for animation one
int size; // the size of the character
float x;
float y;
float y2;
float radius = 200; // set radius as 300 for the green sphere (second animation)
float ellipse_size = 0.0; // size of yellow ellipse at the end of the film credit (seventh animation)
int[] xpos = new int[50]; // create array for xPos
int[] ypos = new int[50]; // create array for yPos
float rot = 0; // float variable for rotation
float velocity = 0; // tに足す値
float acceleration = 0.05; //the number to add velocityに足す値
void setup() {
size(800, 800, P3D); //size of the canvas
soundFile = new SoundFile(this, "background.mp3"); //the name of the music file
soundFile.play(); //play the music
t1 = new Timer(8000); //setting up the timer with 8 sec interval
t2 = new Timer(20); //setting up the timer with 0.2 sec interval for animation four
lines = new Line(); //setting up line class (third animation)
sein = new Sein(); //setting up sein class (fourth animation)
t2.start(); // starting the timer for fourth animation(orbs)
textAlign(CENTER, CENTER); //centering the text for the title page
size = 20;
textSize(size); //size of the text
numberX = width/size; //the number of text that goes to x axis
numberY = height/size; //the number of text that goes to y axis
letters = new Letter[numberX * numberY]; // creating new letters for each x and y axis
//loop structure to create the letters costantly when the mouse is on the canvas
for (int x = 0; x < numberX; x++) {
for (int y = 0; y < numberY; y++) {
letters[x*numberY+y] = new Letter(x*size+size/2, y*size+size/2);
}
}
}
void draw() {
checkTime(); //time checker
if (sceneCounter == 0 || sceneCounter == 1 ) { //16 sec interval
one(); //loading animation
} else if (sceneCounter == 2 || sceneCounter == 3 ) { //16 sec interva
background(128, 240, 190); //background color
noCursor(); //not to show the cursor on canvas
//drawing the characters for the title page
for (int i = 0; i < letters.length; i++) {
letters[i].display();
title();
}
} else if (sceneCounter == 4 || sceneCounter == 5 ) { //16sec interval
two(); //first animation
} else if (sceneCounter == 6 || sceneCounter == 7 ) { //16sec interval
three(); //second animation
} else if (sceneCounter == 8 || sceneCounter == 9 ) { //16sec interval
four(); //third animation
} else if (sceneCounter == 10 || sceneCounter == 11) { //16sec interval
five(); //fourth animation
} else if (sceneCounter >= 11 ) { // after all the animation
six(); //last animation
}
}
void title() {
noStroke();
text("DRAW ME!", width/2, height/2);
text("By", width/2, height/2+40);
text("Enna Kim, Vivian Wong, Mika Hirata", width/2, height/2+80);
}
//Loading page at the beggining
void one() {
background(255); //background color
noCursor(); //not to show the cursor
fill (0); //fill with black
text("LOADING...", width/2, height/2);
translate(mouseX, mouseY, 0); //the circle moves with the location of cursor
rotateX(frameCount*0.01); //rotate in x direction
rotateY(frameCount*0.01); //rotate in y direction
//remember the previous corrdinate of x and y axis
float lastX = 0, lastY = 0, lastZ = 0;
float radius = 200;
float s = 0, t = 0;
while (s <= 180) {
float radianS = radians(s);
float radianT = radians(t);
// renew the present corrdinate of x and y axis
float x = radius * sin(radianS) * cos(radianT);
float y = radius * sin(radianS) * sin(radianT);
float z = radius * cos(radianS);
stroke(245, 195, 175); //color of the sphere
if (lastX != 0) {
strokeWeight(0.5);
//draw a line from the previous corrdinate to the present corrdinate
line(x/2, y/2, z/2, lastX, lastY, lastZ);
}
strokeWeight(7);
point(X+4, y+4, z+4);
point(x, y, z);
//renew the last corrdinate
lastX = x;
lastY = y;
lastZ = z;
//renew s and t at the same time
s++;
t += velocity;
}
//adding velocity to the acceleration
velocity += acceleration;
}
//first animatiomn (circle)
void two() {
noCursor(); //not to show the cursor
background(161, 233, 245); // background color
//if(mousePressed == true) {
translate(mouseX, mouseY); //translate mousex and mousey into the center of the canvas
rotateX(frameCount*0.02); // rotate the sphere around x-axis
rotateZ(frameCount*0.03); // rotate the sphere around y-axis
for (int i = 0; i <= 180; i += 1) {
float radianS = radians(i);
float z = radius * cos(radianS); //declaring z value
for (int t = 0; t < 360; t += 3) {
float radianT = radians(t);
float x = radius * sin(radianS) * cos(radianT); // declaring x value
float y = radius * sin(radianS) * sin(radianT); // declaring y value
stroke(0, 0, 0, random(255)); //stroke color: white
strokeWeight(2); //thickness of the circles
point(x, y, z);
}
//}
}
}
//animation two (lines)
void three() {
noCursor(); //not to show the cursor
background(232, 148, 63); //background color
lines.display(); //class Line
fill(random(200, 255));
x+=speed2;
if (x== 410) {
speed2 = 0; //stop moving the font when it hits 410
}
}
//animation three (orbs)
void four() {
background(0);
anim1();
circle2(0); // unique duo colour achieved by overlaying circle2() on Sein()
sein();
}
//animation four
void five() {
//create an ellipse which is a transition
fill(87, 107, 201);
ellipse(width/2, height/2, ellipse_size, ellipse_size); //sizr and location of the ellipse)
ellipse_size = ellipse_size + 5.0; //the size of the ellpise increases by 5.0
}
//last scene
void six() {
fill(255);
text("Thank you for your time! ", width/2, height/2);
}
// main Sein object, that will be called at the beginning
// different Seins had to be called because they will move differently
void sein() {
noCursor(); // Hides cursor, replaced by Sein
sein.move(mouseX, mouseY);
sein.display();
xpos[xpos.length - 1] = mouseX; // original, xPos corresponds to xPos of cursor
ypos[ypos.length - 1] = mouseY; // original, yPos corresponds to yPos of cursor
}
// animation of orbs floating upwards
void anim1() {
if (t2.isFinished() == true) { // when timer reaches 30 milliseconds
orbs[totalOrbs] = new Orb(); // display new orb
totalOrbs++; // increment number of orbs
t2.start(); // reset time
if (totalOrbs >= orbs.length) {
totalOrbs = 0; // reset number of orbs to 0 if there are over 500 orbs
}
}
for (int i = 0; i < totalOrbs; i++) { // for loop calls each class function for each orb
orbs[i].move(); // move property of orbs
orbs[i].display(); // display property of orbs
orbs[i].lightOnTouch(sein); // give each orb the property to be lit up if touched by Sein
}
}
void circle2(int colour) {
for (int s = 0; s < xpos.length - 1; s++) {
xpos[s] = xpos[s+1];
ypos[s] = ypos[s+1];
}
for (int s = 0; s < xpos.length - 1; s++) {
xpos[s] = xpos[s+1];
ypos[s] = ypos[s+1];
}
xpos[xpos.length - 1] += 1; // set previous xPos to xPos + 1
ypos[ypos.length - 1] += 1; // set previous yPos to yPos + 1
for (int k = 0; k < xpos.length; k++) {
// choose between blue glow (calm mode)
if (colour == 0) {
fill(random(50, 70), random(50, 70), random(220, 255), 250);
}
// or purple glow when calling function (attacking mode)
if (colour == 1) {
fill(192, 135, random(220, 255), 250);
}
ellipse(xpos[k], ypos[k], k/2, k/2); // draw ellipse
}
}
void checkTime() {
if (t1.isFinished()) {
sceneCounter = sceneCounter+1; //when the timer hits 5.5 sec the sceneCounter will increase by 1
t1.start(); //start the timer again
}
}
void mousePressed() {
sceneCounter++; //when the mouse is pressed the sceneCounter will increase by 1
//if the mouse if pressed, sceneCounter will be increated by one and pass it to next scene
}
/* Reference Codes
https://processing.org/reference/millis_.html
https://py.processing.org/tutorials/p3d/
https://www.openprocessing.org/sketch/153224
https://www.openprocessing.org/sketch/218641
http://p5aholic.hatenablog.com/entry/2015/06/15/194250\
http://p5aholic.hatenablog.com/entry/2015/12/11/000000
*/
//Thank you for your time! Mika Hirata, Vivian Wong, Enna Kim
class Letter {
char c; // the characters to show
int x, y; // x-axis and y-axis
int gray = 255; //color
Letter(int x, int y) {
this.x = x;
this.y = y;
// setting what kind of fcharacter to show as the shadow
c = char(int(random(97, 0)));
}
void display() {
// calculating the distance of the mouse
float distance = dist(mouseX, mouseY, x, y);
// draw in black within 100px
if (distance <= 100) {
gray = 0;
}
// resetting the character in 10% probability
if (random(100) < 10) {
c = char(int(random(97, 200)));
}
// draw the characters
fill(gray);
text(c, x, y);
// fade the character into white color in the 4.0 pace
gray += 4;
}
}
//class for lines
class Line{
int step1 = 10;
int x1 = 100;
int x2 = 100;
int y1 = 50;
int y2 = 50;
int y3 = 10;
int move = 50;
void display(){
if(x1 > 100 || x2 < 10){
move = move*40;
}
if(x2> 250 || x2 < 10){
move = move*40;
}
x1+=move;
y1+=move;
y2-=move;
x1 -= move;
float xFactor = map(mouseX/2, mouseY/2, width, 1.5, 8.0);
float yFactor = map(mouseY/2, mouseY/2, height, 2.5, 2.0);
for(int i = 0; i < width; i+=step1){
//setting for the lines
stroke(255,255,255, random(0,100));
strokeWeight(1);
//how do the line move
line(i, i*xFactor, width + i*xFactor, height - i*xFactor*yFactor);
line(i, i*xFactor, width - i*xFactor, height + i*xFactor*yFactor);
line(i, i*xFactor, width + i*xFactor, height - i*xFactor*yFactor);
line(width, i*xFactor, width - i*xFactor, height + i*xFactor*yFactor);
line(width+ i, i*xFactor, i*xFactor, height + i*xFactor*yFactor);
line(width- i, i*xFactor, i*xFactor, height - i*xFactor*yFactor);
line(i, i*xFactor, i*xFactor, height + i*xFactor*yFactor);
line(i, i*xFactor, i*xFactor, height - i*xFactor*yFactor);
}
}
}
// glowing orbs are a signficant image in Ori and the Blind Forest
class Orb {
color c;
float size;
float x;
float y;
float speed;
Orb() {
x = random(width);
y = height;
size = random(30,60);
speed = 0.05 * size;
c = color (100, 237, random(150, 255), random(100));
}
void move() {
y -= speed;
}
void display() {
noStroke();
fill(c);
ellipse(x, y, size, size);
}
boolean checkIntersect(Sein s) {
float distance = dist(x, y, s.x, s.y);
float myRadius = size/2;
float otherRadius = s.size/2;
if (distance <= myRadius + otherRadius) {
return true;
} else {
return false;
}
}
// function allowing opacity to increase randomly if orb is touched by Sein object
void lightOnTouch(Sein s) {
if (checkIntersect(s) == true) {
c = color(100, 237, random(150, 255), random(200, 255));
}
}
}
// create Sein object, Sein is a creature of blue light
class Sein {
float size;
color c;
float x;
float y;
Sein() {
size = 10;
c = color (100, 230, 250, 10);
}
void move(float _x, float _y) {
x = _x;
y = _y;
// for loop to calculate the position depending on length of xpos - 1
for (int s = 0; s < xpos.length - 1; s++) {
xpos[s] = xpos[s+1];
ypos[s] = ypos[s+1];
}
for (int s = 0; s < xpos.length - 1; s++) {
xpos[s] = xpos[s+1];
ypos[s] = ypos[s+1];
}
}
void display() {
strokeWeight(4);
fill(c);
ellipse(x, y, size, size);
for (int k = 0; k < xpos.length; k++) {
noStroke();
fill(10, 235, random(220, 255), k);
ellipse(xpos[k], ypos[k], k/2, k/2);
}
}
}
// class for Timer
class Timer {
int timeStarted;
int interval;
Timer(int _totalTime) {
timeStarted = _totalTime;
}
void start() {
interval = millis();
}
boolean isFinished() {
int elapsedTime = millis()- timeStarted;
if (elapsedTime > interval) {
return true;
}else {
return false;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment