My project for this week is inspired by a picture I’ve taken in Inner Mongolia.
Since the wheel in that picture is suitable to apply the rotate function. Also I want to add some interaction part such as clicking the mouse or pressing the keyboard. My original thought is that if the user moves the mouse, then a bunch of ellipses with random size will show up and be around the coordinates of the mouse in certain range. I create two objects–bubble and wheel. For the object Wheel I use translate function to set the new coordinate so that the wheel can rotate in the way I expect. But there is a problem, I don’t know why my bubbles cannot move with my mouse, they just rotate with my wheel and it looks weird. I suppose it may have something to do with my previous translate setting in class wheel. But after several tries I failed so I made some slight changes. I decided to use keyPressed function to let users tap arrow key to change the color of the bubbles. In order to make them more natural, I set random data for the size and the color. But I only changed one of the RGB data to ensure the color is in the pink range. In a word, through this practice I found that I still need to learn more about translate function and functions about mouse and keyboard.
This is my animation of a water drop and it also includes a drawing pad to include some interactivity. I tried to make it as visually pleasing as possible but it only turned out to be so.
I started off by making a drawing board using the mouseX and mouseY positions as the X and Y coordinates of my circle.
Then I wanted to put in a growing object os some sort. so I started to play around with the dimensions and movements of my favorite shape. the circle. I found that I cannot let the circle continue growing, because it would just fill up the canvas. So I added an if statement that limits its growth. On top of that I wanted to play with the movement of the coordinates to add more dimension to the ball.
At last, I ended up with this big raindrop of some sort.
I was inspired by the little boxes that you see on TVs that bounce around and change color whenever they hit a side. I could have made that, but I thought it would be fun to let you change the color whenever you want instead of having to wait for it to hit a side. Especially since with the speeds I put the box moved quite slowly so the user would usually have to wait a bit just to see it bounce off a wall.
For this week’s assignment, we had to “create a generative art that utilizes object-oriented programming concept and interactivity with mouse and/or keyboard”. The link to my work is below:
I really just wanted to keep my assignment simple since I tend to be weak in OOP so I just wanted code I could understand and do. So for the assignment I just made a spinning star and wanted it change colors, and have balls pop up whenever a user clicked it.
Code
let balls = [];
function setup() {
createCanvas(500, 500);
r = random(255);
g = random(255);
b = random(255);
for (let i = 0; i < 10; i++) {
balls[i] = new Ball();
}
}
function draw() {
background(0);
stroke(0);
strokeWeight(3);
star(mouseX, mouseY, 1.5);
}
function mousePressed() {
r = random(255);
g = random(255);
b = random(255);
for (let i = 0; i < 10; i++) {
balls[i].display();
balls[i].move();
balls[i].bounce();
}
}
I had to look up some examples of how to make random colors appear when you clicked and found this link and found that you can type vertex to make the points of a shape pointy, rather than curved as we did in class. I also just referred a lot to the in-class examples to get an idea of what I wanted to do for the homework. Since I’m still not too comfortable with OOP, I had to google a lot of examples to understand how to make the balls appear on mousePressed, which I figured out after looking at a few examples. However, I am unsure as to why the balls keep disappearing after I stop clicking, but still reappear in the same place. I would like to eventually make an office hour to get more clarification on how to do OOP.
Create a generative art that utilizes object-oriented programming concept and interactivity with mouse and/or keyboard.
Final Product:
Progress:
I started by creating a class called spark, basically a object that displays as an ellipse. Created a simple physics system where the balls location is updated according to its velocity and acceleration which are all variables unique to every object.
Initial code:
var array = [];
function setup() {
createCanvas(400, 400);
array[0] = new Spark(1,200,0,1,0);
}
function draw() {
background(220);
for (var i = 0;i < array.length;i +=1){
array[i].gravity();
array[i].motion();
array[i].show();
}
}
class Spark {
constructor(iteration,posx,posy,vx,vy){
this.iteration = iteration;
this.posx = posx;
this.posy = posy;
this.vx = vx;
this.vy = vy;
}
gravity(){
this.vy += 1;
}
motion(){
this.posx +=this.vx;
this.posy +=this.vy;
if(this.posx <= 0){
this.vx*=-1;
}
if(this.posx >= 400){
this.vx*=-1;
}
if(this.posy <= 0){
this.vy*=-1;
}
if(this.posy >= 400){
this.vy*=-1;
}
}
show(){
fill(255,0,0);
ellipse(this.posx,this.posy,40/this.iteration);
}
}
Then I wrote a function called burst(), where the ball will split into two upon collision with walls.
The code instantly crashed, and I lost all my work because I haven’t saved on the web editor. At first I thought it was because splitting was too much calculation for the computer, but it turned out I was creating a new spark object within the spark class, which is problematic. So I created a function called burstt() outside of the class, and use the inner burst to exchange information for the outer function to perform the actual bursting operation.
After getting the splitting to work, I added parameters to the spark class, with a iteration variable indicating which generation the spark is currently at. I had the sparks change color and shrink in size according to its current generation, and also set up conditions for the sparks that are greater than a certain iteration to stop updating.
Finally I decided to add more interactivity to the sketch by switching the burst function from triggering upon collision to triggering upon mouse click. I also changed the direction of gravity from pointing down to pointing towards the mouse. Which ended up looking very visually pleasing and fun to interact with using the mouse.
Video:
Final Code:
var lastLoc = []; var array = []; var maxN = 100000; var counter = 0; function setup() { createCanvas(500, 500); array[0] = new Spark(1,200,0,1,0); }
function draw() { background(20); for (var i = 0;i < array.length;i +=1){ if (array[i].alive()){ array[i].gravity(); array[i].motion(); array[i].show(); } else{
} } }
function mousePressed(){ //spawn new spark //lastLoc = []; //array = []; //maxN = 1000; //counter = 0; //append(array,new Spark(1,200,0,1,0)); var temp = array.length; for (var i = 0;i < temp;i +=1){ if (array[i].alive()){ burstt(array[i]); }
I really like the concept of OOP, as it is a great way to organize code and is really convenient to work with for the purpose of creating things such as generative arts, or video games.
The biggest challenge I had during this project was having the program crash every time I try to split the object, the program does not treat it as an syntax error, it just keeps running and crashes.
I think the idea of changing the direction of gravity according to mouse position was a very nice change, it was really easy to implement since I have already created the physics system, and it looks very visually good. Because it somewhat follows the physics of real life, but it is at the same time impossible in real life because nothing has such a strong gravity like the one I gave the mouse. So the interaction feels really natural but new at the same time.
