This week we worked with loops and conditionals. Our homework assignment was to create a sketch that included the following:

- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.

The extra material this week was a link to *ProgrammingDesignSystems* by Rune Madsen. I decided to try to replicate one of the illustrations that was provided on the website, as I imagined it would contain many of the functions we went over in class as well as *conditions*, *if statements* and *loops*.

The image shows the illustration by Rune. It is a shape where you can drag each corner to a new location and the coordinates will update accordingly on the right side.

I decided to approach this task using a “Circle” Object. My theory was that using a “isInside” and “mouseIsPressed” function you would be able to drag the circle around on the screen. I then initialized 3 additional circle-objects. These served as the corners of my square. The 4 circles were connected using a “beginShape” / “Endshape” function and the “fill” function was utilized to visualize the shape.

The code can be seen here:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
| //object circle
var Circle = function(x , y , d ) {
this .x = x ;
this .y = y ;
this .diameter = d ;
this .time = 0;
this .outline = 1;
this .display = function() {
strokeWeight (this .outline );
fill (200,100,100,50);
ellipse (this .x , this .y , this .diameter , this .diameter );
}
this .isInside = function() {
var d = dist (mouseX , mouseY , this .x , this .y )
if (d < ; this .diameter / 2) {
return true;
} else {
return false;
}
}
this .drag = function() {
ellipse (mouseX , mouseY , this .diameter , this .diameter );
}
}
  ;
var isInside = false;
var time = 0;
var outlineSpeed = 0.025;
function setup () {
createCanvas (400, 400);
circle1 = new Circle (random (width / 2), random (height / 2), 30);
circle2 = new Circle (random (width / 2, width ), random (0, height / 2), 30);
circle3 = new Circle (random (width / 2), random (height / 2, height ), 30);
circle4 = new Circle (random (width / 2, width ), random (height / 2, height ), 30);
}
  ;
function draw () {
background (220, 200, 200);
time++;
  ;
circle1 .outline = circle1 .outline + outlineSpeed ;
if (circle1 .outline > ; 3 || circle1 .outline < ; 0.2) {
outlineSpeed = outlineSpeed * -1;
}
circle2 .outline = circle2 .outline + outlineSpeed ;
if (circle2 .outline > ; 3 || circle2 .outline < ; 0.2) {
outlineSpeed = outlineSpeed * -1;
}
circle3 .outline = circle3 .outline + outlineSpeed ;
if (circle3 .outline > ; 3 || circle3 .outline < ; 0.2) {
outlineSpeed = outlineSpeed * -1;
}
circle4 .outline = circle4 .outline + outlineSpeed ;
if (circle4 .outline > ; 3 || circle4 .outline < ; 0.2) {
outlineSpeed = outlineSpeed * -1;
}
  ;
beginShape (QUADS );
strokeWeight (1);
fill (200, 100, 100)
vertex (circle1 .x , circle1 .y )
vertex (circle2 .x , circle2 .y )
vertex (circle4 .x , circle4 .y )
vertex (circle3 .x , circle3 .y )
endShape (CLOSE );
  ;
fill (255);
circle1 .display ();
circle2 .display ();
circle3 .display ();
circle4 .display ();
  ;
strokeWeight (1);
if (mouseIsPressed & ;& ; circle1 .isInside ()) {
circle1 .x = mouseX ;
circle1 .y = mouseY ;
text ("Circle x:" + int (circle1 .x ) + " y:" + int (circle1 .y ), circle1 .x + 20, circle1 .y );
}
if (mouseIsPressed & ;& ; circle2 .isInside ()) {
circle2 .x = mouseX ;
circle2 .y = mouseY ;
text ("Circle x:" + int (circle2 .x ) + " y:" + int (circle2 .y ), circle2 .x + 20, circle2 .y );
}
if (mouseIsPressed & ;& ; circle3 .isInside ()) {
circle3 .x = mouseX ;
circle3 .y = mouseY ;
text ("Circle x:" + int (circle3 .x ) + " y:" + int (circle3 .y ), circle3 .x + 20, circle3 .y );
}
if (mouseIsPressed & ;& ; circle4 .isInside ()) {
circle4 .x = mouseX ;
circle4 .y = mouseY ;
text ("Circle x:" + int (circle4 .x ) + " y:" + int (circle4 .y ), circle4 .x + 20, circle4 .y );
  ;
}
} |

And the sketch looked like this.

- I met a lot of problems with this sketch. One thing was that I couldn’t get the code to work with a “for loop”, which meant I had to initialize each circle for itself and define all functions for each of the circles 4 times (circle1.display, circle2.display etc).

- Another problem occured when I was dragging the circle to fast. When doing so the mouse (mouseX,mouseY) would go outside the circle and the dragging would stop. I felt like there needed to be some sort of “mouseReleased” function to solve this. But couldn’t get it to work.

With the code doing its job – I met with one of the residents. 1: To simplify the code. 2. To get the dragging optimized.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
| //object circle
var Circle = function(x , y , d ) {
this .x = x ;
this .y = y ;
this .diameter = d ;
this .time = 0;
this .outline = 1;
this .display = function() {
strokeWeight (this .outline );
fill (200, 100, 100, 50);
ellipse (this .x , this .y , this .diameter , this .diameter );
}
this .containsMouse = function() {
var d = dist (mouseX , mouseY , this .x , this .y )
if (d < ; this .diameter / 2) {
return true;
} else {
return false;
}
}
this .drag = function() {
this .x = mouseX ;
this .y = mouseY ;
}
}
var isInside = false;
var outlineSpeed = 0.025;
var total = 6;
var circles = [];
var circlesClicked = [];
var CircleIsSelected = false;
function setup () {
createCanvas (500, 500);
for (var i = 0; i < ; total ; i ++) {
circles .push (new Circle (random (width ), random (height ), 30));
circlesClicked .push (false);
}
}
function draw () {
background (220, 200, 200);
if (circles [0].outline > ; 3 || circles [0].outline < ; 0.2) {
outlineSpeed = outlineSpeed * -1;
}
for (var i = 0; i < ; total ; i ++) {
circles [i ].outline = circles [i ].outline + outlineSpeed ;
}
beginShape ();
strokeWeight (1);
fill (200, 100, 100)
for (var i = 0; i < ; total ; i ++) {
vertex (circles [i ].x , circles [i ].y );
}
endShape (CLOSE );
fill (255);
for (var i = 0; i < ; total ; i ++) {
circles [i ].display ();
}
for (var i = 0; i < ; total ; i ++) {
if ((mouseIsPressed & ;& ; circles [i ].containsMouse () & ;& ; CircleIsSelected == false) || circlesClicked [i ] == true) {
circles [i ].drag ();
text ("Circle x:" + int (circles [i ].x ) + " y:" + int (circles [i ].y ), circles [i ].x + 20, circles [i ].y );
circlesClicked [i ] = true;
CircleIsSelected = true;
}
}
}
function mouseReleased () {
for (var i = 0; i < ; total ; i ++) {
circlesClicked [i ] = false;
}
CircleIsSelected = false;
} |

This is how the sketch worked after.

Untitled from Simon Jensen on Vimeo.

This was how we managed to simplify the code. One of the main reasons I couldn’t get the “for loop” to work I think had to do with me forgetting to define the array in the beginning (circles = [ ]). I kept getting errors telling me that the function “circles[i]” was unidentified.

Another thing we talked about was the push function and how that is a very neat method to add to the array.

For the dragging we declared some extra boolean functions: CircleIsSelected & CircleClicked. However my head needs some playing around with that to make perfect sense of it all.