Creative Coding

This was probably one of my most fun creative projects. Reliant solely upon C++ and CSS, I was able to produce the output for a creative coding project that allows users to interact with abstract technological artwork. I wanted to use abstract forms of basic shapes to create a stimulating and immersive experience for the user. Through each keyboard selection, a "scene" is changed to transport users into a world of lively code. These structures were developed by hand using practices learned through coding experience. 

I also included some game design and interactive projects including iterations of the popular game "Flappy Bird" and a firework landscape. Enjoy!






Feel free to scrub through the coding structures which I have extensively included below!



Creative Coding Art:
/*int option=1;
int xPos=200;
int xDir=1;

void setup() {
  size(500, 500);
}

void draw() {
  background(165,78,78);
  stroke(240,160,160);
  
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
  println (mouseX, mouseY);
  
  strokeWeight(2);
  if (option==1) { 
    for (int circleX=70; circleX<= 225; circleX +=70) {
      for (int circleY=70; circleY<= 475; circleY+=70) {
        fill(random(255), 255, 255); 
        stroke(228,255,77);
    
        
        ellipse(circleX, 80, 50, 50);
        ellipse(circleY, 80, 50, 50);
        
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        ellipse(circleX, 240, 50, 50);
        ellipse(circleY, 240, 50, 50);
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        ellipse(circleX, 400, 50, 50);
        ellipse(circleY, 400, 50, 50);
        
      }
    }
  }

  if (option==2) { 
    background(222,180,65);
    stroke(0);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
   for (int circleX=70; circleX<= 225; circleX +=70) { 
      for (int circleY=70; circleY<= 475; circleY+=70) {
         fill(random(400), 23, 78); 
        stroke(0);
        {
        ellipse(circleX, 239, 119,119);
        ellipse(circleY, 239, 119, 119);
        fill(0);
        
        }
        fill(random(400), 23, 78); 
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        ellipse(circleX, 240, 50, 50);
        ellipse(circleY, 240, 50, 50);
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        ellipse(circleX, 400, 50, 50);
        ellipse(circleY, 400, 50, 50);
        
      }
    }
  }


  if (option==3) { 
    background(30,142,122);
    stroke(50,80,30);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
    for (int circleX=70; circleX<= 225; circleX +=70) { 
      for (int circleY=70; circleY<= 475; circleY+=70) {
       fill(random(240), 240,125); 
        stroke(228,255,77);

        rect(circleX, 80, 60, 60,7);
        ellipse(circleY, 80, 50, 50);
        
        rect(circleX, 160, 60, 60,7); 
        ellipse(circleY, 160, 50, 50);
        
        rect(circleX, 240, 60, 60,7);
        ellipse(circleY, 240, 50, 50);
        
        rect(circleX, 320, 60, 60,7);
        ellipse(circleY, 320, 50, 50);
        
        rect(circleX, 400, 60, 60,7);
        ellipse(circleY, 400, 50, 50);
        
 
      }
    }
  }

  if (option==4){
  background(88,85,84);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
    for (int circleX=70; circleX<= 225; circleX +=70) { 
      for (int circleY=70; circleY<= 475; circleY+=70) {
        fill(random(95), 100, 62); 
        stroke(300,300,300);
        
        ellipse(xPos, 80, 50, 50);
        ellipse(xPos, 80, 50, 50);
        xPos=xPos+xDir;
        if (xPos>width-10 || xPos<10)
       {
      
          xDir=-xDir;
            }
  
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        ellipse(xPos, 240, 50, 50);
        ellipse(xPos, 240, 50, 50);
        xPos=xPos+xDir;
        if (xPos>width-10 || xPos<10)
       {
      
          xDir=-xDir;
            }
        
    
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        ellipse(xPos, 400, 50, 50);
        ellipse(xPos, 400, 50, 50);
        xPos=xPos+xDir;
        if (xPos>width-10 || xPos<10)
       {
      
          xDir=-xDir;
            }
        
      }
    }
  }

  if (option==5) {
  background(104,116,27);
  stroke(248,252,13);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
    for (int circleX=70; circleX<= 225; circleX +=70) {
      for (int circleY=70; circleY<= 475; circleY+=70) {
        fill(random(213), 219, 181); 
        stroke(228,255,77);
        
        ellipse(circleX, 80, 50, 50);
        ellipse(circleY, 80, 50, 50);
        
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        ellipse(circleX, 240, 50, 50);
        ellipse(circleY, 240, 50, 50);
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        ellipse(circleX, 400, 50, 50);
        ellipse(circleY, 400, 50, 50);
        
      }
    }
  }
}

void keyPressed() {

  option++;
  if (option>5) {
    option=1;
  }
}
*/



int option=1;
int xPos=200;
int xDir=1;

void setup() {
  size(500, 500);
}

