Quantcast
Channel: Computational Media – Ruta Kruliauskaite @ITP
Viewing all articles
Browse latest Browse all 10

Week2 homework: variables, mouseX, mouseY, random

$
0
0

Ok. So the deal is that ICM is one of my favorites classes so far (together with pcomp and educate the future). But it’s so hard! Or maybe I’m spending not enough time on it but I will pick up.

Last week in class we learnt we can declare our own variables, that we can move object with the movement of the mouse (mouseX and mouseY), that we can randomly place and map objects, we’ve also learnt what the function mousePressed means and how to organize variables.

The homework was to create a sketch that includes all the following elements:

  • One element controlled by the mouse
  • One element that changes over time, independently of the mouse
  • One element that is different every time I run the sketch

I haven’t used all of these for me homework but here’s what I’ve got:

first of all, I’ve created a canvas with a black background. Since I’m a bit of a homesick person right now, I’ve decided to draw Lithuanian flag, where canvas had to be filled over time without me doing anything. For this I’ve used a mouseX element.

function draw() {
 //Lit flag yellow
 noStroke();
 fill (253, 185, 19);
 rect (mouseX, 0, 50, 200);
 mouseX=mouseX+0.5;
 
 //Lit flag green
 noStroke ();
 fill (0, 106, 68);
 rect (mouseX, 200, 50, 200);
 mouseX=mouseX+0.5;
 
 //Lit flag red
 noStroke ();
 fill (193, 39, 45);
 rect (mouseX, 400, 50, 200);
 mouseX=mouseX+0.5;

Screen Shot 2015-09-16 at 01.00.04

Screen Shot 2015-09-16 at 01.00.09

Screen Shot 2015-09-16 at 01.00.10

Then I included mousePressed function, which means that if I click with the mouse, something in the sketch will change once. Since we’re playing with flags, I’ve changed my background to EU blue with euro symbol (poorly drawn) in the middle:

function mousePressed () {
 //background
 background (0, 51, 153);
 
 //arc
 noFill ();
 strokeWeight (25);
 stroke (255, 204, 0);
 arc (450, 300, 300, 280, -5.5, -0.65);
 
 //line1
 strokeWeight (25);
 stroke (255, 204, 0);
 line (280, 280, 430, 280);
 
 //line2
 strokeWeight (25);
 stroke (255, 204, 0);
 line (280, 320, 430, 320);
}

Screen Shot 2015-09-16 at 01.09.29

combined it looks like this:

Screen Shot 2015-09-16 at 01.11.59

Screen Shot 2015-09-16 at 01.12.10

Check out the full code here.


Viewing all articles
Browse latest Browse all 10

Trending Articles