Assignment Two

During this assignment I focused mainly on Boolean expressions .  The example illustrates color changes with the location of mouseX and width/height.  I experimented with testing multiple conditions, “else if”.  Ploughing through the Assignments, but will tinker with details as I move on.  Please see the examples I have been working on here:

 
My BLOG
 
Assignment Two:

 

 

Assignment 2

ok…just catching up from a few long weeks of work;

I feel like my 1.5 year-old-babyGirl, to whom we’ve recently introduced magic markers (erasable, duh)…

assignment2

 

happy to complete the small game

 

happy to complete the simple game

while mouse press the frog will jump up and try to avoid the car,

if it was hit by the car, it will flash to warn you .

try to press the mouse in a right time and avoid the car successfully.

here is the link

http://www.openprocessing.org/visuals/checkVisual.php?visualID=40671

the assignment 3 will summit later

 

Adding conditionals

I made a few mistakes in assignment one – namely I did aspects of assignment 2 in assignment one… Oh well… It made getting assignment 2 done even though I have been super busy and out of town!

I also noticed that there was a lot of extraneous code in my assignment one that could be deleted and still maintain the original functionality of my animated rings.

I know that with such small programs optimization is not really necessary, but I think it’s good to go over old code to clean it up. It makes it easier to re-use the code in the future, which can be really important when you are making money as a developer. Anything you can do to reduce the amount of work you need to do for a project is a good management skill.

I take Steve Job’s quote to heart: “Work smarter, not harder” – so far it has served me well.

OK, so for Assignment 2 I re-factored my code to be more efficient as well as added a conditional such that the direction of rotation will reverse depending on where the mouse it located within the canvas.

Assignment 2 (aka unexpected token: int)

 

Well this week was a challenge, and even though I spent a few extra days trying to work out the code, I still couldn’t quite get to where I wanted with this one. After last week’s class, I’m pretty sure creating some functions with this week’s assignment will help me simplify things and focus on functionality. So I’m going to just move on at this point and hope that I can work it out.

You can access the sketch here:

If you move your mouse to each quadrant, the background colour will change. If you click the mouse, the image will respond.

Process
First, I created variables for most of the coordinates that dictate the shape and size of the structure. Using locations relative to the screen size was a revelation. Makes much more sense, especially for a piece like this that relies so much on symmetry.

At this stage, code like this:

became code like this:

From there, I tried to create specific functionality, but ran into some issues along the way described further below. Ultimately, I ended up putting in the conditional that changes the background depending on mouse location, and tweaked the response to the mousePressed function to make it a bit more interesting.

Some issues I encountered:

Concept vs reality
Well, this was definitely the biggest challenge. What I really wanted to do with this sketch was have the series go through a series of frames after the mouse was pressed, or at least toggle between two states. I tried several things to achieve this, including setting up a boolean button that would toggle or trying to add a loop that counted through 100 frames when the mouse was pressed. For some unknown reason, it didn’t seem to work. I could only get one frame to run after the mouse was pressed.

I was able, however, to set this up within the draw function as a conditional, rather than as an outcome of the mousePressed function (I think this actually makes the code less clean than the previous version, but it’s still an interesting process to work through).

You can also see my attempt to use a boolean conditional to make the sketch toggle between states in the code.

Infinite loops
I definitely set up an infinite loop when i tried to delay the number of frames that occurred after mousePressed. This is the code I used:

int count = 0;
count = count + 1;

while (count < 101)

and then I put what I wanted to happen. Every time I ran the sketch it would freeze and not close properly. Any thoughts here would be greatly appreciated.

Global variables
For some reason, when I declared the value of the variables before “void (setup)”, the whole image got distorted.

That said, I just tried it again with a draft version of the sketch, and it seemed to work fine. It must be the ghosts of processing past…

Very excited to get this all worked out in the next assignment (naive optimism still intact….).


 

Buttons!

So this week things became way more challenging for me! I realized that I am spending most of my time working on the exercises from the book but because I’ve been writing everything from scratch to practice, it’s been taking forever! so I am left with less time to work on the assignment. Also I really wanted to  get get all the code in the exercise to work so I stay with it until I crack the code. It’s becoming more challenging but I am still enjoying (although I had some frustration points in the past few days!) Also I prepared some questions for the practice class with Dustin but it unfortunately got cancelled,so I still have questions left to be answered.