void draw() {
  background(165,78,78);
  stroke(240,160,160);
  
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
  println (mouseX, mouseY);
  
  strokeWeight(2);
  if (option==1) { 
    for (int circleX=70; circleX<= 225; circleX +=70) {
      for (int circleY=70; circleY<= 475; circleY+=70) {
        fill(random(255), 255, 255); 
        stroke(228,255,77);
    
        
        ellipse(circleX, 80, 50, 50);
        ellipse(circleY, 80, 50, 50);
        
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        ellipse(circleX, 240, 50, 50);
        ellipse(circleY, 240, 50, 50);
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        ellipse(circleX, 400, 50, 50);
        ellipse(circleY, 400, 50, 50);
        
      }
    }
  }

  if (option==2) { 
    background(222,180,65);
    stroke(0);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
   for (int circleX=70; circleX<= 225; circleX +=70) { 
      for (int circleY=70; circleY<= 475; circleY+=70) {
         fill(random(400), 23, 78); 
        stroke(0);
        {
        ellipse(circleX, 239, 119,119);
        ellipse(circleY, 239, 119, 119);
        fill(0);
        
        }
        fill(random(400), 23, 78); 
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        ellipse(circleX, 240, 50, 50);
        ellipse(circleY, 240, 50, 50);
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        ellipse(circleX, 400, 50, 50);
        ellipse(circleY, 400, 50, 50);
        
      }
    }
  }


  if (option==3) { 
    background(30,142,122);
    stroke(50,80,30);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
    for (int circleX=70; circleX<= 225; circleX +=70) { 
      for (int circleY=70; circleY<= 475; circleY+=70) {
       fill(random(240), 240,125); 
        stroke(228,255,77);

        rect(circleX, 80, 60, 60,7);
        ellipse(circleY, 80, 50, 50);
        
        rect(circleX, 160, 60, 60,7); 
        ellipse(circleY, 160, 50, 50);
        
        rect(circleX, 240, 60, 60,7);
        ellipse(circleY, 240, 50, 50);
        
        rect(circleX, 320, 60, 60,7);
        ellipse(circleY, 320, 50, 50);
        
        rect(circleX, 400, 60, 60,7);
        ellipse(circleY, 400, 50, 50);
        
    
        rect(circleY, 80, 60, 60,7);
        
        rect(circleY, 160, 60, 60,7); 
   
        rect(circleY, 240, 60, 60,7);
    
        rect(circleY, 320, 60, 60,7);
        
        rect(circleY, 400, 60, 60,7);
        
        
        
 
      }
    }
  }

  if (option==4){
  background(88,85,84);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
  
    for (int circleX=70; circleX<= 225; circleX +=70) { 
      for (int circleY=70; circleY<= 475; circleY+=70) {
        fill(random(95), 100, 62); 
        stroke(300,300,300);
        
        rect(xPos, 80, 50, 50);
        rect(xPos, 80, 50, 50);
        xPos=xPos+xDir;
        if (xPos>width-10 || xPos<10)
       {
      
          xDir=-xDir;
            }
  
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
        
        rect(xPos, 240, 50, 50);
        rect(xPos, 240, 50, 50);
        xPos=xPos+xDir;
        if (xPos>width-10 || xPos<10)
       {
      
          xDir=-xDir;
            }
        
    
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        rect(xPos, 400, 50, 50);
        rect(xPos, 400, 50, 50);
        xPos=xPos+xDir;
        if (xPos>width-10 || xPos<10)
       {
      
          xDir=-xDir;
            }
        
      }
    }
  }

  if (option==5) {
  background(104,116,27);
  stroke(248,252,13);
  for(int x=0; x<width; x=x+20){
  line(x,0,x,height);
  
  for (int y=0; y<height; y=y+20){
  line(0,y,width, y);
  }
  }
    for (int circleX=70; circleX<= 225; circleX +=70) {
      for (int circleY=70; circleY<= 475; circleY+=70) {
      
        fill(random(213), 219, 181); 
        stroke(228,255,77);
        
       
      
        ellipse(circleX, 80, 50, 50);
        ellipse(circleY, 80, 50, 50);
        
   
        ellipse(circleX, 160, 50, 50); 
        ellipse(circleY, 160, 50, 50);
       
       
        ellipse(circleX, 240, 50, 50);
        ellipse(circleY, 240, 50, 50);
        
        
        ellipse(circleX, 320, 50, 50);
        ellipse(circleY, 320, 50, 50);
        
        
        ellipse(circleX, 400, 50, 50);
        ellipse(circleY, 400, 50, 50);
        
        
        
        if (circleX ==10);
         for (int i = 0; i < 100; i++) {
        float r = random(-500, 500);
       
        fill(random(238),75,131);
        rect(r+i,r+i,r+i,r+i);
        
        }
     
      }
    }
  }
}

void keyPressed() {
  option++;
  if (option>5) {
    option=1;
  }
}


Flappy Bird:

var bird;

var pipes = []; // create an array


function setup() {

  createCanvas(640, 480);

  bird = new Bird();

  pipes.push(new Pipe());

}

