Geometric Drawing -ICM – Week5

drawing with colorful shapes

Assignment

The idea this week is to explore re-organizing your code. It is 100% legitimate to turn in a version of a previous assignment where nothing changes for the end user, but the code has been restructured. You may choose to reorganize someone else’s code——though you might want to make sure they’re okay with it first 😉 You may, however, choose to try a new experiment from scratch. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):

  • Reorganize “groups of variables” into objects.
  • Break code out of setup() and draw() into functions.
  • Use a function to draw a complex design multiple times with different arguments.
  • If you are feeling ambitious, try embedding a function into an object.

Presentation

This is a canvas where you can draw with geometric shapes in neon pastel colors and save it to your liking. You can press “c” to clear the image, spacebar to save the image, click on the shapes to draw, click on the canvas to stop drawing the shape and choose other shapes by clicking on other shapes.

When you select the shapes, each move of your mouse will draw the shape you chose with the color randomized within the array of neon pastel color.

black background with colorful shapes

When you want to start a new painting, you can click “c” to clear the background yet still have the background settings available.

black background with colorful shapes

Come and play below!

Check my code here.

Process

For this week, I want to create something simple but also interactive. I always love the geometric shapes such as rectangles, crcles, triangles and more. Therefore, I created a canvas for users to interact. Here are some art pieces created using the program. drawing with colorful shapes

black background with colorful shapesblack background with colorful shapesgif of drawing with shapes

Problems

Couldn’t stop the mouseClicked() when changing into different shapes

I didn’t have the else statement before and it showed up as the gif below. Each shape called in draw are changing repeatedly and when I click the place other than the yellow shapes and nothing responds. When I added the else statement, I now am able to click the space other than the shapes to stop the drawing and click onto the shapes to start on another or the same shape.

four if statements and one else statement commented out grey background with colorful shapes

Weird rectangles showing up on the left top corner

The original goal is to create a rectangle that store the shapes so that the shape will not be covered by the drawing shapes. When I created the the long rectangle in the draw function. It gives a blinking rectangle shape and I troubleshooted in my code but I couldn’t figure out why. Therefore, I just deleted the code and erased the rectangle and everything worked.

grey background with colorful lines

Booleans called wrong in code

I set the variable of each shape as false before setup() and use the mouseClicked() to convert them into true respectively based on scenarios. I was trouble shooting the if statement since when I call the functions to draw the shapes individually, it draw every shape upon each click. So you will have circle stacked with rectangle, triangle, and line in the same position of your mouse. I don’t want that because it looks so messy. The screenshot below shows the wrong statements that I used. After checking out my old code in Seasons of Life, I changed the statements into below “if(rectangle){}”. Since the block within the if statement will be implemented if rectangle, the variable, is true.

screenshot of two if statements on sublime text

Conclusion

It was a fun process for me to debug. Since I didn’t have much time this week to develop a more comprehensive interactive drawing game. But I like how they turn out with the neon pastel color and black background.

Published by Yiting Liu

NYU ITP '21

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: