VIS160_LocBui
Week 2
In week 2, we talked more about senior project proposals and representing our ideas among other students. While discussing our ideas, we also were getting feed backs from professor Brett Stalbaum and classmates on how to start the project. I really enjoyed the discussion and was glad to present my idea. My senior project proposal is inspired by the Infinity Mirror by Yayoi Kusama. I wanted to make a small installation of a box filled with led lights hanging down and a few flowers add in as decorations for the box. The background will fill with animations.
Week 3
I bought a few items online for the project but only some items came in this week. I’m still waiting for 3 more items, then I should be able to start making the flowers. For the box, I’m turning an old box into a black box and using that as the holder for the installation. The size of the box W: 62 cm and L: 38.5 cm
Tools for the box: an empty box, black paint, and some paintbrushes.
Tools for the flowers: 18 gauge-25ft Copper Wire, 1/8 “x 0.014” brass tubing, soldering run, fliers, Air-dry clay, and color papers.
Week 4
Using Arduino test the servo motor and then combine it with the flower. Make the flower go up and down.
Overall, I enjoyed making the wire flower and testing it with Arduino. However, I have to decide which one of the motors I’m going to use for the project. I need to fix the stem so that it doesn’t fall while testing with Arduino and start on the led lights for week 5.
​
Testing dc Motor
Testing Servo Motor
Week 5
For this week, I was just doing research on Arduino’s L293D and writing the 3 relevant works for my project. I learned that I can use 2 servo motors at the same time by using the Arduino L293d motor drive. Very exciting to use it, I’m waiting for it to come home since I ordered it last week on 2/1/2023. I also waiting for a new Arduino Uno board and breadboard to come too since I’m using one set for vis 147B. I also started on the led lights and it turns out very cool. Overall, I did a lot of research over the week and teach myself how to use the Arduino L293d Motor drive.
Week 6
In Week 6 over the weekend, I just finished a small prototype for my project. Testing with L293D motor driver shield with Arduino. It more simple and has less wiring while working with L293D.
For the background, I'm thinking of using Perlin Flow Field for my project.
I also did add colors to these wire flowers and made a cover for the dc motor.
Week 7
In week 7, I started working on the screen for my background. I choose to make Perlin Flow Field in p5js. I watched a few videos, and learn how to make these aesthetic effects. It turned out very well.
My further goal is to make a bigger box either using cardboard or acrylic sheets. Maybe looking for a better screen too since my iPad can't fullscreen the animations.
a
Week 8
Another thing I working on this week is designing a box for my project and laser cutting it in Envision lab. Maybe it gonna be a black box.
Over the weekend, I watched a few tutorial videos on how to make animation in python and tried a few of them out. The question is which one should I use for the final product? Since I can't figure out a way how to fully screen the Perlin Noise animations in p5js.
I also did check on the Led strips light and learned how to connect it with the Arduino Uno. I just ordered 60 of them on amazon and waiting for it to be home and testing it out. I want to use Led Strips since it prevents from too much wirings and able to control more colors.
Week 9
This week, I got to work with the led strip. I like it better than the single led lights I used before. It more brighter and easier to control different colors. It saved a lot more space to put other things inside the box. The led strip light also covering the whole box.
This is the circuit for the led strip light.
This is my final prototype for the senior project Vis160A. I changed my screen background to animation from Python. It's a fractal tree that constantly moves and changes its shape of the tree. Very cool and aesthetic. It fits with the wire flowers and led lights.
Things that I need to improve for this project. The first thing that needs to improve is the box, It needs to be bigger in order to fit everything inside the box. The second thing is to find a screen for my background since I borrowed one from UCSD. The third thing is to learn how to solder so that fewer jumper wires around the box/project.
Coding
Servo-motor codes
#include <Servo.h>
Servo myservo1; // create servo object to control a servo
Servo myservo2; // create servo object to control a servo
int pos = 0; // variable to store the servo position
void setup()
{
myservo1.attach(9);
myservo2.attach(10);
}
void loop()
{
// sweeps from 0 degrees to 200 degrees
for(pos = 0; pos <= 200; pos += 1)
{
myservo1.write(pos);
myservo2.write(pos);
delay(15);
}
delay(200);
// sweeps from 255 degrees to 0 degrees
for(pos = 180; pos>=0; pos-=1)
{
myservo1.write(pos);
myservo2.write(pos);
delay(15);
}
myservo1.detach();
myservo2.detach();
delay(200);
myservo1.attach(9);
myservo2.attach(10);
}
Led-light strip codes
#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
#include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif
// Which pin on the Arduino is connected to the NeoPixels?
#define PIN 13 // On Trinket or Gemma, suggest changing this to 1
// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS 60 // Popular NeoPixel ring size
// When setting up the NeoPixel library, we tell it how many pixels,
// and which pin to use to send signals. Note that for older NeoPixel
// strips you might need to change the third parameter -- see the
//strand test example for more information on possible values.
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);
#define DELAYVAL 500 // Time (in milliseconds) to pause between pixels
void setup() {
// These lines are specifically to support the Adafruit Trinket 5V 16 MHz.
// Any other board, you can remove this part (but no harm leaving it):
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
clock_prescale_set(clock_div_1);
#endif
// END of Trinket-specific code.
pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
}
void loop() {
pixels.clear(); // Set all pixel colors to 'off'
// The first NeoPixel in a strand is #0, second is 1, all the way up
// to the count of pixels minus one.
for(int i=0; i<NUMPIXELS; i++) { // For each pixel...
// pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
// Here we're using a moderately bright green color:
pixels.setPixelColor(i, pixels.Color(170, 0, 255));
pixels.show(); // Send the updated pixel colors to the hardware.
delay(DELAYVAL); // Pause before next pass through loop
}
}
​
Background codes
function Particle(){
this.pos = createVector(random(width),random(height));
this.vel = createVector(0,0);
this.acc = createVector(0,0);
this.maxSpeed = 2;
this.h = 0;
this.prevPosition = this.pos.copy();
this.update = function(){
this.vel.add(this.acc);
this.vel.limit(this.maxSpeed);
this.pos.add(this.vel);
this.acc.mult(0);
}
this.follow = function(vectors){
var x = floor(this.pos.x/scal);
var y = floor(this.pos.y/scal);
var index = x + y *cols;
var force = vectors[index];
this.applyForce(force);
}
this.applyForce= function(force){
this.acc.add(force);
}
this.show = function(){
stroke(this.h, 255, 255, 15);
this.h = this.h + 1;
if(this.h > 255){
this.h = 0;
}
strokeWeight(1);
line(this.pos.x, this.pos.y, this.prevPosition.x, this.prevPosition.y);
// point(this.pos.x, this.pos.y);
this.updatePrevPosition();
}
this.updatePrevPosition = function(){
this.prevPosition.x = this.pos.x;
this.prevPosition.y = this.pos.y;
}
this.edges =function(){
if (this.pos.x > width){
this.pos.x = 0;
this.updatePrevPosition();
}
if (this.pos.x < 0){
this.pos.x = width;
this.updatePrevPosition();
}
if (this.pos.y > height){
this.pos.y = 0;
this.updatePrevPosition();
}
if (this.pos.y < 0){
this.pos.y = height;
this.updatePrevPosition();
}
}
}
​
Background codes part 2
var increase = 0.1;
var scal = 20;
var cols, rows;
var zOffSet = 0;
var fram;
var particles = [];
var flowField = [];
function setup() {
createCanvas(800, 400);
colorMode(HSB, 255);
cols = floor(width/scal);
rows = floor(height/scal);
fram = createP(''); // paragraph on the page
flowField = new Array(cols * rows);
for(var i = 0; i < 500; i++){
particles[i] = new Particle();
}
background(255);
}
function draw() {
var yOffSet = 0;
for (var y = 0; y < rows; y++){
var xOffSet = 0;
for (var x = 0; x < cols; x++){
var index = x+y*cols;
var angle = noise(xOffSet, yOffSet, zOffSet)*TWO_PI*4;
var b = p5.Vector.fromAngle(angle);
b.setMag(1);
flowField[index] = b;
xOffSet += increase;
// fill(n);
// rect(x * scal, y * scal, scal, scal);
stroke(0,100);
// push();
// translate(x * scal, y * scal);
// rotate(b.heading());
// strokeWeight(1);
// line(0, 0, scal, 0);
// pop();
}
yOffSet += increase;
zOffSet += 0.0003;
}
for( var i = 0; i < particles.length; i++){
particles[i].follow(flowField);
particles[i].update();
particles[i].edges();
particles[i].show();
fram.html(floor(frameRate()));
// noLoop();
}
}
​
Background python codes
import pygame, math
import os
os.environ["SDL_VIDEO_CENTERED"]='1'
white,black,blue,purple = (255, 255, 255), (0, 10, 10), (0, 40, 255), (100,0,100)
width, height = 1000, 1000
pygame.init()
pygame.display.set_caption("Fractal Tree")
screen = pygame.display.set_mode((width,height))
clock = pygame.time.Clock()
speed = 0.01
def FractalTree(position, angle, z_value, n_value, direction, color=white, depth=0):
branch_ratio = 0.30
branch = z_value * branch_ratio
angle_x = branch * math.cos(direction)
angle_y = branch * math.sin(direction)
(x,y) = n_value
next_position = (x + angle_x, y + angle_y)
pygame.draw.line(screen, color, n_value, next_position, 2)
if position > 0:
if depth == 0:
first_color = blue
second_color = purple
else:
first_color = color
second_color = color
new = z_value *(1-branch_ratio)
FractalTree(position-1, angle, new, next_position, direction-angle, first_color, depth+1)
FractalTree(position-1, angle, new, next_position, direction+angle, second_color, depth+1)
def main():
angle = 0
while True:
clock.tick(60)
for event in pygame.event.get():
if event.type == pygame.QUIT:
pygame.quit()
angle+=speed
screen.fill(black)
FractalTree(9, angle, height* 0.9, (width//2, width-50), -math.pi/2)
pygame.display.update()
if __name__== "__main__":
main()
pygame.quit()
​
Timeline
Week 2:
-Project proposal
-Ordering items online
Week 3:
-Finishing up the flower design
-Finishing up the box design
-Start on the led lights
-Check the vibration sensor and light sensor
Week 4:
-Finishing up the led lights
-Testing the prototype with Arduino, making sure everything runs
-Prepare for the midterm presentation
Week 5:
-Edit the website
-Using feedback and continue working on the project
-Reading python and p5js for the background animation
Week 6:
-Start on the background coding
-By the end of the week should have a better idea what to make for the background
Week 7:
-Finishing the background
-Testing animation with a small screen or projector
Week 8:
-Continuing with the project
-Readjust the flowers, led lights, and the screen inside the box
-Checking the codes
Week 9:
-Finishing everything
-Checking the wires, and Arduino boards multiple times and making sure everything functions.
-prepare for the final presentation
Week 10:
-Final presentation
​