TurtleStitch: logo & Islamic tiling pattern

  •  Islamic tiling pattern


In week 3, I enjoyed playing around with Turtlestitch and created beautiful patterns and graphic design using it. The picture I posted above is an Islamic tiling pattern I created using Turtlestitch.  It took a long time to figure out what the structure is and how to arrange the codes. This digitally-drawn pattern was created by the following steps:

1️⃣ Find a pattern. I googled a bunch of pictures of Islamic tiling designs and find one that had been analyzed step by step. It was illustrated as below.



2️⃣ Shapes in the complicated pattern are circles and squares. To be specific, there is one circle surrounded by four circles. From
inside to outside, the squares become bigger and bigger and rotate by 45 degrees each time.

3️⃣ Implement it by codes. 

Here is the videošŸ”½



  • Logo


This is a simple logo I designed using turtlestitch. I just used two letters of my given name and family name as the elements. It is just like a moving body on the stage. To create the moving effect, I try to set the X and Y variables and change the value of saturation. 

  • Reflection

Turtlestitch, I think, is more complicated compared with turtleArt, since there are way more blocks that are available for users to use. There are many new blocks that I did not come across in TurtleArt. Every time I encounter an unfamiliar one, I will use the help function to read the introduction of it. Another way that works for me is to find some examples created by other people and play around with them to compare the differences. For example, I found 



these two properties tricky to understand, so I found an
example in which the creator used these blocks and change the value to see the differences. I saw the two pictures below


The top one is the original one, and the bottom one is a new one when I assigned smaller values to the variables. In this way, I understanding, the stitchLength is associated with the length of the lines, and the directionStep is associated with the distance of one stitch and its subsequent stitch.

Thinking about an object from my childhood that interested and influenced me, I think of the MP3 player. I had it when I was in middle school. It is special to me because it was a very fancy music player at that time. And, that is the first digital device that I had. It changed the angle from which I viewed this digital world. The digital world is no longer a still and cumbersome one, otherwise, it can be a compact and mobile one.


Comments

Post a Comment

Popular posts from this blog

Scratch Mini-project: Simple MP4 & Remix

Image
During the past few weeks, I worked on a mini-project using Scratch. This small piece is an MP4 player, to be more specific, it is a music player. I tried to simulate the real user journey in a music player, like turn on and off, next and previous song, pause and start a song, etc.  Week 1  In week 1, I just grabbed some thoughts about the mini-project. I thought of making a storytelling project, demonstrating the great fun brought by MP4 during my childhood. But I decided to make an interactive virtual MP4, which could be more interesting since people can interact with it. Due to the time pressure, I just forked the music player function of the MP4 player. Week 2 Before starting to use Scratch to create the project, I made a plan first to sort out my sort of random thoughts. They are many functions of a music player. I need to decide put which functions into priority. I made a list to map the user interactions in sequence: 1.  turn off/on the device   2. see a centr...
Read more

Learn how draw with p5: A Chinese lantern

Image
  https://editor.p5js.org/hh2871/sketches/diyXJRSYG  Why do I choose lantern? Because lantern is a meaningful symbol for Chinese people. It stands for coming back home or reunion with family. Therefore, Chinese people like hanging out lanterns during traditional festivals as a good blessing.  How do I make it? First, I drew a picture of it.  I broke it down into several parts: the top, the body, the bottom, the fringe, and the decorations(a line and a square). For each part, I used basic shapes, like squares, rectangles, lines. The body part is special because of its irregular shape. Therefore, I used vertex() to sketch it out. The last step is to color different parts. I messed up with coloring since I used color() instead of fill(). And, I learned that every time I want to apply different colors, I need to reset the RGB.
Read more

Create Button Press and Key Press Events in p5.js

Image
Creating button-press and key-press events can add more interactive fun to the program. The picture above shows the "Hello" text I wrote using my program. In this program, users can change colors, clear canvas, change stroke weights, and change background colors by pressing buttons and keys.  https://editor.p5js.org/hh2871/sketches/-sXGieDYf In the setup function, I set up the background color, the size of the canvas, stroke weight, and filling color first. Besides, I also preset the positions, texts, and event triggers of the four buttons. After this, I defined the functions of each button and the functions of keypress events. The function of fill() is to change colors. The function of strokeWeight() is to change the stroke weight. The function of background() is to change the background color.
Read more