Final project proposal(W9)

 

 

 

 

 

 

 

 

 

 

 

Hello?(working title)

Sometimes, there is a misunderstanding in conversation. I said ‘A’ but, the other person understands it as ‘B’ or ‘C’. It is the bit hard to deliver the right meaning to another person. Therefore conversation needs effort. I want to realize that effort physically in conversation and also make people feel it physically. I want to make the audience tired.

This work the “Hello?” has a subject generator and two walls with multiple sets of a speaker, a microphone, and a button.

First, the two participants stand in front of each wall and starting the talk.

The participant A press the button, the microphone is activated and “talk” sign is lighting. Simultaneously, “listen” sign is lighting on the B wall.

When A starting the talk, one of the random speakers on B wall makes a sound. So if the participant who is standing on B side, move all the time to find out which speaker is activated to talk with the person in the A side.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Snow Maker(W8)

First time I tried to make a ball when mouse clicked and the ball is bouncing with sound. However, I changed it because I wanted using sound as an input to make it more intuitive.

So I designed this Snow Maker that using breath as an input(actually its sound, but I want to make a feeling like that).

When the user pressed mouse, the mic sensing the level of the breath(sound) and it makes a snow. And also turn on background music. Released mouse, the music is paused and also snow.

 

Link to the editor:
https://editor.p5js.org/Jaekook/sketches/r1qlNs8nX

Link to the fullscreen:
https://editor.p5js.org/Jaekook/full/r1qlNs8nX

References:
https://musiclab.chromeexperiments.com/
https://editor.p5js.org/nick7z/sketches/ryh3Ab157

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Code

let mic;
let vol;
let bgm;

let snow = [];

function preload() {
bgm = loadSound(“Let it go.mp3”);
}

function setup() {
createCanvas(windowWidth, windowHeight);

mic = new p5.AudioIn();
mic.start();

for (let i = 0; i < snow.length; i++) {
snow[i] = new Snow();
}
}
//Turn BGM on
function mousePressed() {
bgm.playMode(‘sustain’);
bgm.play();
bgm.setVolume(0.5);
}

//Turn BGM off
function mouseReleased() {
bgm.pause();
}

function draw() {
background(0);
for (let i = 0; i < snow.length; i++) {
snow[i].move();
snow[i].drawBall();
}

if (mouseIsPressed) {
vol = mic.getLevel();
vol = vol * 100;
if (vol > 1) {
let b = new Snow();
snow.push(b);
}
console.log(vol);
}
}

class Snow {
constructor() {
this.x = mouseX;
this.y = mouseY;
this.r = random(1, 20);
this.speed = random(0.2, 0.8);
this.colG = random(150, 255);
this.colB = random(200, 255);
this.colT = random(90, 255);
}

move() {
if (this.y < height) {
this.y = this.y + this.speed;
} else {
this.y = height;
}
}
drawBall() {
noStroke();
fill(0, this.colG, this.colB, this.colT);
ellipse(this.x, this.y, this.r, this.r);
}
}

Mouse Weather(W7)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I wanted to make a website that noticing weather by mouse position which is mapped with geographic coordinates.

I brought weather API from “https://openweathermap.org/current#geo” and also map from map API from “https://www.mapbox.com/api-documentation/#static”.

After that, I made a variable of mouse position and connect to the API’s latitude and longitude part but

Failed…

I thought maybe this website needs geo coordinates API for the mouse position.

– – – – – – – –
Code

let api = ‘https://api.openweathermap.org/data/2.5/weather?’;
let lat = ‘lat=’; //Latitude
let lon = ‘&lon=’; //Longitude
let apikey = ‘&appid=4a5ae257d9da36562c154a1f934be3f8’;
let metric = ‘&units=metric’
let mapimg;
let data;
let x;
let y;

function preload() {
x=mouseX;
y=mouseY;

let url = api + lat + x + lon + y + apikey + metric;
data = loadJSON(url);
print(data);
}

function setup() {

let country = createP(‘Country – ‘ + data.sys.country);
country.class(‘category’);

let weather = createP(‘Weather – ‘ + data.weather[0].main);
weather.class(‘category’);

let temp = createP(‘Temperature – ‘ + data.main.temp + ‘℃’);
temp.class(‘category’);

let humid = createP(‘Humidity – ‘ + data.main.humidity + ‘%’);
humid.class(‘category’);

let windS = createP(‘Wind Speed – ‘ + data.wind.speed + ‘M/s’);
windS.class(‘category’);

let windD = createP(‘Wind Degree – ‘ + data.wind.deg + ‘º’);
windD.class(‘category’);

createCanvas(600,300);
image(mapimg, 0,0);
}

Blooming Spirals(W5)

Red
Blue
Green

 

https://editor.p5js.org/full/r1zWRTq5m

I want to make a random spiral movement that looks like the painting.
This code has below functions

1. Spirals are randomly generate
2. Color changed by mouse coordinates
3. Color changed by the relation between mouse coordinates and spirals
4. Redraw when the mouse is pressed


First, I made one spiral and added variables. After that made an array of object and kept testing the form of spirals. And also more variables.

First spiral object
Array of object
Test 1
Test 2
Test 3

 

Sketches

Sketch 1
Sketch 2
Sketch 3
Sketch 4

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Questions

1. How to stop the draw the end of the spiral?
I tried to use noLoop and I thought if I could measure the minimum “r”,
it’s may possible but couldn’t find out.

2. How to make an array in the class?

How computational media applies to my interest? +drawing(1w_ICM)

Intro to Computational Media_1 week assignment

 

How Computational Media applies to my interest?

My exciting area is information delivery like making data more intuitionally to understand subject easily.

I’m not sure what precisely the comp media will bring to me, but I believe it changes the how I way of seeing, thinking and also expand capability.

