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?