Category: 2022spring_CClab_Leon

 

 

• The Voice From The Deep

–A calm gift to lockdown group life

–Find the Voice from your inward world

• https://mingxuan0322.github.io/ShellyXuan_coding/the-sounds-from-the-deep/ 

• Introduction:
  • “The Voice From The Deep” is a project offering users experience back to the natural word and inner calm. In the experience, users can freely tailor their own sounds conbinations while enjoying the visualizations.
  • It consists of a P5 canvas in JS, and two html page with CSS. Besides, there are links to the Github and WordPress page~

• • [background]  As for me, it is quite hard in dorm to avoid noises from others, especially from those talking inside or outside my room. Later, I found that some special sounds like white noise, sounds of raining…can greatly cover others voice. During my experience, I enjoyed the sounds of rain, wind, insects most, and they are all from the nature. Consider the lockdown situation, we’ve been far away from the nature for too long. Furthermore, the life furing lockdown somehow make people depressed and stressful, easy to get loss. So I came up with this idea to bring me and my audience back to the nature world, also to help myself and users find the inner world.

• Intructions:
  • 1. Click anywhere(mainly on the square canvas) to stir the silent world;
  • 2. Click the direction board to add new elements
  • 3. Click new element and move it around. Click again to place it.
  • 4. Scroll OR stretch the webpage to experience different feelings with different background colors.
  • 5. Click “RESTART” to restart.
  • tips: the maximum of elements is 3, considering too many sounds playing together might be disturbing.
• main page(first sight-instructions)
• main page(scroll down-the P5 canvas)
• 
• ABOUT page(first sight-click the “ABOUT” button at the main page)
• 
• main page(scroll down-full window size of 14-inch laptop’s Chrome)

 

 

• Reflection
• 1) Process: Design and Composition
• 1 . Overall
• The inspiration originally came from the experience of lockdown life. As was mentioned above, I decided to make a webpage that we can listen to some natural sounds and even can keep them looping together as a learning background.

 

• 2. The HTML page
• The overall visual design came from two scenes inpressed me a lot:
• ->This is a scene from the film Le Petit Prince that left a deep impression on me once it appeared on the screen in theater, when I was in the middle school and went out before an important exam with my mom:D (I was curious about the technique of this scene. Later, I searched for this technique and got the answer–stop-motion animation, actually–but finished with paper model.
• <-One showroom of an exhibition about The Book of Songs. I visited it with my childhood friend (we know each other for time almost as long as my life) during the Winter Holiday in 2022.
• They inspired me the layout of the html page and also the feeling of “the deep”.

 

• 3. The P5 interaction
• I decided to make a webpage that we can listen to some natural sounds and even can keep them looping together as a learning background.
• Thinking about how to make users interact with canvas for different sounds, I came up with two plans–one is to make a timeline; the other is to devide the canvas into areas. Since the former might be confused to my users, I picked the latter.
• 
•  
• After that, when thinking about how to play sounds. I first wish my audience click certain areas to play looping sounds. But later I came up with an idea that make visual elements that can be moved by mouse, and one-sound playing is controlled by checking whether there is an element in correspongding area. 
• It, actually, was such a long and complex process through drawing, trying, revising :/
• Besides, I gained an inspiration from the process–add some short sounds that respond to mouse click on spare place of the canvas. It can be a prelisten step to the looping sounds tailoring, from which users can also do free and interesting exploring and make some guess of areas’ meanings. Moreover, short sounds responding make the stable statue(whether background sounds looping or silence) stirred!!!

 

• 2) Process: Technical 
• One of the most challenge part must be the canvas design and logic explorations.
• I calculated much to devide the canvas. Additionally, in order to make the canvas easier to change its size, I located all elements(borders, direction board) with percentage of “width””height”!!! 

parts of my draft paper(about logic design)

• Another challenge is the design and coding of “element” visualization.
• the link to “ripples”
• https://editor.p5js.org/ShellyXuan/sketches/kd2–BdJp 
• the link to “wind”–showing floating leaves
• https://editor.p5js.org/ShellyXuan/sketches/5IXFkx8u3 
• it’s totally about p5 coding. Hard works were done to adjust animations.
• For example

