Category Archives: Labs

Color Changing Characters

This code is a simple extensions of a previous assignment. When the user clicks the mouse, the characters or elements must change color. I took my previous bird sketch and implemented this. Overtime the mouse is clicked, the birds change color to random red blue green values.

 


function setup() 
{
 createCanvas(1000,1000); 
 bird0 = new Bird();
 bird1 = new Bird();
 bird2 = new Bird();
 bird3 = new Bird();
}

function draw() 
{
 noStroke();
 background(200,200,200);
 bird0.display();
 bird1.display();
 bird2.display();
 bird3.display();
 changec = false;
 
 
}

function Bird()
{
 this.mycol = color(random(0,255), random(0,255), random(0,255)); //Color of the bird
 this.x = random(0, width); //X and Y location of Bird
 this.y = random(0, height); 
 this.speedx = random(3); //Speed for X and Y planes
 this.speedy = random(3);
 this.direction = 1; //Defines direction for the bird
 this.size = random(10,80); //How big the bird will be in pixels (scaled so may not be accurate measurement)
 this.wingstate = 0; //Indicates if the wing is going up or down.
 this.wingmax = size; //Indicates the maximum distance the wing tip should be from the body
 this.down = true; // boolean value to indicate if the wing is currently going up or down.
 
 this.display = function()
 {
 fill(this.mycol);
 
 ///////////Sets direction of bird relative to mouse location
 if(mouseX > this.x)
 this.x = this.x+ this.speedx;
 else
 this.x = this.x - this.speedx;
 
 if(mouseY > this.y)
 this.y = this.y + this.speedy;
 else
 this.y = this.y - this.speedy;
 
 
 ///////////Draws the Birds

 ellipse(this.x, this.y, this.size*2, this.size*0.5);
 
 triangle(this.x+this.size/2*this.direction, this.y+this.size/6, this.x+(this.size+(this.size/3))*this.direction,this.y + this.size/4, this.x+this.size/1.5*this.direction, this.y-this.size/4.8);
 triangle(this.x, this.y+this.size/6, this.x+(this.size+(this.size/2))*-this.direction, this.y + this.size/2, this.x+this.size/2*-this.direction, this.y-this.size/4.5);
 
 /////////// Adjust wing position over time
 if(this.down)
 this.wingstate = this.wingstate + 2;
 else
 this.wingstate = this.wingstate-2;
 
 if(this.wingstate > this.size)
 this.down = false;
 if(this.wingstate < this.size *-1)
 this.down = true;
 
 if(this.x> mouseX)
 this.direction = -1;
 if(this.x < mouseX)
 this.direction = 1;
 
 triangle(this.x - (this.size/2), this.y, this.x+(this.size/2), this.y, this.x-(this.direction*50), this.y+this.wingstate);
 }
 
 /////////// When called, the bird object will change the color to something random for RGB values
 this.changecolor = function()
 {
 this.mycol = color(random(0,255), random(0,255), random(0,255));
 }
}

function mouseReleased()
{
 bird0.changecolor();
 bird1.changecolor();
 bird2.changecolor();
 bird3.changecolor();
}

Advertisements

Mouse Following Characters

New Media 100 lab assignment: Make a character that follows the mouse. I created a flock of birds for this assignment

function setup() 
{
 createCanvas(1000,1000); 
 bird0 = new Bird();
 bird1 = new Bird();
 bird2 = new Bird();
 bird3 = new Bird();
}

function draw() 
{
 background(200,200,200);
 bird0.display();
 bird1.display();
 bird2.display();
 bird3.display();
 
 
}

function Bird()
{
 this.x = random(0, width);
 this.y = random(0, height);
 this.speedx = random(3);
 this.speedy = random(3);
 this.direction = 1;
 this.size = random(10,80);
 this.wingstate = 0;
 this.wingmax = size;
 this.down = true;
 
 this.display = function()
 {
 if(mouseX > this.x)
 this.x = this.x+ this.speedx;
 else
 this.x = this.x - this.speedx;
 
 if(mouseY > this.y)
 this.y = this.y + this.speedy;
 else
 this.y = this.y - this.speedy;
 
 fill(0);
 ellipse(this.x, this.y, this.size*2, this.size*0.5);
 
 triangle(this.x+this.size/2*this.direction, this.y+this.size/6, this.x+(this.size+(this.size/3))*this.direction,this.y + this.size/4, this.x+this.size/1.5*this.direction, this.y-this.size/4.8);
 triangle(this.x, this.y+this.size/6, this.x+(this.size+(this.size/2))*-this.direction, this.y + this.size/2, this.x+this.size/2*-this.direction, this.y-this.size/4.5);
 
 if(this.down)
 this.wingstate = this.wingstate + 2;
 else
 this.wingstate = this.wingstate-2;
 
 if(this.wingstate > this.size)
 this.down = false;
 if(this.wingstate < this.size *-1)
 this.down = true;
 
 if(this.x> mouseX)
 this.direction = -1;
 if(this.x < mouseX)
 this.direction = 1;
 
 triangle(this.x - (this.size/2), this.y, this.x+(this.size/2), this.y, this.x-(this.direction*50), this.y+this.wingstate);
 }
}