I am not quite clear about loops yet, I really don’t get the For loop , the while loop makes a bit more sense. For this assignment I really wanted to make my snowflakes to randomly fall down the ground using mousePress and bounce back but I gave up on the idea for now, and decided to play with buttons (which I have good memory from working with Flash).

Originally I hoped to make a button that makes random white snowflakes and another one that make them colourful but for some reason when I activated too buttons only one managed to work. In order to try to make both work, I tried to make a rollover state but it was conflicted with the mousePress state – which made the screen pretty funky 🙂

Eventually, I decided to make one button that activates the snow and another one in a shape of a lightbulb that changed the background to black. My intention was to continue pressing on the Snow button when the background changes to night but again- my two buttons didn’t work together. I really struggled with it and I have a feeling that it’s a very simple solution so if anyone has an idea on how to make both work, please let me know!!!

Here is my SnowFlake button one

http://www.openprocessing.org/visuals/?visualID=38963

I also really wanted to make the Snowman’s hand move up when the button is clicked. The problem was that it created a double set of hands and I couldn’t get rid of the hands that are pointing down since they are in the void draw function. I tried to make a conditional statement that would set the hands pointing up when the button is pressed and otherwise pointed down, but it didn’t work.

 

 

 

 

 

 

 

 

 

and here is the LightBulb button

http://www.openprocessing.org/visuals/checkVisual.php?visualID=38964

 

please help to combine both functions!

assignment02_jump frog

i had upload it have hour ago, but i just found it fail to upload.

I tend to design the frog jump to avoid the car.

I still working on the mouse click version.

It could became a funny game. But still have some problem to solve out.

the second version is coming.

here is the link

http://openprocessing.org/visuals/checkVisual.php?visualID=38864

here is the code

float carx=0;
float x=300;
float y=300;
float speed = -2;
float gravity = -0.009;

void setup() {
  size(600,600);

}

void draw() {
  background(255,0,0);

 //Draw a car
 stroke(0);
 strokeWeight(2);
 fill(100,100,255);
 rectMode(CENTER);
 rect(carx,340,100,50);
 fill(255,255,0);
 ellipse(carx-30,370,30,30);
 fill(255,255,0);
 ellipse(carx+30,370,30,30);
 carx=carx+1;

 if (carx>width+50) {
   carx=0;
 }

 //set CENTER mode
 ellipseMode(CENTER);

 //Draw Frog's feet
 stroke(110);
 strokeWeight(10);
 line(x-20,y+30,x-20,y+80);
 line(x+20,y+30,x+20,y+80);

 //Draw Frog's body
 noStroke();
 fill(225,252,0);
 ellipse(x,y,100,110);
 fill(255);
 ellipse(x,y-20,70,120);

 //Draw Frog's head
  noStroke();
  fill(225,252,0);
 ellipse(x,y-75,200,100);

 //Draw Frog's eyes
  noStroke();
  fill(225,252,0);
 ellipse(x-100,y-100,70,70);
 ellipse(x+100,y-100,70,70);

 //Draw Frog's eyes' ball
  stroke(110);
  strokeWeight(1.5);
  fill(255);
 ellipse(x-100,y-100,50,50);
 ellipse(x+100,y-100,50,50);
 fill(110);
 ellipse(x-90,y-90,20,20);
 ellipse(x+90,y-90,20,20);

 //Draw Frog's highlight
  noStroke();
  fill(255);
 ellipse(x,y-100,40,20);

 //Draw Frog's mouth
 stroke(110);
 strokeWeight(3);
 noFill();
 arc(x,y-80,100,50,0,PI);

if (carx > 200) {
   y=y+speed;
   speed=speed-gravity;
} else {
   y=300;
   speed = -2;
 } 

 //Draw a ground line
  stroke(255);
 strokeWeight(10);
 line(0,390,width,390);
  }

Chapter 2 Assignment: Better to Upload an Epic Fail Than Nothing at All

Shelby: Oh No!

http://www.openprocessing.org/visuals/?visualID=38854

Wow. Ok. So after spending another 5 hours in front of my computer again today trying to figure out where I might be getting lost in Processing, I am (temporarily) resigning my efforts for the day and uploading this sorry “character” in evolution: Shelby. He/She/It…whatever, doesn’t look like anything I initially had in mind, doesn’t resemble anything “identifiable” to human knowledge and most certainly doesn’t look like any sort of response to our Chapter 2 assignment.