class Ripple {
constructor() {
this.speed = 0.5;
this.blue = [];
this.rad = [];
this.weight=[]
this.width=10

for(let i=0;i<4;i++){
this.rad[i]=10*i
this.weight[i]=abs((i+1)/2)
}
}

display() {
push();
noFill();
circle(0, 0, 60);
//leaves
for (let i = 0; i < 4; i++) {
push();
stroke(255)
strokeWeight(this.weight[i])
circle(0,0,this.rad[i])
pop();
}
}

move() {
//water visualization
for (let i = 0; i < 4; i++) {
this.rad[i]+=this.speed
this.weight[i]=abs(i-this.weight[i])
if(this.rad[i]>90){
this.rad[i]=0
this.speed-=0.1
if(this.speed<=0.2){
this.speed=0.5
}
}
}

}
}

With times of attempts, I finally made circles of ripple change the weight and speed in every loop.

• An unexpected but reasonable problem of HTML pages: when the images in html cover some of the P5 Canvas, every time I dragged the circle to play loopingsounds, the photo thumbnails will also be moved together and sometimes images would be openned in a new webpage.
• So I found this solution. Finally, I muted all the html element, making them unseletable and unmovable.
• .noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
• An interesting problem about the HTML page

different appearance of two html pages with the same css style setting 

• With the help of Google search and Professor Leon, I understand the repeating block of background color was because the short content of “body”. Additionally, the repetition was probably because it was “background-image: linear-gradient(328deg, #3555cb, #60b8b7, #6eb6a2, #6ae887);“
• The solution of it:
• 
• html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-image: linear-gradient(328deg, #3555CB, #60B8B7, #6EB6A2, #6AE887)
  }
• That was “magic” haha
• Later, as the content getting more and more, this”min-height: 100vh;” can be took off.
• One thing worth mentioning: it’s quite interesting to play with img setting.

.img01{
position: fixed;
left: 80%;
top:90%;
transform: translate(-50%,-70%);

this stuctue can place elements at the middle of the window by chanding all numbers into 50(not including plus or minus). It’s similar to the “translate()” in p5.js such that the element will only respond the new “starting point” rather then simply left/top/right/bottom border.
opacity: 0.8;
z-index: 10;
}
.img02{
position: fixed;
right: 72%;
top:30%;
transform: translate(10%,-70%);
opacity: 0.8;
z-index: 10;

this structure can also be applied to every elements in html page. With it, we can organize the order of element(A is over B while under C). Position must be set, no matter what content of it is. The bigger the value of z-index is, the more the element is in the upper.
}
.img03{
position: fixed;
left: 80%;
top:40%;
transform: translate(-40%,-70%);
opacity: 0.8; 

it is the peremeter of transparency.
z-index: 10;

-webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */
filter: grayscale(100%);
filter: brightness(0%);

This structure can make img change the grayscale and brightness, finally become layering cucoloris with adjusted peremeters.
}

…
.img08{
position: fixed;
left: 52%;
top:0%;
transform: translate(-50%,-12%);
opacity: 0.5;
z-index: 10;
-webkit-filter: grayscale(100%); /* Safari 6.0 – 9.0 */
filter: grayscale(100%);
filter: brightness(0%);
}

 

• 3) Reflection and Future Development
• It’s the second time to make a ‘big’ project. Situation has been changed completely by the Covid crisis. Everything went under pressure. Luckily, there always helping hands from professors, LAs, and my friends; hard work has never been absent. Such a tired but interesting journey finally comes to the end.
• As my current “users” (Professors, classmates, friends) suggested and I personally came up with, there is large room and bright future for improvement.
• One thing I personally want to do, is that makeing volumes controllable. It can be overall controlled by html button/slide button, as was suggested. But I’m thinking about make the volumes of each element changing with their position–add “map(x1, x2, 0, 0.8)”, x1, x2 refer to correspongding border line’s position.
• According to one of my friend(IMA great student!! Sad to have the following semester without seeing him), regarding to the size of window, the size of Canvas is considered to be changable with window streched. So I located all elements(borders, direction board) with percentage of “width””height”!!! And the next step is how to make the canvas larger if the window size is larger than certain value; also, how to make the canvas smaller if it’s opened on small-width device like cellphone. Besides, the black img elements can also be better placed for bigger device(this user’s computer is of 16-inch size haha)
• Other possible improvements includes adding more visualization corresponding to sounds(amount, meaning, frequency, volume change…), designing more interactions with html elements like black images(deer, branches, flying leaves, thickets…), and so on. 
• Everything to be continued~~~
• So, generally, it was a great and valuable experience, especially during the Shanghai 2022 Spring Lockdown situation. Thanks to the imagination of nature giving me energy, inner calm, and also much inspirations. The practice and exploration of Creative Coding will be continued…
• Wish me a great creative programmer in the future!!! 