function draw() {

  background(0);

  bird.update();

  bird.show();


  for (var i = pipes.length - 1; i >= 0; i--) {

    pipes[i].show();

    pipes[i].update();


    if (pipes[i].hits(bird)) {

      console.log("HIT");

    }

    if (pipes[i].offscreen()) {

      pipes.splice(i, 1);

    }

  }

  bird.update();

  bird.show();

  if (frameCount % 75 == 0) {

     pipes.push(new Pipe()); 

  }

}

function keyPressed() {

  //if the spacebar is pressed:

  if (key == ' ') {

    bird.up();

    //console.log("SPACE");

  }

}



Fireworks:

//fireworks

var particles = [];

//different size fireworks

var burstMin = 10;

var burstMax = 100;

var mainColor= 100;


let x, y;

let down;

let stars = [];


function setup() {

createCanvas(1000, 500);


}


function draw() {

  background(0,0,51);



//small mountain

  fill(102, 180, 255);

  strokeWeight(0);

  triangle(900, 300, 1100, 500, 680, 500);

  

  fill(213, 212, 255);

  strokeWeight(0);

beginShape();

vertex(900, 300);

vertex(1000, 400);

vertex(920,390);

vertex(870,360);

vertex(850,370);

vertex(790, 400);

endShape(CLOSE);


//big mountain

  fill(102, 200, 222);

  strokeWeight(0);

  triangle(100, 180, 500, 500, -260, 500);

  

  fill(231, 241, 255);

  strokeWeight(0);

beginShape();

vertex(100, 180);

vertex(225, 280);

vertex(145, 250);

vertex(100, 235);

  vertex(60, 260);

  vertex(0, 270);

endShape(CLOSE);


  //moon

  {

    color = map(mouseX, 0, 255, 0, 100);

  

  if(mouseX = 300) {

    noStroke();

    fill(color);

    ellipse(300,100,200,200);

  }

}



//ground

fill(76,153,0);

rect(0,480,1000,20);





  //particle dispursement and size

 for (var i = particles.length - 1; i >= 0; i--) {

    particles[i].update();

    particles[i].draw();

    

    if (particles[i].rad < 0 || particles[i] < 0) {

      particles.splice(i, 1);

    }

  }

}




function mousePressed() {

  var count = floor(random(8,32));

  for (var i = 0; i < count; i++) {


    //*UPDATED* from class 3/23

    var pos = new p5.Vector(mouseX, mouseY);

    var vel = new p5.Vector(random(-5,5), random(-5,5));

    var p = new Particle(pos, vel);

    particles.push(p);

  }

}


//partical contructor

function Particle(pos, vel) {

    this.pos = pos;

    this.vel = vel;

    this.acc = new p5.Vector(0, 0.3);

    this.life = this.maxLife;

    this.rad = random(6,10);

    this.mainColor = random(175,255);

}



//p5js reference particle system var name

Particle.prototype.update = function() {

    this.life--;

    this.pos.add(this.vel);

    this.vel.add(this.acc);

  

    //dots get smaller as they liuke get further away

    if (frameCount % 5 === 0) { this.rad--; this.a--; }

    

}

//p5js reference particle system var name

Particle.prototype.draw = function() {

    push();

    noStroke();

    fill(this.mainColor);

    ellipse(this.pos.x, this.pos.y, this.rad*2, this.rad*2);

    pop();

}

Comments

Post a Comment

Popular posts from this blog

Logo Project

Image
The prompt for this project was to design a logo for a fictional company or organization of my choice using Adobe InDesign. The logo had to effectively convey the brand identity and values of the company. I considered the design's color scheme, typography, and symbolism. In addition, I explored different creative elements and techniques within Adobe InDesign and Illustrator to bring the logo to life. Concept: My concept for the logo started with brand identity. I wanted to create a smartphone application that allowed users to social network based on their astrological compatibility. That is where the name "moony" came to life. Being the name of a playlist I had at the age of 12, I think that the name brought personal meaning as well as life to the brand I intended to create. After final thoughts and brainstorms I decided that for the logo, the name of this brand was to be illustrated solely out of astrological sign symbols. Since a lot of astrology signs (Virgo, Taurus, P...
Read more

Print Menu

Image
The mission statement for this project was to effectively design  a print menu for a trendy café using Adobe InDesign. I was prompted to include sections for appetizers, main courses, desserts, and beverages. I made sure to incorporate high-quality images, clear and readable font choices, and a cohesive color scheme that reflects the café's atmosphere. Most importantly, my goal was to work on organizing the menu in a visually appealing layout that enhances the overall dining experience for customers. Brainstorming and wireframing: I decided that I wanted to create my screen menu around the concept of a Canadian cafe and bistro that one would picture eating at, let's say, a cozy and discrete walk-in restaurant in the heart of Soho, NY. That being said, I pictured the theme of this menu being a very minimalistic and contemporary design with an emphasis on color themes of a cozy warm fall afternoon. Although this restaurant would be open all year round, I had a lingering thought o...
Read more