![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
function setup() {
createCanvas(400, 400);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
ears ();
drawFace();
noFill();
drawMouth();
drawTeeth();
drawLip();
eyeBallOne();
eyeBallTwo();
}
function drawMouth() {
strokeWeight(4);
fill(255,0,0,255);
curve(105, 250, 105, 200, 295, 200, 295, 250);
curve(105, -400, 105, 200, 295, 200, 295, -400);
}
function drawLip() {
strokeWeight(4);
stroke(0);
noFill();
curve(105, 250, 105, 200, 295, 200, 295, 250);
curve(105, -400, 105, 200, 295, 200, 295, -400);
}
function drawTeeth() {
strokeWeight(3);
stroke(255);
line(105, 200, 135, 248);
line(295, 200, 265, 248);
line(135, 248, 165, 195);
line(265, 248, 235, 195);
line (165, 195, 200, 275);
line (235, 195, 200, 275);
}
function drawFace() {
strokeWeight(5);
let xValue = mouseX/width*255;
let yValue = mouseY/width*255;
let zValue = (xValue+yValue)/4;
fill(xValue,yValue,zValue+120);
bezier(50, 225, 50, 400, 350, 400, 350, 225);
bezier(50, 225, 50, -50, 350, -50, 350, 225);
}
function eyeBallOne() {
strokeWeight(4);
fill(255,255,255);
ellipse (150,150,50);
let angle = atan2(mouseY - 150, mouseX - 150); // calculate arctangent //
let x = 150 + 20*0.75*cos(angle);
let y = 150 + 20*0.75*sin(angle);
fill(255,0,255);
circle (x,y,15);
}
function eyeBallTwo() {
strokeWeight(4);
fill(255,255,255);
ellipse (250,150,50);
let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
let x = 250 + 20*0.75*cos(angle);
let y = 150 + 20*0.75*sin(angle);
fill(150,150,0);
circle (x,y,15);
}
function ears() {
strokeWeight(5);
let xValue = mouseX/width*255;
let yValue = mouseY/width*255;
let zValue = (xValue+yValue)/4;
fill(xValue,yValue,zValue+120,100);
ellipse (350,150,50.100);
ellipse (50,150,50.100);
}Category: SectionA
LO: My Inspiration
The technological art/game that I admire the most is the pokemon series, especially the first pokemon game ever – Pokemon red and blue. The first reason that I admire it the most is that it is first of its kind, a capture and collect JRPG game, and the second reason is that the developer secretly hid one easter egg inside the game which made the game super popular. The game itself is created and directed by Satoshi Tajiri using the C++ language on the gameboy platform, and according to the director, Tajiri himself, the game was influenced by another JRPG game called The Final Fantasy Legend. Because of the unexpected popularity that the game received due to its unique gameplay, art style, and merchandise, the team is able to create dozens of its squeals even till today.
Project-01
Undertale Leo
sketch
function setup() {
createCanvas(250, 350);
background(242, 112, 155); //pink
}
function draw() {
fill(241, 194, 126) //skin in the backdrop
rect(60, 80, 140, 90)
fill(0); //hair and eyes
rect(80, 20, 90, 40); //main black rect
rect(60, 30, 20, 40);
square(160, 60, 10);
rect(170, 30, 20, 50);
rect(190, 40, 10, 50);
rect(180, 80, 10, 20);
rect(200, 50, 10, 140);
rect(210, 80, 10, 110);
rect(60, 70, 10, 40);
rect(50, 50, 10, 140);
rect(40, 70, 10, 100);
rect(60, 130, 10, 50);
rect(70, 140, 10, 50);
rect(80, 150, 10, 30);
rect(90, 150, 10, 20);
rect(100, 150, 10, 20);
rect(100, 170, 50, 10);
rect(140, 150, 10, 20);
rect(150, 140, 10, 30);
rect(160, 130, 10, 50);
rect(170, 130, 10, 50);
rect(180, 120, 10, 70);
rect(190, 110, 10, 70);
rect(80, 80, 20, 10);
rect(140, 80, 20, 10);
rect(80, 100, 20, 10);
rect(140, 100, 20, 10);
rect(110, 120, 20, 10);
rect(70, 240, 110, 10); //belt
noLoop();
fill(1, 162, 232); //bandana
square(90, 60, 10);
square(140, 60, 10);
square(70, 70, 10);
square(120, 70, 10);
square(160, 70, 10);
noLoop();
fill(247, 92, 100);
square(110, 130, 10); //tongue
noLoop();
strokeWeight(0)
fill(237, 29, 37); //red shirt
rect(100, 180, 50, 10);
rect(90, 190, 60, 10);
rect(100, 200, 50, 10);
rect(90, 210, 50, 10);
rect(70, 220, 30, 10);
rect(80, 200, 10, 10);
rect(70, 230, 30, 10);
rect(110, 230, 70, 10);
rect(120, 220, 30, 10);
rect(150, 210, 20, 10);
rect(160, 220, 20, 10);
square(60, 200, 10);
square(50, 220, 10);
square(180, 200, 10);
square(190, 220, 10);
noLoop();
fill(52, 32, 13); //brown outline
square(90, 180, 10);
rect(150, 180, 20, 10);
rect(60, 190, 30, 10);
rect(160, 190, 30, 10);
square(50, 200, 10);
square(70, 200, 10);
square(170, 200, 10);
square(190, 200, 10);
rect(40, 210, 10, 50);
rect(60, 210, 10, 70);
square(170, 210, 10);
rect(180, 210, 10, 70);
rect(200, 210, 10, 50);
square(50, 230, 10);
square(190, 230, 10);
square(50, 250, 10);
square(190, 250, 10);
rect(60, 280, 60, 10);
rect(130, 280, 60, 10);
rect(110, 260, 10, 50);
square(120, 260, 10);
rect(130, 260, 10, 50);
rect(80, 290, 30, 10);
rect(70, 300, 40, 10);
rect(140, 290, 30, 10);
rect(140, 300, 40, 10);
noLoop();
fill(255, 242, 1); //yellow highlights
square(80, 210, 10);
square(90, 200, 10);
square(100, 230, 10);
square(110, 220, 10);
square(140, 210, 10);
square(150, 220, 10);
square(150, 190, 10);
square(190, 210, 10);
noLoop();
fill(255, 201, 15); //yellow-orange
square(50, 210, 10);
square(150, 200, 10);
noLoop()
fill(255, 127, 40); //orange
square(70, 210, 10);
square(100, 220, 10);
square(160, 200, 10);
noLoop();
fill(241, 194, 126); //hands&knees
square(50, 240, 10);
square(190, 240, 10);
rect(70, 260, 20, 10);
rect(150, 260, 20, 10);
noLoop();
fill(255); //jean tears
square(70, 270, 10);
square(140, 270, 10);
square(170, 270, 10);
noLoop();
fill(111, 126, 149); //jeans
rect(70, 250, 110, 10);
rect(90, 260, 20, 10);
square(140, 260, 10);
square(170, 260, 10);
rect(80, 270, 30, 10);
rect(150, 270, 20, 10);
}
project 01
sketch
function setup() {
createCanvas(450, 550);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(245,245,220);
fill(100);
noStroke();
triangle(width/2, 400, width,550, 0, 550 );
if(mouseX > 400){
//body
background(200,200, random(0,200));
fill(random(100,200),random(30,150), random(100,255));
triangle(width/2, 400, width-random(20,50),550, 0, 550-random(20,50) );
fill(225,200,255);
strokeWeight(1);
stroke(100);
ellipse(width/2 +10, 270, 350, 470);
fill(255);
strokeWeight(random(1,10));
stroke(200,190,255);
ellipse(125-random(0,10),200,40,130);
ellipse(325-random(0,20),200,170,60);
fill(random(0,10),random(20,70),random(10,20));
circle(125,200,55);
fill(random(0,10),random(20,70),random(10,20));
circle(350,200,80);
strokeWeight(2);
fill(random(0,255),random(100,200),random(100,200));
circle(125,200,random(10,40));
fill(random(100,200),random(0,200),random(100,200));
circle(350,200,random(30,60));
strokeWeight(3);
stroke(200,200,100);
fill(0);
//nose
line(width/2-random(0,7),220-random(0,5), width/2 -20,350 );
line(width/2 -20,350, 300,300-random(0,7) );
triangle(width/2 -20,350, width/2 -15, 315, width/2 -7, 350);
//mouth + teeth
stroke(60);
fill(255,30,100);
arc(width/2,400,100,100,0,PI);
fill(250);
rect(width/2-20-random(0,5),400,15,25);
square(width/2-10-random(0,5),400,20);
rect(width/2-random(0,5),400,20,30);
square(width/2+10-random(0,5),400,20);
square(width/2+20-random(0,5),400,20);
// hair
} else {
//face
fill(225,200,183);
strokeWeight(1);
stroke(100);
ellipse(width/2 +10, 270, 350, 470);
//eyes
fill(250);
strokeWeight(2);
stroke(3);
ellipse(150,210,70, mouseX+40);
ellipse(340,210,70,mouseX+40);
fill(78,53,36);
circle(150,210,30);
fill(78,53,36);
circle(340,210,30);
//nose
strokeWeight(1);
fill(225,184,153);
ellipse(width/2+10, 280, 12, 100);
ellipse(width/2+10, 324,40,25);
fill(0);
circle(width/2,326, 7);
circle(width/2 + 15,326, 7);
// mouth
strokeWeight(10);
stroke(255,10,30);
ellipse(width/2, 400, mouseX+20, 95);
//hair
strokeWeight(10);
stroke(0);
line(width/2 -110,100,mouseX-110,mouseY);
line(width/2 -90,100, mouseX-90,mouseY);
line(width/2 -70,100, mouseX-70,mouseY);
line(width/2 -50,100, mouseX-50,mouseY);
line(width/2 -30,100, mouseX-30,mouseY);
line(width/2 -10,100, mouseX-10,mouseY);
line(width/2 +10,100, mouseX+10,mouseY);
line(width/2 +30,100, mouseX+30,mouseY);
line(width/2 +50,100, mouseX+50,mouseY);
line(width/2 +70,100, mouseX+70,mouseY);
line(width/2 +90,100, mouseX+90,mouseY);
line(width/2 +110,100, mouseX+90,mouseY);
line(width/2 -100,80,mouseX-110,mouseY);
line(width/2 -80,80, mouseX-90,mouseY);
line(width/2 -60,80, mouseX-70,mouseY);
line(width/2 -40,80, mouseX-50,mouseY);
line(width/2 -20,80, mouseX-30,mouseY);
line(width/2 ,80, mouseX-10,mouseY);
line(width/2 +20,80, mouseX+10,mouseY);
line(width/2 +40,80, mouseX+30,mouseY);
line(width/2 +60,80, mouseX+50,mouseY);
line(width/2 +80,80, mouseX+70,mouseY);
line(width/2 +100,80, mouseX+90,mouseY);
line(width/2 +120,80, mouseX+90,mouseY);
line(width/2 -90,60, mouseX-90,mouseY);
line(width/2 -70,60, mouseX-70,mouseY);
line(width/2 -50,60, mouseX-50,mouseY);
line(width/2 -30,60, mouseX-30,mouseY);
line(width/2 -10,60, mouseX-10,mouseY);
line(width/2 +10,60, mouseX+10,mouseY);
line(width/2 +30,60, mouseX+30,mouseY);
line(width/2 +50,60, mouseX+50,mouseY);
line(width/2 +70,60, mouseX+70,mouseY);
line(width/2 +90,60, mouseX+90,mouseY);
}
}
Blog 1
As a highschooler in Silicon Valley, it was inevitable for my family to have tons of family friends that are very well involved in the CS scene, despite my family not having any computer or engineering backgrounds. One of our closest friends, Fengwei Lee and his startup, REALITEER, developed a series of VR/AR programs that aimed to use VR/AR to promote mental and physical well-being. These programs included games that had you mimic taichi, dance, and other types of choreography to a selected audio track, with lightsabers that were used to hit targets as they approached you. There were specific programs within for different purposes, such as relaxation, exercise, dance, and kids’ entertainment. As far as I know, his startup and him took nearly two year experimenting with different strategies and codes. Furthermore, from the finished product, the project used various commercial applications, like Unity, and original codes. I assume that the project was inspired by the creator, Fengwei’s time working in companies like Dreamwork, and his own family. This was a way to entertain and help people of all ages from toddlers to seniors to feel better. Moreover, revisiting this project made me think about the future of VR/AR – that computer science can have a much more obvious and tangible effect on the general public’s well being, in this case, encouraging people to be active mentally and physically. I also predict that as society becomes more and more digital, with the creation of platforms like the Meta Verse, developing health promoting Virtual and Augmented reality is critical.
Link to the start up and it’s projects: https://realiteer.com/about/
Alex Dragulescu’s “Real Body Meets Data Body”
Alexia Forsyth
“Real Body Meets Data Body” is part of Dragulescu’s Data Ghosts series. This painting, like others in this series, is created through software development creating a visual array of dots. The picture itself shows a person walking through what appears to be an obstacle course with a weapon in their hands. I really admire the message behind the piece: the shifting relationship between man and technology. He raises questions concerning technological addictions and ethics. I also appreciate how it harmonizes with the other pieces in his Data Ghosts series.
The artist does not go into specifics on what program they used to develop the art, only saying: “ His projects bridge multiple computational domains including information visualization, social media design, and computer games…” (Dragulescu). The program looks to have specific lines to develop the relative shape and then a command to fill in between spaces randomly with a certain number of dots. I assume he utilized functions like “random()”. Dragulescu’s artistry appears in the unique shapes he computes and his mastery over three-dimensional computation.
Link: https://www.archivebay.com/site/sq.ro–2020-05-17__13-15-46–759493
Project 1: My Self Portrait
My most challenging part of the post is my nose and the background, because I tried to draw curves.
jiayiheadDownload
function setup() {
createCanvas(480, 650);
background(250,248,242);
}
function draw() {
stroke(0) //Background
strokeWeight(2);
fill(255);
rect(0,410,31,109);
stroke(0);
strokeWeight(2);
fill(255);
rect(0,420,20,93);
line(62,26,480,18);
line(61,26,40,404);
line(0,0,61,26);
line(0,233,48.5,233.5);
line(0,245,48,246);
fill(65,65,65);
arc(240, 500, 480,68, 0, 0);
stroke(0); //Background
strokeWeight(0); //shirts
fill(65,65,65);
rect(0,500,490,200);
fill(250);
quad(240, 630, 275, 630, 275, 650, 240, 650);
fill(250);
quad(240-50, 630+10, 275-50, 630, 275-50, 650, 240-50, 650);
fill(250);
quad(240+50, 630, 275+50, 630+10, 275+50, 650, 240+50, 650);
strokeWeight(10)
fill(65,65,65)
ellipse(190-10, 500-40, 320, 200);
strokeWeight(10)
fill(65,65,65)
ellipse(190, 500, 320, 200);
strokeWeight(5)
fill(65,65,65)
ellipse(190, 500, 256, 160);
strokeWeight(2)
x=-40
y=75
triangle(190+x, 500+y,210+x,519+y, 185+x, 520+y);
triangle(190+x, 505+y,205+x,514+y, 190+x, 515+y);
x=+50
y=70
triangle(190+x, 500+y,210+x,519+y, 185+x, 520+y);
triangle(190+x, 505+y,205+x,514+y, 190+x, 515+y); //Shirt Ends
stroke(0);
strokeWeight(5);
fill(255,204,153);
rect(150,480,110,60);//head
fill(255,204,153)
ellipse(80,230,30,50)
ellipse(370,230,30,50)
fill(255,204,153);
ellipse(225,280,300,480)
fill(0)
triangle(100, 140, 100, 50,180, 50);
triangle(350, 140,350,50,270,50);
rect(150,35,150,50)
triangle(125, 185, 200, 190,150, 180);
triangle(300, 185, 225, 190,275, 180)
fill(250,245,255)
ellipse(155,225 , 75, 25);
ellipse(270, 225, 75, 25);
fill(0)
circle(155,225 , 25);
circle(270, 225, 25);
line(190,220,140,210)
line(280,210,230,220)
line(230,300,245,350)
line(200,300,190,350)
fill(255,204,153)
bezier(190,350, 180,380 , 205, 350, 205, 350);
x=20
bezier(190+x,350, 200+x,380 , 205+x, 350, 205+x, 350);
x=40
bezier(190+x,350, 200+x,380 , 205+x, 350, 205+x, 350);
fill(0)
circle(205, 357, 13);
circle(227, 357, 13);
fill(233,34,74)
ellipse(225, 450, 75, 25);
y=-15
x=-5
bezier(225+x,460+y,240+x,435+y+10 ,240+x, 435+y+10,265+x, 460+y);
y=-15
x=-35
bezier(225+x,460+y,240+x,435+y+10 ,240+x, 435+y+10,265+x, 460+y);
line(225-35,450,265-5,450)
fill(0)
circle(130,170,3)
//head
noLoop()
}
Looking Outwards: 01
Recently, I’ve been interested in photogrammetry, most notably 3D rendering and editing. I’ve gotten a chance to work with photogrammetry in the past, though I’ve been fascinated in implementing these 3D models into graphic design. Lucas Milner, who runs a blog under his name: (lucasmilner.com/180523blog), documents his 3D modeling projects and I’ve found his work mesmerizing. Photogrammetry is used as a quick modeling creation tool, so Milner didn’t spend too much time on this project. Photogrammetry works by taking pictures of an object and scanning them through a software. What one does next with this render is up to the artist. Metashape is a popular program to create these models. Milner used his 3D model in order to create an entirely different shoe design; seemingly inspired by the many elaborate shoe advertisements that we’re often exposed to. This project is a clear example of taking something simple and creating an original, repurposed work out of it. One can use a simple object to create something entirely new and inspirational for their broader audience. This is exactly how art is created: an artist always has an inspiration, and with that they can implement their own vision into the mediums they see fit. Discovering art from other artists is what has fueled my own passion for creating, and I hope to be that inspiration for someone else, as well.
LO: My Inspiration
The interactive game I admire most about is the dark soul series of game, not only for their highly criticized high level of difficulty, but also for the art of 3D medieval dark fantasy in it. With its hardcore difficulty, it points to the future of game as a form sport instead of just a form entertainment. Hidetaka Miyazaki spend over 5 years to create this fantastic game. Hidetaka Miyazaki ‘s Dark Souls creation was inspired by real world architecture such as Milan Cathedral and Château de Chambord, and his previous creation “Demon’s Soul”. To my knowledge the game was sold by the company FormSoftware, and I assume it was developed with commercial software.
Links of Dark Soul III and Dark Soul I-III(Japanese) by Hidetaka Miyazaki:
https://store.steampowered.com/app/374320/DARK_SOULS_III/
https://www.darksouls.jp/
Project 01
this is my project 1
sketch
function setup() {
createCanvas(350, 405);
background(224, 179, 179);
text("Xinran Yu, Section A");
}
function draw() {
strokeWeight(0);
//hair
if(mouseX < (width/2)) {
fill(79, 62, 53);
ellipse(170, 190, 200, 200);
rect(70, 200, 200, 250)
} else if(mouseX > (width/2)) {
fill(35, 35, 35);
ellipse(170, 190, 200, 200);
rect(70, 200, 200, 250);
}
//ear
fill(210, 159, 137);
ellipse(95, 220, 20, 40);
ellipse(245, 220, 20, 40);
fill(245, 208, 155);
rect(91, 232, 5, 40);
rect(245, 232, 5, 40);
//neck
fill(177, 156, 144);
triangle(135, 280, 205, 280, 170, 370);
//face
fill(240, 221, 210);
ellipse(170, 210, 150, 170);
//eyes
fill(0)
ellipse(140, 200, 20, 30);
ellipse(200, 200, 20, 30);
fill(255, 255, 255, 150);
ellipse(136, 203, 10, 15);
ellipse(196, 203, 10, 15);
//clothes
fill(85, 112, 142);
rect(95, 330, 150, 200);
ellipse(95, 405, 159, 150);
ellipse(255, 405, 150, 150);
fill(122, 163, 208);
triangle(95, 330, 245, 330, 170, 380);
//eyebrows
strokeWeight(2);
noFill();
beginShape();
curveVertex(125, 177);
curveVertex(125, 177);
curveVertex(135, 175);
curveVertex(145, 175);
curveVertex(153, 177);
curveVertex(153, 177);
endShape();
strokeWeight(2);
noFill();
beginShape();
curveVertex(185, 177);
curveVertex(185, 177);
curveVertex(195, 175);
curveVertex(205, 175);
curveVertex(213, 177);
curveVertex(213, 177);
endShape();
//nose
strokeWeight(0);
fill(210, 159, 137);
triangle(160, 225, 180, 225, 170, 250);
//mouth
strokeWeight(3);
noFill();
beginShape();
curveVertex(150, 260);
curveVertex(150, 260);
curveVertex(165, 270);
curveVertex(175, 270);
curveVertex(190, 260);
curveVertex(190, 260);
endShape();
}