• Gallery: Cat’s Drawing Board

• https://github.com/mingxuan0322/ShellyXuan_coding/tree/main/Cat’s_drawing_board  
• https://mingxuan0322.github.io/ShellyXuan_coding/Cat’s_drawing_board/ 

• • Brief Description and Concept: 
    • It is a sketch gallery of one of my p5 projects called Cat’s Drawing Board, presented by html/css/p5.
    • Here is a Cat’s grawing board (I’d like to call it, Mr.Luo). the background can keep changing colors while moving your mouse. Here are functions you can interact with the board: 1. press your mouse and draw threads freely; 2. double click your mouse, then left a white snow spot on it; 3. press any key from a to z, then you can see the cat change a movement; 4. simply move your mouse(imitate using a rubber) to clean the board, or you can just click the CLEAN on the left bottom; 4. press the key 1-9 to change the weight of thread and size of snow spots. When drawing on the board, you can notice two eyes following you and find the thread’s color changed with mouse moving as well. Make a try and enjoy it!
  • Demo/Visual Documentation:
    • 
    • update
      • 
      • 

•  

•  Coding/Learning
  • One challenge was how to make elements align center. I found some solutions and applied two of them:
    • One is typing the code below into the corresponding class in CSS. The parameter change can adjust the exact position I want.
    • left: 50%;

      top:100%;

      transform: translate(-50%,-70%);
    •  The other one is: (Also in a class in CSS)
    • margin: 0 auto;
  • Another step worth mentioning was putting dacorative pictures backward. My solution was to find a index instruct the order of all element–z-index(in CSS). The bigger a z-index value is, the higher the corresponding element is over others. And there is an interesting fact about z-index. Only when the position of class set can z-index make sense!
• Reflection/Lessons Learned

• How can orderly file name convention (html files, css files, images, etc.) prevent errors when building a website?
  • Right now, css is only named as style.css and htmls are like about.html, index.html.
  • According to my observation, file name should include no space and be best connected by “-“. Also, the words in names are expected to be concise and well-ordered. 
• When would you want to use classes, when IDs? 
  • As for me, classes are used to set styles of normal element, like div element, text(p, h1…). And they are more frequently used than IDs are. For IDs, I only use it in unique once before following professor’s coding process.
• How does editing and styling a text in (WYSIWYG) text editor, such as Microsoft Word, compare to writing HTML? What are advantages of each over the other?
  • From my perspective, editing and styling a text in Microsoft Word is much more simple and convenient, compared to writing HTML. But Microsoft Word is tailored for office work which need conciseness and user-friendly tools rather than freely designing environment like HTML. So, there are great limitations in Micro Word. 
• Explain how different web technologies come together in your webpage. How is writing HTML or CSS different from writing p5.js (JavaScript)?
  • Compared to p5.js, which is more like a canvas-like element in the entire HTML/CSS programme. Writing HTML/CSS means I need to consider more about the combinations and interactions between files(htmls, css, assets folder…), website, and so on. When writing HTML, I can not only edit programme in p5.js, but also add more elements and various styles into the HTML.
• Which limitations did you run into in the styling of your page?
  • The biggest limitation was that it was too free to wtriting HTML/CSS and there are too many various code phrases that I don’t know much about how to use, choose, or get the one I really want.

