Assignment 1

Assignment 1

 

void setup() {
  // set the size of the window
  size(400,400);
}

void draw()
{
// draw a black background
  background(0);

// set CENTER mode
ellipseMode(CENTER);

// BILLYS HEAD
  stroke(175,255,0);
  fill(155,0,175);
  ellipse(mouseX,mouseY-30,40,30);

//BILLYS BODY
  rectMode(CORNER);
  rect(170,150,40,30);

  rect(170,150,10,30);
  rect(200,150,10,30);
//BILLYS SHOULDERS
  point(160,140);
  point(220,140);
  fill (255);

// BILLYS ARMS

//BILLYS LEFT ARM
  strokeWeight(10);
  line(160,160,120,120);

//BILLYS RIGHT ARM
  strokeWeight(10);
  line(220,160,250,135);

//BILLYS LEGS
  //LEFT
  rect(170,190,10,40);

//RIGHT
  rect(200,190,10,40);

//BILLYS FEET
  //left foot
  rect(150,220,10,10);

  //right foot
  rect (200,220,30,10);
}

Week1 and half Week2

First of all I searched some ActionScript to help me with building the star.

 

moveTo(104, 1); //start point just like point(mouseX,mouseY) in 
processing

lineTo(128, 77);

lineTo(208, 77);

lineTo(144, 122);

lineTo(168, 198);

lineTo(104, 151);

 

void setup(){

size(500,500);

}

 

Script below is my initial code.

 

void draw(){

background(200);

stroke(255);

line(mouseX,mouseY,mouseX+24,mouseY+76);

line(mouseX+24,mouseY+76,mouseX+80,mouseY+76);

line(mouseX+80,mouseY+76,mouseX+40,mouseY+121);

line(mouseX+40,mouseY+121,mouseX+64,mouseY+187);

line(mouseX+64,mouseY+187,mouseX,mouseY+150);

line(mouseX,mouseY+150,mouseX-64,mouseY+187);

line(mouseX-64,mouseY+187,mouseX-40,mouseY+121);

line(mouseX-40,mouseY+121,mouseX-80,mouseY+76);

line(mouseX-80,mouseY+76,mouseX-24,mouseY+76);

line(mouseX-24,mouseY+76,mouseX,mouseY);

}

 

 

Then I  just polished the star.

void draw(){

background(159,232,244);

stroke(255,236,77);

 

fill(255,236,77,130);

beginShape();

vertex(mouseX,mouseY-250);

vertex(mouseX+24,mouseY+70-250);

vertex(mouseX+94,mouseY+70-250);

vertex(mouseX+40,mouseY+115-250);

vertex(mouseX+64,mouseY+181-250);

vertex(mouseX,mouseY+142-250);

vertex(mouseX-64,mouseY+181-250);

vertex(mouseX-40,mouseY+115-250);

vertex(mouseX-94,mouseY+70-250);

vertex(mouseX-24,mouseY+70-250);

endShape(CLOSE);

 

strokeWeight(5);

smooth();

}

 

 

I wanna write  verticals ball continuously drop from the star, but I did not make out, I think things wrong with the DRAW . And  I need array to build my imaged effect. I will working on that.

 

That is my final assignment.

 

final

assignment01

sketch

final

void setup() {
  size(200,200);

}

void draw() {
  background(255);

 //set CENTER mode
 ellipseMode(CENTER);

 //Draw Frog's body
 noStroke();
 fill(225,252,0);
 ellipse(100,100,50,73);
 fill(255);
 ellipse(100,90,40,70);

 //Draw Frog's feet
 stroke(225,252,0);
 strokeWeight(5);
 line(100,130,140,110);
 line(140,110,160,130);
 line(100,130,60,110);
 line(60,110,40,130);
 noStroke();
 fill(225,252,0);
 ellipse(40,130,30,20);
 ellipse(160,130,30,20);

 //Draw Frog's head
  noStroke();
  fill(225,252,0);
 ellipse(100,75,100,50);

 //Draw Frog's eyes
  noStroke();
  fill(225,252,0);
 ellipse(60,50,30,30);
 ellipse(140,50,30,30);

 //Draw Frog's eyes' ball
  noStroke();
  fill(255);
 ellipse(59,50,25,25);
 ellipse(141,50,25,25);
 fill(0);
 ellipse(62,49,12,12);
 ellipse(138,49,12,12);

 //Draw Frog's highlight
  noStroke();
  fill(255);
 ellipse(100,60,20,10);

 //Draw Frog's mouth
 stroke(200,100,100);
 strokeWeight(3);
 line(70,75,100,83);
 line(100,83,130,75);

 }

Assignment 1

from Shino (Che Yan)

http://openprocessing.org/visuals/?visualID=38658

///////I’ve edit my code , now the eyes of panda coulf follow the mouse to move (within the right place–the black circle), and when press the key ,the panda will turn to the bear!//////

