# Contrasting Concepts - Art

The image below shows an abstract art composition designed to represent the dualism of emotional states: Relax / Stress.

The idea is to select 2 contrasting concepts and find a way to represent that concept using abstract shapes and colors.

![](/files/-M0-KcAaZ-IrGj7tayV-)

![](/files/-M0-KcAc-nJsbTacO0jQ)

[Link to Khan Academy code for this artwork](https://www.khanacademy.org/computer-programming/contrastdesign-mousex/4687668123697152)

```java
rectMode(CENTER); //draw rectangles where x,y is  center point

stroke(107, 105, 105,100); //stroke with transparancy
var rectSize = 50; //initial rectangle size
var sizeMax = 100; //max size of a shape
var sizeMin = 20; //min size of a shape
var radius = rectSize/2; //radius
var c1 = color(0, 255, 187,100); //green w/transparancy
var c2 = color(255, 122, 5,100); //orange w/transparancy

background(255, 255, 255); //set white background one time


var draw= function() {
   var fraction = map( mouseX, 0, width, 0.0, 1.0);
   var curColor = lerpColor( c1, c2, fraction); //determine color 
   fill(curColor); //create a gradient based on x position

   if( mouseX < width/2){ //relax state  
    //size should start large, become small at center
       rectSize = map( mouseX, 0, width/2, sizeMax, sizeMin);
    //radius should start at max, become 0 at center
      radius = map( mouseX, 0, width/2, sizeMax/2, 0);
   }
   if( mouseX > width/2){ //stress state
   //size starts small gets larger at right edge
       rectSize = map( mouseX, width/2, width, sizeMin, sizeMax);
   //radius should start at 0 at center, get 'sharper' at right edge
       radius = map( mouseX, width/2, width, 0, -sizeMax/2);
   }

   rect( mouseX,mouseY, rectSize, rectSize, radius); //draw the shape
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kdoore.gitbook.io/cs1334/contrasting-concepts-art.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.