• New Media Art
  • The text is from 2007. Almost 15 years on, describe your (updated) understanding of New Media Art in comparison to how the author defined it back then.
  • How do you think the conception of what New Media Art is or can be has changed since the text was published. Think of new technologies, apps, dominant themes, and media that have come to be dominant in our lives after the text was published. 
    • According to the author, Mark Tribe(2007), New Media art mostly describles projects that make use of emerging media technologies and “are concerned with the culture, political, and aesthetic possibilities of those tools.”
    • It is a conception in the cross range of Art and Technology(“practices, such as Electronic art, Robot art, and Genomic art”) and Media art(like Vedio art,Transmission art, and Experimental Film).
    • Since 2007, technoloy and media have been developed rapidly and there have been some new media art. For example, the technology of autostereoscopy gave the possibilites to immersive theater and special visual effects of exhibitions, party, or somewhere else. 
• Art Historical Antecedents, Themes, Tendencies
  • The text mentions many artists and works and puts them into historical and thematic context. Pick two works (one created before the year 2000 and from after 2000) by two of the artists mentioned. To find these works, you may research beyond the text (use the internet). Describe the projects. You should at a minimum cover the following:
    • short description 
    • short background information about the artist
    • one paragraph that places the work into context. Similar to the way the author of the Reading does in his text, think about the historical antecedents, the themes and tendencies that your chosen work engages in, and the techniques used in their creation. 
    • 
    • Whaam! is a 1963 diptych painting by the American artist Roy Lichtenstein.
    • It is one of the most famous works of pop art, and is one of Lichtenstein’s most important paintings.
    • About the author:
    • Lichtenstein had studied painting and drawing at Ohio State University before serving in the US Army. Later, in 1946, all of training programs(like for languages, engineering, and piloting) were canceled, he served as an orderly, draftsman and artist in noncombat roles, when he started his life of an abstract artist. According to his experience, his work first based on some cartoon chatacters and later (around 1963) typically focused on romantic situations or war scenes.
    • —
    • Obviously, the theme of the work is about wars. And the mode of tech here is diptych painting which can be easily figure out from the gap line on the middle. Also, his work is a kind of comic books, as a genre were held in low esteem at the time. 
      • • • • • • • • • • • •  
      •  
      • Another work was called Velvet Strike, co-created by Anne Marie Schleiner, Joan Leandre, and Brody Condon(2002).
      • 
        • https://anthology.rhizome.org/velvet-strike 
        • Velvet-Strike is a mod of the first-person shooter video game Counter-Strike.
        • The background of the work is tightly related to some violet issues in the reality. One is contemporary Middle Eastern politics. Besides, Velvet-Strike was created in response to the crude, propagandist atmosphere in the USA. It is  There are pacifist ‘sprays’ in this work, and it is a subversion of Counter-Strike. Also, it includes some complex issues such as economics, religions, families, food, children, women, refugee camps, smell etc.
        • The technoical background of this work might be the popularity of network shooter games.  
        • An interesting fact about the visual art game
        • “When Anne-Marie Schleiner and Joan Leandre met in Spain—around the same time that the United States was beginning to bomb and invade Afganistan—Schleiner was already interested in the politics of first person shooter games.”

 

The Web is critical not merely to the digital revolution but to our continued prosperity—and even our liberty. Like democracy itself, it needs defending.

–Tim Berners-Lee

 

• The author mentions beneficial and “ill effects” of the Web. Describe two examples of these effects from your own experience on the web. 
  • The Web keeps on collecting users’s information and following their tracks, even though the users don’t know about this or simply refused beeing traced. It is horrible to find surrounded by similar imformations repeating and shuting me in a cage when browsing websites like Youtube. And this track also makes me get loss before I found what I really want.
  • Another horrible experience is about ins. I created an new account without input any real personal informations, in order to be away from my acquaintance. However, a few days later, Ins recommended some accounts for me. I superisingly found some of them are my classmates in primary school but we’ve lost touch with each other for years.
  • A second thought incurs profound fear.

 

