Creative Coding — Week 07

Midterm Project

link to work: https://hl5667.github.io/CC_Week06/

I made a gradient generator, using what we had learned in class. Like I mentioned last week, I had made the gradient with a class of random colored circles with blur on top of it. Last week I tried my method to test if my theory works.

Early Testing with blurness

color testing with chroma library

and this week I made a revision on my code, I chose and different way to generate the circles. I was working on the interaction part. I made sure each circle’s properties, such as position, speed, radius, and color, are initialized in the constructor, and I made a program that creates an array to store instances of the CircleA class, incrementing the counter with mouse click. So each time you click there’s going to be a new circle at your mouse position adding to the array. One thing to notice is that to make it look better, you may need to click on different spots of the canvas to avoid overlapping. Personally, I’m satisfied with what I made. From this project I had learned a lot about using libraries. I think libraries might be the key to making your work more efficient and unique. It has opened a lot of new possibilities to us. Also, through this half semester, I think I’m getting to understand how to think in a coding way to make everything work. If there’s more time for me to experiment with, I want to add another function that can shift color via scrolling. I use framecount to divide 360 to get the random number, since the framecount is a consistent number that’s changing, I may had 4 different classes of circle with different colors, and just add one more vector at front, and maybe with scrolling the value of vector will increase or decrease to change the overall color code that’s been generated. That’s just my theory, I would test it out more, and hopefully it works.

// Version 01

// class CircleA {
//   constructor(start) {
//     this.x = random(0, 1000);
//     this.y = random(0, 1000);
//     this.xspeed = 3;
//     this.yspeed = 3;
//     this.r = random(100, 500);
//     this.rspeed = 2;
//     this.start = start
//   }

//   display(start) {
//     let hue = chroma.hsl((start+frameCount)%360, 1, 0.5)
//     this.x += this.xspeed;
//     this.y += this.yspeed;
//     this.r += this.rspeed;

//     if (this.x > 1000 || this.x < 0) {
//       this.xspeed *= -1;
//     }
    
//     if (this.y > 1000 || this.y < 0) {
//       this.yspeed *= -1;
//     }

//     if (this.r > 800) {
//       this.rspeed *= -1;
//     }
    
//     if (this.r < 100) {
//       this.rspeed *= -1; 
//     }

//     fill(hue.rgb())
//     ellipse(this.x, this.y, this.r);
//   }
// }

// class CircleB {
//   constructor(r) {
//     this.x = random(0, 1000);
//     this.y = random(0, 1000);
//     this.xspeed = 3;
//     this.yspeed = 3;
//     this.r = random(100, 500);
//     this.rspeed = 2;
//   }

//   display(start) {
//     let hue = chroma.hsl((start+frameCount)%360, 1, 0.5)
//     this.x -= this.xspeed;
//     this.y -= this.yspeed;
//     this.r -= this.rspeed;

//     if (this.x > 1000 || this.x < 0) {
//       this.xspeed *= -1;
//     }
    
//     if (this.y > 1000 || this.y < 0) {
//       this.yspeed *= -1;
//     }

//     if (this.r > 800) {
//       this.rspeed *= -1;
//     }
    
//     if (this.r < 100) {
//       this.rspeed *= -1; // Corrected from this.yspeed to this.rspeed
//     }

//     ellipse(this.x, this.y, this.r);

//   }
// }

// function setup() {
// createCanvas(1000, 1000);
// COne = new CircleA(random(100, 300));
// CTwo = new CircleB();
// CThree = new CircleA();
// CFour = new CircleB();
// CFive = new CircleA();
// CSix = new CircleB();
// CSeven = new CircleA();
// CEight = new CircleB();
// CNine = new CircleA();
// CTen = new CircleB();


// }

// function draw() {
// // hue = chroma.hsl(0.5*frameCount%360, 1, 0.5)

// // background(hue.rgb());
// background(0)

// COne.display(30);
// CTwo.display(250);
// CThree.display(100);
// CFour.display(120);
// CFive.display(300);
// CSix.display(0);
// CSeven.display(60);
// CEight.display(90);
// CNine.display(280);
// CTen.display(190);


// // drawingContext.filter = 'blur(300px)'
// }






//Version-02

// a class that generate random color circles
class CircleA {
  constructor(x, y, start) {
    this.x = x;
    this.y = y;
    this.xspeed = 3;
    this.yspeed = 3;
    this.r = random(100, 500);
    this.rspeed = 2;
    this.life = 10000;
    this.start = start;
    
  }

  display(start) {
    let hue = chroma.hsl((start+frameCount)%360, 1, 0.5)

    //bunce when his to the edge of the frame
    if(random(0, 100)%2 == 0){
      this.x += this.xspeed;
    this.y += this.yspeed;
    this.r += this.rspeed;  
    }
    else{
      this.x -= this.xspeed;
      this.y -= this.yspeed;
      this.r -= this.rspeed;
    }

    if (this.x > 1000 || this.x < 0) {
      this.xspeed *= -1;
    }
    
    if (this.y > 1000 || this.y < 0) {
      this.yspeed *= -1;
    }

    if (this.r > 800) {
      this.rspeed *= -1;
    }
    
    if (this.r < 100) {
      this.rspeed *= -1; 
    }

    fill(hue.rgb())
    ellipse(this.x, this.y, this.r);
  }
}

let C = [] 
let cont = 0
let circle
function setup() {
  createCanvas(1000, 1000);
 
}

function draw() {

  hue = chroma.hsl(0.5*frameCount%360, 1, 0.5)
  background(hue.rgb());

  //generate new circles
  circle = new CircleA(mouseX, mouseY, random(0, 300))

  //add new circles to the array
  C[cont] = circle;
  if(cont > 1){
    for(var i = 0; i < cont; i++){
      C[i].display(C[i].start);
    }
  }

  drawingContext.filter = 'blur(300px)'
}

function mouseClicked() {
cont++;
}

some more rendered images from my gradient generator.