oooops finally I could upload my assignment 1..but it’s a still image now, I will add mouse interaction later and update for this blog.

I’m still working on chapter456 to get familar with “viarable and condition code” thing… It’s become diffcult to add movement into the sketch..

so I’d better to prepare lesson before tomorrow’s class, or i’ll get lost again – -!!

here are the codes for my work

void setup(){
size(300,300);
smooth();
}
void draw(){
background(255,204,15);
//ears of panda
fill(0);
ellipse(80,100,70,70);
ellipse(220,100,70,70);
//head of panda
fill(255);
strokeWeight(4);
ellipse(150,150,200,180);
//eyes of panda
fill(0);
ellipse(100,160,60,70);
ellipse(200,160,60,70);
float mx=constrain(mouseX,84,116);
float my=constrain(mouseY,142,178);
fill(255);
ellipse(mx,my,12,12);
ellipse(mx+100,my,12,12);
//nose of panda
fill(0);
ellipse(150,200,15,10);
//mouse of panda
noFill();
stroke(0);
strokeWeight(4);
bezier(145,220,145,225,155,225,155,220);
if (keyPressed) {
//background of bear
noStroke();
fill(0,210,245);
rect(0,0,300,300);
//ears of bear
fill(142,64,0);
stroke(0);
strokeWeight(4);
ellipse(80,100,70,70);
ellipse(220,100,70,70);
//head of bear
fill(142,64,0);
stroke(0);
strokeWeight(4);
ellipse(150,150,200,180);
//eyes of bear
fill(255);
ellipse(100,150,30,30);
ellipse(200,150,30,30);
fill(0);
ellipse(90,150,7,7);
ellipse(190,150,7,7);
//mouse of bear
strokeWeight(2);
fill(230,140,0);
stroke(0);
ellipse(150,200,80,70);
stroke(0);
strokeWeight(2);
line(150,170,150,215);
line(150,215,142,220);
line(150,215,158,220);
//nose of bear
fill(0);
ellipse(150,170,20,15);}}

 

Assignment_1: Geometrics and Procedural Animation

I had a bit of fun with Assignment 1. I’ve OD’d on robots so I decided to make something else. Also, I can’t draw to save my life so I opted for a different angle. I noticed that Leonardo DaVinci used to practise his drawing and math skills by plotting out what is known as the “Flower of Life”, which is really just a collection of circles arranged in a very specific way.

I figured that if it’s a good enough excercise for Leo, it’s good enough for me! So, what did I do? Well, first I drew out 7 circles that were equally spaced from each other – what differed was the location of the centre of each circle within the canvas.

To do this I had figure out a bit of trigonometry (I’m not good at math), so this required a lot of googleing and whatnot. Good thing I kinda understand it now as this knowledge really helped in my effort to animate the whole thing.

At first I wanted to simply rotate the entire canvas, but I was not able to find a way to do this, so instead I did a bit of math to find out where the centres of each curcle would be when they are in motion about the centered circle. Thanks to the Processing website I got it working via hacking some pre-existing code.

How can you use it? Simply click this link and check it out. Rotation of the geometric system is attached to your mouse position in the x-axis. As the cursor approaches the right side of the canvas the rotation increases in speed.

The first image shows the 7 rings. I’ve coloured them for fun.

The second image shows what the scene looks like once the seven coloured circles have been roated slowly – leaving trails of colour behind them.

Finally, when you use a very slow rotation you can start to see a moire interference pattern emerge, which I find to be really fun to look at, and even more fun to influence via changing the speed of the animation. Generally I am very interested in intereference patterns and am thinking about doing some sort of animated or circular “Double Slit Experiment” – which to my knowledge has not yet been done.

Finally I’ve noticed that the images that are rendered via the web-based version of my animation differ from the same code when executed on my desktop. That’s unfortunate.

Can you discover any neat tricks with this little applet? Let me know!

Assignment – 01

Here’s my first assignment post!

First 3 chapters were generally easy…but coding took a lot of time!

What I did looks pretty simple, yet took forever to create!

So, I decided to try and replicate the illustration below that I picked up a while ago.

As you may have notice, my final sketch differs from the original.

There’s no hair for now, just a hat that moves with the mouse!

Here’s the link to the sketch: http://www.openprocessing.org/visuals/?visualID=37759

Hopefully will add some more features soon!

ASSIGNMENT 1 – Robot Building

Below is the summery of what I have learnt and accomplished from the first week and first 3 chapters of the book. I find it’s so interesting to be able to draw something digitally and then let it interact. It’s like using flash but you have more control over the object.

Chapter 1 &2: Creating/Drawing a character on processing

This is the paper sketch version of the robot I have come up with. I roughly calculated and mapped out the location of each body part in the draft as well so it would be easier to build in processing.

The only tricky part of the robot is 4 round corners of its head.  There is no function that let us draw a round corner rectangular (Gosh I miss Illustrator!). I therefore used “arc” to draw the curves, used lines to connect the curves together and 2 rectangular to color the inside of the head. It took so many steps to just finish this simple shape. Anyone has better solution please let me know; it would be a great help!