• In your own words, describe the concepts below, contrast them to one another and, if possible, share associations from your own experience on the web.
  • Universality and Isolation
    • With the Internet developing, it is easy for people to share and get almost all the imformations around the world. Even people and affairs can be easily got tough with through the Internet. The web becomes global and universal.
    • However, there seems no need to get out for interaction and communication in reality. Under this circumstance, people lose great willingness of real contracts with the real world. The living states are becoming isolated.
    • While universality specificly in the Web refers to the use of imformation: All kinds of information can be used, all kinds of people can use the Web, and all kinds of hardware can be used to carry informations. Besides, the use of the Web do not always need a third-part approval. And it can be broadly used with URL.
    • Another kind of isolation happens within the Web. Unhealthy competitions between top imformation companies gradually monopolize imformations and block cross-platform imformation sharing.
  • Open Standards and Closed Worlds
    • Open Standards means not only allowing any site to link to any other site but also open basic Web technologies, that indi-
      viduals and companies need to develop powerful services, to the public for free, with no royalties.
  • The Web and the Internet
    • “The Web is an application that runs on the Internet , which is an electronic network that transmits packets of information among millions of computers according to a few open protocols.”
    • Therefore, Internet is a broader concept than the Web and it is also the fundation of all the virtual network.
• The author talks about his visions for “the Web in the future”. More than 10 years after this text was published, identify the elements of his vision and discuss the ways in which they are (or aren’t) still present in today’s web. Feel free to also point out issues that have since arisen (e.g. the idea of “fake news”), and discuss how they might relate to the author’s vision.
  • The athor had a forward-looking point of view. The issues he emphasized are still great problem where lots of conflicts and adjustment happens.
  • He said that “free speech should be protected”. Today, free speech on the Web is a hot debatable topic. It is true that lawless people created wars online under the name of free speech, in order for attention and interest. So, some platforms request users to do real name authentication and formulate policies to standard words and deeds to a moral extend. 
  • He was right that “free speech” is still a problem right now. But one thing he hadn’t imagined is about the users. As the Web develops, a lot of users with high level of mental and moral states gather together, spread positive value orientation, and improve the online armosphere. 

 

 

• A Whale Fall Place
• https://editor.p5js.org/ShellyXuan/full/OsTfaVE1c

 

 

Reflection (“for internal use”): The primary audience for this text is your future-self, your classmates and your instructor. You are asked to describe the process you went through in producing the work, as well as reflecting on the outcomes and your learning. This reflection should at a minimum address the following:  

 

• 1) Process: Design and Composition
• Describe the design process of your project. Explain your decisions that lead to the visual appearance of your work, as well as the user interaction. Make sure you include iterations, things you tried but didn’t work, and conclusions you drew. Discuss what you have found of value to build upon in your project, and in what ways your project is different or better. Supplement this description with a set of 3-4 screenshots that show the main design (visual and interaction) of the project. 
• 1 . The inspiration originally came from a natural phenomenon called Whale Fall.
• “A whale fall occurs when the carcass of a whale has fallen onto the ocean floor at a depth greater than 1,000 m (3,300 ft), in the bathyal or abyssal zones. On the seafloor, these carcasses can create complex localized ecosystems that supply sustenance to deep-sea organisms for decades. “ – Wikipedia
• 
• So I planned to generate a world of a whale fall place that users can interact with.  2 . I first created a special kind of creature which looks like both a bird and a fish in a previous mini project.
• 
• But I met problems somehow on logic and a order of some phrases when transforming it into a class. With the help of LA YSY, I finally succeeded and add more input to make every called fish sightly different on wings waving speed, size, transperancy, and much later the color sets.
• 
• 3 . It was a complex, troublesome, but interesting process to create the interaction between mousePressed and fish moving. Originally, I wanted my fish to reach another place in a faster speed when being clicked. But it seems unnatural because there are also interactions between fish and water. That is, it would be much better to let fish escape from mousePressed.    It was definitely not easy to make them escape, but fortunitely, problems were solved with logic of boolean taught in classes and some help of LA.
• 
• One thing worth mentioning here is about the direction of fish head. Because it looked so strang that fish draw backward when escaping. So I learned the existing of scale([-1,1]) from Reference and how to use it from professor( the input is like a vector [a,b] other than a pair (a,b) ). In that way, I not only made my fish change directions when heading to a negative direction but also made the generated original fish more different on head’s direcitons. 
• 

 