As I’ve been going though the Learning Processing textbook (reading, highlighting, taking initial notes in the PDF, taking second-round notes in the PDF, taking notes in my moleskin notebook, jotting notes and figures on my graph paper and looking at the provided examples) I seem to grasp a concept, then hit another area in the text where I get completely confused all over again. Possibly my greatest frustration is that I can feel it…I am so close to getting this but then I find myself in a state of confusion. I wonder if my near-obsessive desire to learn this is getting in my way. I am also frustrated with knowing that I have an idea I want to get on the “page,” but I can’t translate it into the system. I am seriously looking forward to the next Processing help-lab with Dustin–I think I need to get some serious outside help to assist me in making sense of all of these algorithms if I can’t come to some breakthrough with Processing this weekend.

As a final note: although I am experiencing temporary near-breakdown inducing frustration, I am jumping back into working with Processing tomorrow with a rejuvenated mind and an ambition that not even Processing code can stop.

CODE:

//Draw Shelby’s head//
stroke(0) ;
fill(10, 0, 255) ;
ellipse(mouseX+20, mouseY+20, w+60, h+80) ;

//Dray Shelby’s body//
stroke(0) ;
fill(155, 0, 155) ;
rect(mouseX, mouseY, bw, bh) ;

//Draw Shelby’s Legs//
stroke(0, 191, 191) ;
line(70, 145, 70, 200) ;
line(90, 145, 90, 200) ;
line(110, 145, 110, 200) ;
line(130, 145, 130, 200) ;

if (mouseX < width*2) {
fill(30, 110, 70, 90);
ellipse(mouseX,mouseY,width/2,height);
}

stroke(0) ;
println(“Shelby Likes Personal Digital Space”) ;
}

Assignment #2

So, i’m back to my 4 smileys and got to animate them using variables, and conditionals.

Each one of these characters feel different… Roll over on each one, and you’ll see that:

The red guy is partying, the blue guy gets dizzy, and the orange one is quite shocked, and the green guy leaves the party…

I used a lot of variables, some of them I didn’t even use, but kind of kept them there… Each time I was animating, I had to make sure the animation was happening in the right quadrant.

The blue guy’s eyes should get smaller and disappear…i’m probably missing something since they grow back and seem to explode but I kept it since it looked ok…Also, the orange face spots don’t seem to bounce at the same height…although I have exactly the same numbers on both spots.

Conditionals are actually fun, you get to move the mouse cursor and trigger animations.

Here it is, click on the image below and it will get you to the actual sketch!

Assignment 2 – Robot going crazy

It took much more time to understand lesson two compared to the first. However I figure out there is so much more interactions we can do now after just one week and I decided to continue working on my robot. Currently I still got some difficulty in dealing with the buttons but overall I’m satisfied with what I have learnt from this lesson.

Chapter 4 & 5 Variables & Conditional

This interactive is in response to exercise 5-10, I make my robot jumping around and bounce off whenever he reaches the corners or bottoms of the screen. I also try to create a “bouncing” effect from changing the background color. I think the challenge was to make his legs and hands point to the same direction as he jumps (to create smoother actions), and also make the robot face change expression whenever he almost reaches the bottoms of the screens. I used variables and a lot of if statements to deal with these problems. I highlighted the codes I came up with in the picture below.

Sequence screenshots of the robot when he hits the edge of the screen

This is the link to the exercise

After he jumps around for a while my robot goes crazy. By being crazy I mean he would move up and down toward the y axe and appear randomly on the x axe while his background color change randomly. I actually found it’s easier to code this action compared to the bouncing one. Except here I added the mousePressed function to control his craziness. Pressing the mouse can make the robot stops moving around and following the direction of the mouse until it is pressed again and the robot would go back to be crazy.

Four random screenshots

Here is the link

Chapter 6 Loops

I follow example 6-11 to multiply my robots. However instead of using just 1 loop to replicate the robots towards x axe, I use another loop cover this loop to copy them towards y axe as well (I learn this technique from doing exercise 6-8). The result looks pretty nice with all robots standing neatly within the screen and all align! I’m very happy with it.

Below is the screenshot

View the code and the file here.

——————–

Finally I finish all the exercises for this lesson. It’s such a long one but totally worth it! I feel myself improving a lot and very excited for the upcoming classes.