Final result

The code I used to draw the robot with its head detail highlighted

Chapter 3 Interaction

Now it’s the fun part! Though with the functions we learnt from the first 3 chapters we haven’t been able to do much yet, for me it was great fun in mapping simple interactions with the movements of the mouse using mouseX and mouseY. Following the tutorials, my robot now can follow the mouse, its eyes are able to move according to where it’s going and the background can change random colors.

For me the hard part was the color changing function of the background. Since the size of my window is larger than 255 (400×600), the random mouseX and mouseY values can go over 255 lots of the time. As a result using something like background(mouseX,mousey,168) might not work. To solve this I did a little math with abs() to make sure the random value can not be anything but 0-255, as below

background(abs(mouseY-145),abs(mouseX/2 -45),168);

Yup! That’s pretty much it. Here is the link to my final project for lesson 1.

SnowMan on the move- my first processing attempt!

My first attempt with processing was actually quite fun! it took me some time to take off the dust from that side of my brain- it’s been a while since I had to think about X and Y axis. I also found some language barrier issues (I had no idea what diam means….). But after I took a couple of days to dive into it I found it really satisfying. Writing a line of code and seeing your character move instantly is a pretty cool experience. So because I have a thing for creatures and a fear from winter, I made Smoopy- a cute little SnowMan to keep me safe through the changing season while I am battling with Processing.

This is how Smoopy came to life:

it took some time to create the small details in his bosy- the fingers, the buttons on   his belly, his nose…and to position them in the right place so he doesn’t look flat.

 

 

 

 

 

 

 

 

As soon as I was happy with the drawing, I started to play with a few different ways to animate him in order to make the experience more interactive. In the first attempt the viewer can click anywhere on the screen and snow flakes will appear. If you press on any key the background will go back its original colour. These are magical, colourful snowflakes so click anywhere on the screen to see the change.

 click here to play:

http://www.openprocessing.org/visuals/?visualID=37584

 

 

 

* I really wanted to make the hands move up while the snowflakes fall and managed to do it with a mouseEvent

if (mouseEvent.getClickCount()==1)line(226, 240, 260, 200);

However, I ended up with 2 sets of hands pointing down and pointing up. For Assignment 2 I am planning to work on it a bit more by adding variables to the positions of the hands and play with move mouse events.

 

 

 

 

I really wanted to try and make Smoopy move across the screen in relation to the location of the mouse. It took a long time to make it work because he has so many body parts, but I am really happy with the end result. I love how you can play with mouseX and pmouseX to create that dragging body effect so that the movement seem more realistic.

click below to play:

http://www.openprocessing.org/visuals/?visualID=37585

Next step for this one is to add funky music!

* I read that in order to add music , I will need to use an external library since processing doesn’t have a built-in support for sound. I will try it out in the next round.

 

Assignment 1

hi … I really enjoyed working through the first three chapters; I tried to get fancy when building my ‘creature’ by adding arcs to represent arms and body ; but I got snookered when asked to animate the arcs. so I’m stuck with a static little sketch. That said, I’m looking forward to being able to make his arms wave!

PS I did read through and play around with  the code for ZOOg; so I get it…

 

 





void setup() {

size(400, 400);

}

void draw() {

background(255);

smooth();

//head is oval

ellipse(mouseX, mouseY, 50, 75);

 

//three balls on head

ellipse(mouseX-20, mouseY-40, 25, 25);

ellipse(mouseX, mouseY-50, 25, 25);

ellipse(mouseX+20, mouseY-40, 25, 25);

 

//eyebrows

line(40, 42, 45, 42);

line(58, 40, 64, 43);

 

//mouth

line(47, 60, 57, 60);

 

//eye colour

fill(255, 0, 255);

//eyes

ellipse(42.5, 48, 7, 5);

ellipse(60.5, 48, 7, 5);

 

//curvy body line

noFill();

stroke(0);

beginShape();

curveVertex(75, 50); // the first control point

curveVertex(75, 50); // is also the start point of curve

curveVertex(80, 60);

curveVertex(100, 100);

curveVertex(60, 120);

curveVertex(100, 150); // the last point of curve

curveVertex(100, 150); // is also the last control point

endShape();

 

ellipse(65, 160, 35, 35);

//wheel

line(82.5, 160, 100, 160);

ellipse(117.5, 160, 35, 35);

//wheel

 

arc(117, 75, 50, 50, -PI, 0);  // upper half of circle

arc(66, 75, 50, 50, 0, PI / 2.0); // lower quarter circle

 

stroke(0);

println(“Let’s Ride!”);

//rect(mouseX, mouseY, 50, 50);

}

 

Lesson 1

Lot’s of fun but I’m totally lost after this second class:0) Guess I know what I’ll be doing this weekend:0(

Here’s my post for the first assignment.