• 2) Process: Technical 
• Describe the technical development process of your project. Describe the technical challenges that you faced, solutions you found as well as compromises you had to make.  What could have been implemented better and what changes you would make if you had the chance to do it all over again. What discoveries did you make along the way? Be as detailed and specific as you can.
• One thing worth mentioning here is about the direction of fish head. Because it looked so strang that fish draw backward when escaping. So I learned the existing of scale([-1,1]) from Reference and how to use it from professor( the input is like a vector [a,b] other than a pair (a,b) ). In that way, I not only made my fish change directions when heading to a negative direction but also made the generated original fish more different on head’s direcitons
• Another one is how to create new position for each fish being checked in the scope of mousePressed. The first problem I met there was checking whether there are fish in the mousePressed scope and which index each fish is corresponding to. The solution I came up with was define booleans like “reachSomePlace=True” and “canSetTarget=true” in class Fish to carry the status of each fish.
• 
• “checkMouse()” is called in the function mousePressed. And it checks distance and sometimes changes the value of “reachSomePlace” and “canSenTarget”.
• 
• 
• 
• Actually, more problems showed up during this process. Majority of them were about logic and the order, which made the final effect out of work. They were solved eventually with a long period of work and the help of the LA, but they still left something meaningful. One thing is about the use of console.log(). To be specific, it can be well used to test whether the logic works rather than completing all elements at once, which is easier for me to fix bugs with clear and fewer elements. According to LA Pato, console.log() consumes RAD greatly, so it is better to comment all those unnecessary console.log().
• 3) Reflection and Future Development
• Summarize your conclusions and critical reflections on your work. Consider how your project evolved from project proposal to its current version. In regards to the concept you set out to explore, which parts of the project work well and which ones are you less satisfied with. Reflect on feedback received from peer students, instructor and guest critics and constructive adjustments to the project based on the feedback. Also demonstrate what you would like to implement further and how you would continue to explore in future work any of the ideas your project engaged.
• It is quite tiring but interesting thing to make such a ‘big’ project. From the proposal to its current version, the concept has been changed in some aspects. For an instance, the interaction originally was aimed to let user explore the phenomenon of Whale Fall and feel the magic and power of life. But in the end the interaction is simply between mousePressed/keyPressed and fish.  Just like what LA Sam and Prof. Gohai suggested that my project seems trying to tell the story of Whale Fall, so the process of Whale Fall and how it supports the ecosystem is not germane and clear enough. It is also what I’ve been considering about after submitting the project before the due time :D.
• Therefore, in the future, the next step is to build up a timeline that can be followed be motions showing the process. One step is to make a repeating motion that another figure of whale is falling down from the top of the screen to the buttom, from solid color to a transparent one. Another one is to generate fish automatically by the timeline rather than keyPressed by the user. And the place where new fish generate is better aroud the body of the lying whale.  After finishing those steps and other ideas possibly came up through that process, it’s good to invite other do some user test again and sometimes irertate the process of both user test and prosentation.     

• ShellyDancer
• https://editor.p5js.org/ShellyXuan/sketches/-kIEUIlgo 

• Brief Description and Concept: 
  • • Shelly Dancer is a strange creature dancing with a funny mode. Everytime arms finish swinging a roung(out and back), the two arms will swap their front and back positions. That is, if right now the left arm is in front of the body while the right arm is behind , when they both finish an out-and-back round the right arm will be in front of the body instead. 
• Demo/Visual Documentation:

• Development and Technical Implementation

• Birds or Fish?
• https://editor.p5js.org/ShellyXuan/sketches/-kIEUIlgo 

• Brief Description and Concept: 
  • • Birds or Fish is an easily interactive programming, where a dynamic imaginary creature can be controled with mouse moving. This imaginary creature’s body(with eye), wings, and tails are all made by a repeated shape. When clicking mouse, users can left a creature in a random size and transparency, and it can keep waving wings and shaking tails at a randomspeed.
    • Birds swim in the sky; fish fly in the sea; how can we tell great difference between them?
    • Recently I just started to try drawing simple birds(sometimes a phoenix), and my project A’s original idea is Whale Fall which need to draw some fish. When thinking about this project, I randomly drew some sketches and found the curves of fish and birds have great smilarity and beauty.