Starting from the way of seeing and making date more intuitionally, during the semester I wanna make the camera that turns everything into basic geometric figures such as plain, dot, line, triangle, square, circle. It means to give more simple information through the photos. It could be more efficient that understanding the structure of the subject that shoot by the camera.

 


Drawing with p5.js web editor.

Self-Portrait.

link: https://editor.p5js.org/full/Sy4wnb7_m

 

At first, it’s quite uncomfortable rather than using my hands to using language or coordinates to draw something, but after a few minutes later, it’s fun! The hard part was guessing the coordinates to put ingredients in the right place. But there are more fun feelings rather than frustrating. During the work, thought about it’ll be more fun if making this to animate. And also, I wonder if there is some pen that turning in to code while drawing or writing something, it’ll be fun. The pen for not write codes to draw something rather than draw something to write code.

 

What pitfalls did you run into?

Order. Before writing code, I have to think about the order, but sometimes I missed it then it turns into messy.

What could you not figure out how to do? No, After watching tutorials and Finding references

How was the experience of using the web editor? Comfortable except server down situation.

Did you post any issues to GitHub? No…not yet.

 

  

CODE:

// Intro to Computational Media_Cassie Tarakajian
// 1 week Assignment
// Drawing

function setup() {
createCanvas(600, 600);
}

function draw() {
background(220);

//hair
noStroke();
fill(51);
ellipse(311, 120, 160, 130);
quad(180, 90, 387.3, 100, 395, 130, 165, 130);
quad(180, 90, 291, 57, 395, 130, 165, 130);

//Ears
//right ear
fill(255, 205, 148);
ellipse(170, 245, 80, 80);
fill(255, 255, 150);
ellipse(170, 245, 60, 60);
fill(255, 100, 150);
ellipse(170, 245, 45, 45);
fill(50, 105, 150);
ellipse(170, 245, 25, 25);

noStroke();
//left ear
//fill(255, 205, 148);
fill(255);
ellipse(390, 245, 80, 80);
fill(180);
ellipse(390, 245, 60, 60);
fill(140);
ellipse(390, 245, 45, 45);
fill(100);
ellipse(390, 245, 25, 25);

//face
fill(255, 205, 148);
quad(165, 130, 395, 130, 395, 180, 165, 180);
quad(165, 180, 395, 180, 380, 320, 180, 320);
quad(180, 320, 380, 320, 373, 340, 187, 340);
quad(187, 340, 373, 340, 320, 395, 240, 395);

//right hair_plain
fill(51);
rect(165, 130, 25, 20);
//left hair_plain
rect(370, 130, 25, 20);

//right hair_line
strokeWeight(2);
stroke(51);
line(165.5, 155, 189, 155);
line(165.5, 160, 189, 160);
line(165.5, 165, 189, 165);
line(165.5, 170, 189, 170);
line(165.5, 175, 189, 175);
line(166, 180, 189, 180);
line(167, 185, 189, 185);

//left hair
line(394.5, 155, 370, 155);
line(394.5, 160, 370, 160);
line(394.5, 165, 370, 165);
line(394.5, 170, 370, 170);
line(394.5, 175, 370, 175);
line(394, 180, 370, 180);
line(393, 185, 370, 185);

//nose
fill(240, 205, 148);
quad(275, 220, 285, 220, 300, 300, 260, 300);

fill(51);
//Eyes
//Right eye
ellipse(225, 225, 30, 30);
fill(255, 255, 255);
ellipse(225, 225, 15, 15);

//Left eye
ellipse(335, 225, 30, 30);
fill(80, 150, 200);
ellipse(335, 225, 15, 15);

fill(51);
//Right eye brow
triangle(208, 185, 255, 200, 200, 198);

//Left eye brow
triangle(350, 185, 360, 198, 305, 200);

//mustache
line(250, 321, 250, 326);
line(255, 319, 255, 324);
line(260, 317, 260, 322);

line(265, 317, 265, 319);
line(270, 317, 270, 318);

line(275, 315, 275, 316);
line(280, 315, 280, 316);
line(285, 315, 285, 316);

line(290, 317, 290, 318);
line(295, 317, 295, 319);

line(300, 317, 300, 322);
line(305, 319, 305, 324);
line(310, 321, 310, 326);

stroke(100, 200, 200);
line(250, 390, 250, 395);
stroke(100, 60, 250);
line(255, 390, 255, 395);
stroke(100, 250, 70);
line(260, 390, 260, 395);

stroke(250, 250, 100);
line(265, 385, 265, 395);
line(270, 385, 270, 395);

stroke(100, 200, 200);
line(275, 378, 275, 395);
stroke(250, 100, 70);
line(280, 378, 280, 395);
stroke(250, 250, 100);
line(285, 378, 285, 395);

stroke(100, 250, 250);
line(290, 385, 290, 395);
stroke(100, 250, 100);
line(295, 385, 295, 395);
stroke(80, 80, 250);
line(300, 390, 300, 395);
line(305, 390, 305, 395);

line(310, 390, 310, 395);

//Mouth
fill(100, 200, 148);
ellipse(280, 345, 24, 24);
fill(255);
ellipse(280, 345, 7, 7);

//mouth
//ku ahhhhhhhh
//fill(100,220,200);
//rect(250, 330, 60,32);
//noStroke();
//fill(255,255,255);
//ellipse(262, 340, 7, 7);
//ellipse(274, 340, 7, 7);
//ellipse(286, 340, 7, 7);
//ellipse(298, 340, 7, 7);

//Looks angry
//bottom tooth
//ellipse(262, 352, 7, 7);
//ellipse(274, 352, 7, 7);
//ellipse(286, 352, 7, 7);
//ellipse(298, 352, 7, 7);

}