View source for CSC103 Processing Lab -- Part 2

--[[User:Thiebaut|D. Thiebaut]] 20:23, 27 February 2012 (EST)<br />
Revised --[[User:Thiebaut|D. Thiebaut]] ([[User talk:Thiebaut|talk]]) 10:49, 10 October 2017 (EDT)
----


<br />
<bluebox>
This is Part 2 of a lab on the Processing language.  You can find Part 1 [[CSC103_Processing_Lab_--_Part_1 | here]].  There is a moodle submission for this lab.   See Challenge #3.
</bluebox>
<br />
__TOC__
<br />
<br />
=Testing Conditions with the '''if'''-Statement=
<br />

==Testing the Mouse Position==
<br />

* Let's change the color of the circles being drawn by our last sketch so that the circles are <font color="red">red</font> when they appear in the '''left''' side of the window, and <font color="orange">orange</font> when they appear in the '''right''' side of the window.

* This is done by using and '''if''' statement, with its '''else''' counterpart.  The pseudo-code for doing this reads as follows:

 
      '''if'''  ( mouseX is in the left half ) {
             &nbsp;&nbsp;&nbsp;&nbsp;''// set the color of the circle to red''
      }
      else {
             &nbsp;&nbsp;&nbsp;&nbsp;''// set the color of the circle to orange''
      }


* Writing this in Processing, we get

<br />
<source lang="java">
void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  //background( 200 );
  if ( mouseX < 240 ) {
      fill( 231, 47, 39 ); // red
  }
  else {
      fill( 255, 200, 8 ); // orange
  }

  ellipse(mouseX, mouseY, 80, 80);
}
</source>
<br />

* Try it!
<br /><br />
{| style="width:100%; background:silver"
|-
|
===Variation #1===
|}
[[Image:QuestionMark1.jpg|right|100px]]
<br />
See what happens when you replace '''mouseX''' with '''mouseY''' in the '''if statement'''...
<br /><br />
<br /><br />
<br /><br />

==Testing If the Mouse Button is Pressed==
<br />

* Processing uses a ''predefined'' ''boolean'' variable, i.e. a variable that contains either '''true''' or '''false''' to indicate whether the user is currently pressing the left mouse button or not.
* We can test for this condition easily:

<code><pre>

    if ( mousePressed == true ) {
 
           &nbsp;&nbsp;&nbsp;&nbsp;// put code here to be executed if the button is pressed

    }
    else  {

          &nbsp;&nbsp;&nbsp;&nbsp;// put code here to be executed if the button is not pressed 

    }

</pre></code>

* Let's use this to change the color of the circle depending on whether the mouse is pressed or not:


<br />
<source lang="java">

void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  //background( 200 );

  if ( mousePressed == true ) {
      fill( 231, 47, 39 ); // red
  }
  else {
      fill( 255, 200, 8 ); // orange
  }

  ellipse(mouseX, mouseY, 80, 80);
}
</source>
<br />
* Try it!
<br />
<br />

{| style="width:100%; background:silver"
|-
|

===Challenge #1===
|}
[[Image:QuestionMark4.jpg|right|100px]]
<br />
Make the program switch between a circle and a rectangle as the user presses the mouse button.  For example, the program will display a circle if the mouse '''is not pressed''', and will display a rectangle if the mouse '''is pressed'''.
<br /><br />

{| style="width:100%; background:silver"
|-
|
===Challenge #2===
|}
[[Image:QuestionMark1.jpg|right|100px]]
<br />
Make your program behave the opposite way: it will display a circle if the mouse '''is pressed''', and display a rectangle if '''it is not'''.  
* Hints:  You can use "!=" instead of "==" to test if some quantity is ''not equal'' to something.
<br /><br />

{| style="width:100%; background:silver"
|-
|
===Challenge #3===
|}
[[Image:QuestionMark5.jpg|right|100px]]
<br />
Make the program switch between a <font color="red">red circle</font> and an <font color="orange">orange rectangle</font> as the user presses the mouse button.  The program will keep on displaying several shapes, and you will simply control their color with the mouse bouton.  Make sure you include your name on the graphic window, and in the code of your sketch.  (See Youtube video below for an example of what your sketch should do.)
<br />
<br /><br />
<center>
<videoflash>U0lbe3PI7i4</videoflash>
</center>
<br /><br />

<!--
{| style="width:100%; background:silver"
|-
|

===Challenge #4===
|}
[[Image:QuestionMark6.jpg|right|100px]]
<br />
Make the program switch between random wide flat rectangles and random tall skinny rectangle as the user presses the mouse button.
-->
<br /><br />

<br />
<br />

=Moodle Submission=
<br />
Submit a screen shot of your graphic window with circles red circle and orange rectangles.  The submit section is labeled "Processing Lab 2."   You have until Thursday 10/19, 12:00 p.m. for the submission.

This is the only submission you need to do for Lab 2, but do not stop here.  Keep on going till the end of the lab.  
<br />

=Previous Mouse Position=
<br />

* Processing keeps track of where the mouse currently is by its '''mouseX''', and '''mouseY''' coordinates, but also where it was the last time the function '''draw()''' was called, and this old position is kept by Processing in two variables called '''pmouseX''' and '''pmouseY'''.   
* We can use this feature to draw lines between the successive positions of the mouse. 
* Try this code:

<br />
<source lang="java">

void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  //background( 200 );

  line( mouseX, mouseY, pmouseX, pmouseY );
}
</source>
<br />
* You can now '''draw''' with Processing!
<br />
<br />

{| style="width:100%; background:silver"
|-
|

===Challenge #4===
|}
[[Image:QuestionMark8.jpg|right|100px]]
<br />
Modify the program so that the mouse ''draws'' the line only when the mouse button is pressed.
<br /><br />
Note: if you want to make your line ''fatter'', call the function ''strokeWeight( 10 )'' inside ''draw()'', just before calling the ''line()'' function.  You may use other numbers besides 10.

<br />
<br />
<br />

=Another ''Control'' Structure: Loops=
<br />

* Study the sketch below taken from [http://www.openprocessing.org/visuals/?visualID=47768 openprocessing.org], and then run it.

<br />
<source lang="java">

void setup() {
  size( 400, 400 );
  smooth();
}
 
void draw() {
   
  background(200);
   
  // count from 20 to 380 jumping 20 each time.
  for( int x = 20; x < 400; x = x + 20 ) {
     
    // and draw a circle in that position, on a horizontal line.
    ellipse( x, 200, 15,15 ); 

  }
}

</source>
<br />
* Notice that the sketch creates 19 circles on a horizontal lines.
<br />
<br />

{| style="width:100%; background:silver"
|-
|

===Challenge #5===
|}
[[Image:QuestionMark9.jpg|right|100px]]
<br />
* Modify your sketch so that it displays the circles vertically, as shown below (you can add a call to ''fill( 250, 200, 8 )'' in the loop to create the orange fill color):
<br />
<br />
<center>[[Image:CSC103VerticalOrangeCircles.png|300px]]</center>
<br />
* Try generating this pattern:
<br />
<br />
<center>[[Image:CSC103DiagonalOrangeCircles.png|300px]]</center>
<br />
{| style="width:100%; background:silver"
|-
|

===Challenge #6===
|}
[[Image:QuestionMark10.jpg|right|100px]]
<br />
* Make the mouse control how many circles are displayed, so that no circles can be shown on the ''right''-hand side of the mouse, as illustrated below.   As the mouse moves to the right, more circles are shown.  As the mouse moves to the left, fewer.
<br />
[[Image:CSC103DiagonalOrangeCirclesMouse1.png|200px]] &nbsp;
[[Image:CSC103DiagonalOrangeCirclesMouse2.png|200px]] &nbsp;
[[Image:CSC103DiagonalOrangeCirclesMouse3.png|200px]] &nbsp;
<br />
<br />
{| style="width:100%; background:silver"
|-
|

===Last Challenge of the Day===
|}
[[Image:QuestionMark11.jpg|right|100px]]
<br />
* Try to create a sketch whose behavior is ''similar'' to what is displayed in the image below.  Your sketch should have the following properties:
** It is based on the same sketch you have been working with
** If the center of a circle is to the right of the mouse, the circle is not displayed
** The circles have radii that increase as they get lower in the window
** The color of the circles changes with each circle.
<br /><br />
<center>[[Image:CSC103ProcessingCircleChallenge.png|300px]]</center>
<br /><br />
=Useful Trick: Displaying the Mouse Coordinates=
<br />
==Option 1: In the Console==
<br />
* To display the mouse coordinates in the Console Window, you can call the '''println()''' function inside the '''draw()''' function:
<br />
<source lang="java">
void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  background(200);
  fill( 0 );
  ellipse( mouseX, mouseY, 80, 80 );
  println( mouseX+" "+mouseY )
}
</source>
<br />
==Option 2: Inside the Graphics Window (optional for now)==
<br />
* To display the mouse coordinates in the Graphics Window, you can use the '''text()''' function, which requires you to give it a string and two numbers defining where to display the string in the window.   Here's an example below:

<br />
<source lang="java">
void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  background(200);
  fill( 0 );
  text( "("+mouseX+" "+mouseY+")", mouseX, mouseY );
}
</source>
<br />
<br />
=Optional Section, if you are done early=

* Visit the [http://processing.org/learning/topics/ Learning] section on [http://processing.org Processing.org] and play with some of the examples.  It is a good way to learn a programming language.  You may want to copy/paste some examples and modify their code to see the result.
* Have fun!
<br /><br /><br />
Solution sketches for all the ''challenges''  are available [[CSC103_Processing_Lab:_Solution_Sketches| here]].
<br /><br /><br /><br />




 
<br />
[[Category:CSC103]][[Category:Processing]][[Category:Labs]]