Skip to main content

Beginning P5.JS

    We have finally begun working with P5 in javascript. Today was the first day of just messing around with the library and its different capabilities. I just started by messing with colors and different shapes and making them move across the screen. My first drawing will be posted below, it looks like a fun mess. But that's the best way to find ones way around a new program.
Source Code:
function setup() {
    createCanvas(600, 600);
  }

var i = 0; 
var a = 0; 

//RGB values to start at 
var r = 25; 
var g = 255; 
var b = 100; 
var reverse = true; 

  function draw() {
    strokeWeight(1); 
    background(r,g,b);
    fill(255,255,255);
    //triangle(10, 20, 40, 50, 70, 40); 
    triangle(100, 40, 30, 50, 60, 40); 
    triangle(0, 0, 100, 100, 500, 50); 

  
    strokeWeight(5); 

    quad(100, 100, 200, 400, 100, 300, 0, 200);
    strokeWeight(1);   
    rect(i,100,a,100);
    rect(i,100,50,50,15,15,15,15); 

    fill(255-a, 255-g, 255-b); 
    //shape of H
    beginShape(); 
      vertex(0+a, 350); 
      vertex(10+a, 350); 
      vertex(10+a, 330); 
      vertex(20+a, 330); 
      vertex(20+a, 350); 
      vertex(30+a, 350); 
      vertex(30+a, 300); 
      vertex(20+a, 300); 
      vertex(20+a, 320); 
      vertex(10+a, 320); 
      vertex(10+a, 300); 
      vertex(0+a, 300);
      vertex(0+a, 350); 
    endShape(); 
    
    //bottom of I
    beginShape(); 
      vertex(40+a, 350); 
      vertex(40+a, 330);
      vertex(50+a, 330); 
      vertex(50+a, 350); 
      vertex(40+a, 350);
    endShape(); 
    
    //dot the I!!
    beginShape(); 
      vertex(40+a, 320); 
      vertex(40+a, 310); 
      vertex(50+a, 310); 
      vertex(50+a, 320); 
      vertex(40+a, 320); 
    endShape(); 
 
    if (i == 600)
    {
      i = 0; 
    }
    if (a == 100)
    {
      //reverse = true 
      a=0; 
    }
    else{
      //reverse = false; 
    } 
    if (b == 255){
      resetColor(); 
    }

    
    i++; 
    a++;
    r++; 
    g--; 
    b++;
    
  }
  
  function resetColor(){
    r = 25; 
    g = 255; 
    b = 100; 
  }
Labels:

Comments

Post a Comment

Popular posts from this blog

The Art of Game Design: Chapters 6 and 7

    The Art of Game Design  continues to be an intriguing read that surprises me in new ways with each chapter. Chapter 6 focuses on the importance that theme has on games and how theme should be treated in a game's design. Theme isn't just something that the player learns from the game, it is the thought or idea that the game should try to represent in every possible way it can. This chapter covers two forms of themes, experienced and resonant themes. Experienced themes are just that, the themes that are experienced by the player through the game's story and setting, however resonant themes are a bit different. Resonant themes are the ones that are below the surface and aren't really experienced but have some deep truth that parallels those truths that the player holds. These are the themes that resonate deeply with players and make a story truly meaningful to a player's core.      To people who do not really play video games, they can be easily seen as a...
Post a Comment
Read more

Magazine Columns - Backbone of Every Good Layout Response

There are many aspects that must be considered when designing a magazine. The content is very important, but one aspect of the design that no one really thinks about is the layout of the magazine. The grid is how images and text are placed around the page. It can determine the size of objects and how much white space is between each element on the page.  Most text in magazines appears to be set out into 3 columns. However, one of the most common layouts utilizes 12 columns in order to appear to have 3 columns. This gives much more layout control over what is shown and how it is shown. Its very surprising that a 12 column layout results in 3 columns of main text. However, the goal of this is so that it is modular. In computer science, one of the most important things that you consider when coding is to try and make your code modular. When you can use the same layout on every page, it means that it is dynamic and interesting since each page will feel like it follows the same rules. T...
Post a Comment
Read more

The Art of Game Design: Chapter 8 and 9

    Chapter 8 in the book The Art of Game Design  is all about the actual production process that is followed after brainstorming is complete and a team has an idea for what game they will be developing. One of the topics that this chapter focuses on are the ideas of software development, waterfall and a more circular idea designed by Barry Boehm. As a computer science major, I have encountered both of these ideas through my time in college and in the busniss world. Both theories have their positives and negatives, but the idea of "waterfall development" is a much stricter way of approaching software development when compared to Boehm's approach.     With a waterfall approach, this does not leave any room to go back and revisit the original idea and add or remove core features. This approach was used in the development of many old forms of windows, which also coincided with how the software was sold. For example, Microsoft's windows operating systems. Win...
Post a Comment
Read more