• Demo/Visual Documentation:
  • •  

• Development and Technical Implementation

• Butterflies and their followers

• https://editor.p5js.org/ShellyXuan/sketches/Lcg5BoPwX

• • Brief Description and Concept: 
    • It is a peaceful mysterious world with butterflies and their flowers. 
    • It incluses serveral features. The random color changes happen on the background, rorating leaves(wide ellipses), butterflies, and flowers. Leaves randomly rotate around one of the corners; flowers’ petals rotate their centers; and butterflies flying around their own flowers. 
  • Demo/Visual Documentation:
  • 
  • 01: From the very beginning, it was just an attempt that letting circles rotate around the center of the sketch while growing bigger.
  • 
  • 02: By changing the parameters, I found the beauty of this image and considered to draw a colorful flower like the Rose of Le Petit Prince.
  • 
  • 03: The changing colors were quite lovely. Then I thought about making the circles irregular.
  • 
  • 04: Later I thought the “flower” was too round and wanted to make it more like a flower. Surprise came here when I wrote down “noStroke()”. What a wonderful lotus! (A spiral may be seen indistinctly :D)
  • 
  • 05: To see the spiral clearly, I made “noStroke()” a comment and then changed some parameters.
  • 
  • 06: To be honest, I did think my project done at the lotus. But later, the idea of drawing butterflies with for loops came up.
  • 
  • 07: After managing to graw a butterfly, the idea of changing background and drawing leaves came up.
  • 
  • 08: Use for loops to let butterflies repeated regularly.
  • 
  • 09: Add the flower into loops and make some superises on sizes and rotations~

•  

• Reflection/Lessons Learned

From this project, functions like for loops, push()/pop(), rotate(), and translate() in p5.js were well utilized and practiced. The use of random maked some surperice in variable’s position, size, orientation and so on, as my for-loops iterate. Also, “loops in loop” is a quite interesting iteration to achieve a complex effect.

When considering differeces between drawing by hand from observation and programming the computer to draw, I think, for me, the former is just drawing an almost fixed picture while the latter needs more attempts to see what happens and adjust program. And programming the computer to draw usually generates many surprises and may lead to an unexpected crazy result, which inspires me a lot and help to come up with more ideas. Besides, both of the two drawing patterns have the process of iteration where I often adjust ideas and operations with inspirations stemming from the previous work .

 

• A crying ceme 
• https://editor.p5js.org/ShellyXuan/sketches/Lcg5BoPwX
•  
• Brief Description and Concept: 
  • • It is a dynamic meme, where an aggrieved paperman is steding tears. Every time the programme is executing, the flowing tears are in random shapes and colors. It can be helpfully used to deliver a helpless or sad feeling, especially when chatting with someine through social media.
• Demo/Visual Documentation:
  • 

• •  

•  

• Development and Technical Implementation

• Cat’s Drawing Board

• https://editor.p5js.org/ShellyXuan/sketches/Lcg5BoPwX 

• • Brief Description and Concept: 
    • Here is a Cat’s grawing board (I’d like to call it, Mr.Luo). the background can keep changing colors while moving your mouse. Here are functions you can interact with the board: 1. press your mouse and draw threads freely; 2. double click your mouse, then left a white snow spot on it; 3. press any key from a to z, then you can see the cat change a movement; 4. simply move your mouse(imitate using a rubber) to clean the board, or you can just click the CLEAN on the left bottom; 4. press the key 1-9 to change the weight of thread and size of snow spots. When drawing on the board, you can notice two eyes following you and find the thread’s color changed with mouse moving as well. Make a try and enjoy it!
  • Demo/Visual Documentation:(the music was played by my phone. Though it did not belong to the project, I thought it quite suitable Mr.Luo’s grawing board.)

• Development and Technical Implementation