Make an image

//
//Make a picture with shapes at least 25.
//


var mousex;
var mousey;
var pmousex;
var pmousey;

var flipper = 1;
var flexThresh = 50;
var flex = -flexThresh;

function setup() 
{
 //
 createCanvas(1000,1000);

 
}

function draw() 
{
 background(50);
 fill(100,0,0, 5);
 rect(0,0, width, height);
 var cx = width/2;
 var cy = height/2;
 strokeWeight(1);
 stroke(0,100,255);
 noFill();
 
 if(flex > flexThresh*2 || flex < -flexThresh)
 flipper = flipper*-1;
 
 flex = flex + 1*flipper;




 for(var i = 0-200; i <height+200; i)
 {
 bezier(0, i, cx/2, i + flex, cx+cx/2, i+flex, width, i);
 i = i+10;
 }
 
 for(var i = 0-200; i < width+200; i)
 {
 bezier(i, 0, i+flex, cy/2, i + flex, cy+cy/2, i, height);
 i = i +10;
 }
 
 
 for(var i = 100; i < height; i)
 {
 line(cx-i, cy+i+flex, cx+i, cy+i-flex);
 line(cx-i, cy+i-flex, cx+i, cy+i+flex);
 i = i + 10;
 }
 
 for(var i = 0; i < cy - 100; i)
 {
 line(0+i, i+flex, width-i, i-flex);
 line(0+i, i-flex, width-i, i+flex);
 i = i + 10;
 }

 for(var i = 0; i < cx-100; i)
 {
 line(i, height-i+flex, i, i+flex);
 line(i, height-i-flex, i, i-flex);
 i = i + 10;
 }
 
 for(var i = 0; i < cx; i)
 {
 line(i+cx+100, cy-i-flex-100, i+cx+100, cy+i-flex+100);
 line(i+cx+100, cy-i+flex+100, i+cx+100, cy+i+flex-100);
 i = i+ 10;
 }
 

 for(var i = cy-50; i < cy + 50;i)
 {
 line(0, i, width, i);
 i = i+5;
 }
 
 for(var i = -200; i <width + 200; i)
 {
 line(i, cy-50-flex, i+200, cy+50+flex);
 i = i +5;
 }
}

Frogger In Scratch

Youtube link to video of game being played.

In this NMD 100 lab assignment, we were tasked to create a Frogger type game. It could be themed, so I chose to go midivil with this. The scripting for this was very simple and straightforward, as this is a task that I have done before.

Each object had its own scripts to turn it on and off at the appropriate time. The dove was motivated using the WASD keys, but any keys could have been used. I employed lists to store speeds so that the dove can reference it in cases of the rugs for added motion.

The goal of the game is to reached the princess on top of the castle. The dove must avoid the invading guards, and navigate the rugs of annoyance. All sprites and graphics are from scratch itself. It is my philosophy to use what is on hand, and find creativity within constraints.

For a beginner programmer, this can pose a few challenges that make the student think about how to do certain things. Creating a collision detection system is probably the hardest part. Scratch does away with that very handily with their touch functions. The second challenge is getting the dove to move with rugs, or the frog with the logs.

For me, this was a simple project. Despite my personal feelings on frogger, the ability to theme it was a welcomed offer.

 

New Media Trivia

In this NMD 100 lab project, the goal was to construct a trivia game using the Scratch programming platform.

With this project, I used lists to store my data. This allowed me to use very few elements that adapted as the game progressed. This is a very simple example of a basic multiple choice game.

Pong in Scratch

Pong in Scratch – Video

Pong in Scratch – The Game 

In this project for NMD 100, our goal was to recreate Pong, the classic ball and paddle game. This was a simple project that required some basic game stylized code. Initially I started out with the standard mechanics of the ball and paddle. I was able to quickly add in a power up type system that allowed the player that last bounced the ball to gain a speed advantage.

Upon going through some stock background imagery in the builder, I discovered an X,Y plane. This gave me the idea of giving each of the players the ability to defend the X bounds, or the Y bounds. Thus, this expanded out how much interactivity the players had, and gave the game a different twist.