• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • about this course
  • syllabus
  • rubric
  • labs
  • blog

HCI | TechX

August 11, 2020

HOMEWORK DAY5 RAPHAEL

The original motif

LAB5 VIDEO

var posX;
var posY;

var rot = 1;

var shootCD = 0;
const SHOOTCD = 30;

var mouseClicked = false;

var bulletPigs = [];
var BULLET_SPEED = 10;

function setup() {
	init();
}

function draw() {
	if (mouseIsPressed){
		background(255);
		posX += (mouseX - posX) * 0.1;
		posY += (mouseY - posY) * 0.1;
		
		rot = atan((posY - mouseY) / (posX - mouseX));
		
		push();
			translate(posX, posY);
			rotate(rot);
			mainPig = new pig(270);
			mainPig.drawPig();
		
			if (shootCD < SHOOTCD) {
			 	shootCD ++
			} else {
				shootCD = 0;
				var bPig = new bulletPig(rot);
				bulletPigs.push(bPig);
			}
		
		pop();
		
		if (bulletPigs.length > 0){
			var currentBulletPig;
			for (var i = 0; i < bulletPigs.length; i++){
				currentBulletPig = bulletPigs[i];
				currentBulletPig.drawPig();
			}
		}
		
	}
}

class pig{
	constructor(DesiredSize){
		this.size = DesiredSize;
	}
	
	drawPig(){
		
		// Ratio Sample
		// 		noStroke();
		// 		fill(255, 150, 150);
		// 		ellipse(250, 150, 270, 202);

		// 		fill(255, 200, 200);
		// 		ellipse(250, 170, 150, 112);

		// 		fill(255, 100, 100);
		// 		ellipse(220, 170, 30, 30);
		// 		ellipse(280, 170, 30, 30);
		
		noStroke();
		var width = this.size;
		var height = this.size * 0.75;
		
		// Outer Body
		fill(255, 150, 150);
		ellipse(0, 0, width, height);
		
		// Nose 1
		fill(255, 200, 200);
		ellipse(0, 0.1 * width, width * 0.618, height * 0.618);
	
		// Nose 2
		fill(255, 100, 100);
		ellipse(-0.1 * width, 0.1 * width, width * 0.1, width * 0.1);
		ellipse(0.1 * width, 0.1 * width, width * 0.1, width * 0.1);
		
		// Eyes
		fill(0, 0, 0);
		ellipse(-0.2 * width, -0.2 * height, width * 0.07, width * 0.07);
		ellipse(0.2 * width, -0.2 * height, width * 0.07, width * 0.07);
		
		// Ears
		fill(255, 150, 150);
		push();
			translate(-0.25 * width, -0.39 * height);
			rotate(-30);
			triangle(-0.1 * width, 0, 0, -0.2 * height, 0.1 * width, 0);
		pop();
		push();
			translate(0.25 * width, -0.39 * height);
			rotate(30);
			triangle(-0.1 * width, 0, 0, -0.2 * height, 0.1 * width, 0);
		pop();
		
		
	}
}

class bulletPig{
	
	constructor(currentRotation){
		this.direction = currentRotation;
		this.x = sin(currentRotation) * 20 + posX;
		this.y = cos(currentRotation) * 20 + posY;
		this.pig = new pig(50);
	}
	
	drawPig(){
		push();
			translate(this.x, this.y);
			this.x += sin(this.direction) * BULLET_SPEED;
			this.y += cos(this.direction) * BULLET_SPEED;
			this.pig.drawPig();
		pop();
	}
}

function init(){
	posX = windowWidth / 2; 
	posY = windowHeight / 2;
	createCanvas(windowWidth, windowHeight);
	background(255);
	angleMode(DEGREES);
	
	push();
		translate(posX, posY);
		mainPig = new pig(270);
		mainPig.drawPig();
	pop();
}
  • Is there any value in recreating an existing image/drawing/graphic using computational media? What is it?
    • I think computational media provides novel mediums for better interaction experiences, and those experiences are unique with computational media. Many times we can never find those images in nature, and that’s the value of computational media.
  • Do you think that both, hand and computational drawings cause the same feelings in the viewer? 
    • I would say yes and no. In some aspects, like the feeling of “this is an amazing drawing”, or “this is beautiful”, might be the same. However, some other feelings might vary – especially in terms of interactions, since computational medium can provide more dynamic interactions.
  • Do you think technology will replace humans in the future? What about art? Using the computer to draw, makes the computer the artist? can computers be artists?
    • My answer would be yes and no again. Definitely, computer arts is a new form of arts. But similar to traditional arts also, there are many schools. I would say computer arts is just another school also. There are definitely some advantages of computer arts, like the feeling of neatness and order. However, it can never reproduce those feelings based on complexity – like the feeling you can get from Monnalisa.

Filed Under: blog

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Recent Posts

  • Homework Day 8 – Simon Hsieh
  • homework day 8 – Michael
  • Homework-day8-Sophie
  • Harry Hao HW DAY8
  • homework day 8 – dora

Copyright © 2025 HCI | TechX on the Brunch Pro Theme