• • Coding: include code snippets that are of particular importance (you worked extra long on them/don’t know why they work/they achieve something crucial to your idea), screenshots of outcomes, short screen recordings, etc.
    • 1. How to show the track of strokes while keeping the color of background changing(the idea of background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150) comes from a class )
      • with the help of TA Sam, I explored the index of transparensy. After trying for countless times by changing the index of transparensy and puting the background(…) in diferent position(like in some if condition sentences). at the last moment I came up with the idea(the green code below) and decided to practice into my cat’s drawing board.
      • //the cat
        background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150,2);
        fill(160,140,140)
        if(catVersion==true){
        fill(160+mouseX/2-mouseY/2,mouseY/2+150,mouseX/2+150,5)
        noStroke()
        ellipse(202,405,410,250)
        stroke(160,140,140)
        strokeWeight(40)
        noFill()
        bezier(20,410,30,397,68,360,118,450)
        strokeWeight(1)
        stroke(0)fill(160,140,140)
        // background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150,2);
        triangle(70,380,185,347,130,420)
        triangle(width-70,380,width-185,347,width-130,420)}else{
        fill(mouseY/2+150,160+mouseX/2-mouseY/2,mouseX/2+150,5)
        noStroke()
        ellipse(202,405,410,250)
        stroke(160,140,140)
        strokeWeight(40)
        noFill()
        bezier(20,380,30,450,120,460,136,445)
        strokeWeight(1)
        stroke(0)fill(160,140,140)
        // background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150,2);
        triangle(114,310,195,345,130,420)
        triangle(width-114,310,width-195,345,width-130,420)}
      • below is one of the unsatisfying attempts
      •  //the cat
        fill(160,140,140)
        if(catVersion==true){
        stroke(160,140,140)
        strokeWeight(40)
        noFill()
        bezier(20,410,30,397,68,360,118,450)
        strokeWeight(1)
        stroke(0)fill(160,140,140)
        background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150,8);
        triangle(70,380,185,347,130,420)
        triangle(width-70,380,width-185,347,width-130,420)}else{
        stroke(160,140,140)
        strokeWeight(40)
        noFill()
        bezier(20,380,30,450,120,460,136,445)
        strokeWeight(1)
        stroke(0)fill(160,140,140)
        background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150,8);
        triangle(114,310,195,345,130,420)
        triangle(width-114,310,width-195,345,width-130,420)
        }
    • 2. I think the changing color of back ground was also a complex process for me. Since I wanted to make the color always changing with mouse moving, it was hard to make the color always seen comfortable. Also, when I tried to use mouseX-mouseY , I found it not alway positive. Thanks to my professor, after serveral attemps, it was managed by abs(). Besides, in order to make unexpected changes, I switch the positions of some parameters:
      • background(mouseX/2+150,160+mouseX/2-mouseY/2,mouseY/2+150);
      • fill(160+mouseX/2-mouseY/2,mouseY/2+150,mouseX/2+150,5);
      • fill(mouseY/2+150,160+mouseX/2-mouseY/2,mouseX/2+150,5);
      • stroke(mouseX/2+30,mouseY/2+30,abs(mouseX/2-mouseY/2));
    • The last time before I wrote down this blog, I recall an idea came up with at the very beginning.  Quite lucky to execute the function of doubleClicked() with the help of Reference in my cat’s drawing board!
      • function doubleClicked() {
        let x1=mouseX
        let y1=mouseY
        fill(255)
        noStroke()
        ellipse(x1,y1,d*8)
        }

• Reflection/Lessons Learned

This idea came into my mind when I heard that the instuctions mentioned “interactive”, “drawing with your mouse and keys”, “unique”(which gave me great courage then to develop this inspiration). By doing this project, I learned much about the use of if&else, key&keyIsPressed&keycode, mouseX&pmouseX&mouseIsPressed&doubleClick function. And I was trying thinking about what is art and what is crazy ideas, which might be a long-term question I have to think about the answer as well as pay more practive and attempts. My Curiosity drived me develop more functions and skills through this process. That’s really a nice feeling. There are two things I want to learn more about and hope to apply into my futural project. One is that making sure that code inside this if statement(lead by keyIsPressed())is only executed once by a boolean variable(like previousLoopKeyPressed). The other one is to explore more about the text formatting .